একসাথে জিকুয়ারি-মোবাইল / ফোনগ্যাপ ব্যবহারের সঠিক উপায়?

107

JQuery মোবাইল এবং ফোনগ্যাপ একসাথে ব্যবহার করার সঠিক উপায় (এই তারিখের) কী?

উভয় ফ্রেমওয়ার্কগুলি ব্যবহার করার আগে তাদের লোড করা দরকার। আমি কীভাবে নিশ্চিত হতে পারি যে আমি তাদের ব্যবহারের আগে উভয়ই বোঝা হয়েছি?

jquery jquery-mobile cordova

— Juw
সূত্র

11

অনুগ্রহ ! একটি উত্তর চয়ন করুন !!!

— রিয়েলটবো

যদিও এটি এর প্রাপ্য, তবুও আমি উত্তরটি না দেওয়া পর্যন্ত এটি +1 করব না <3

— ডন ভন

1

এখানে প্রকৃত সমস্যাটি কী সমাধান হচ্ছে - আমি যদি কেবলমাত্র আমার সূচি html এ jQuery এবং কর্ডোভার জন্য প্রয়োজনীয় জেএস ফাইলগুলির জন্য রেফারেন্স সরবরাহ করি এবং তারপরে jQuery এর m .Mobile.changeage ব্যবহার করে তৃতীয় জেএস ফাইল থেকে লগইন পৃষ্ঠাটি বলতে পুনর্নির্দেশ করব? আমার অর্থ কী এই নকশাটি কাজ করা বন্ধ করে দেয় এবং আমার নীচে বর্ণিত সমাধানগুলি কেন প্রয়োজন? এটি কি কারণ যে jQuery এবং / অথবা কর্ডোভা এবং আমার 3 য় জেএস ফাইলটি 2 ফ্রেমওয়ার্কগুলি লোড হওয়ার আগেই লোড করা যেতে পারে তার ভিতরে অ্যাসিঙ্ক্রোনাস লোড রয়েছে? সুপারিশ করুন. ধন্যবাদ

— মোস্তফা

@ মুস্তফা উদাহরণস্বরূপ আপনি যদি ondeviceReadyআপনার জিকিউএম কোড থেকে ইভেন্টটি চালিত হওয়ার আগে আপনি ডাটাবেসটি অ্যাক্সেস করার চেষ্টা করতে পারেন ...

— মিরকো

174

আপনি JQuery এর স্থগিত বৈশিষ্ট্য ব্যবহার করতে পারেন।

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  // TBD
}

— Octavian
সূত্র

3

এই উত্তরের আরও বেশি ভোট পাওয়া উচিত এবং সঠিক হিসাবে চিহ্নিত করা উচিত।

— স্মরণীয়

4

আপনি কি আরও একটু বিস্তারিত বলতে পারেন? ফাইলের রেফারেন্সগুলির ক্রমবিন্যাস দেখতে কেমন? ধন্যবাদ

— farjam

2

দয়া করে আপনি কি সর্বশেষতম সংস্করণ ব্যবহার করে স্ক্রিপ্ট লোডিংয়ের ক্রম যুক্ত করতে পারবেন ??

— রিয়েলটবো

7

যারা বলে থাকেন এটি কার্যকর হয় না - স্ক্রিপ্ট বিষয়গুলি ঘোষণার ক্রম। প্রথমে jquery অন্তর্ভুক্ত করুন, তারপরে স্ক্রিপ্টের উপাদানগুলির মধ্যে এই কোড, তারপরে jquery মোবাইল js।

— মনীশ

1

কি হবে cordova.js? এটি কি জিকিউএম এর আগে বা পরে লোড করা উচিত?

— ফার্ডিনানড.ক্রাফ্ট

17

উপরের উদাহরণের ভিত্তিতে এটি আমার জন্য কীভাবে কাজ করেছে তা এখানে

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <title>InforMEA</title>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            var dd = $.Deferred();
            var jqd = $.Deferred();
            $.when(dd, jqd).done(doInit);

            $(document).bind('mobileinit', function () {
                jqd.resolve();
            });
        </script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
        <script type="text/javascript">
            document.addEventListener('deviceready', deviceReady, false);
            function deviceReady() {
                dd.resolve();
            }

            function doInit() {
                alert('Ready');
            }
        </script>
    </body>
</html>

— ক্রিশ্চিয়ান রোমানেস্কু
সূত্র

এটি আমার পক্ষেও কার্যকর হয়েছে তবে এইচটিএমএল ট্যাগ পৃষ্ঠাটি বন্ধ করার আগে যদি আমি <div id = "টেস্ট-সূচক পৃষ্ঠা" ডেটা-ভূমিকা = "পৃষ্ঠা"> </div> একই পৃষ্ঠাতে যুক্ত করি তবে আমি ত্রুটি পেয়েছি । আমি উভয় ফ্রেমওয়ার্কগুলি উভয়ই লোড হওয়া বিন্দু থেকে তৃতীয় জেএস ফাইল ব্যবহার করে শুরু করতে চাই। আমি কেমন করে ঐটি করি?

— মোস্তফা

অবশ্যই আমি তৃতীয় জেএস ফাইলটি লোড করার চেষ্টা করেছি যা আমার অ্যাপ্লিকেশনটির জন্য doInit () এ ব্যবসায়িক যুক্তি রয়েছে তবে এটি কার্যকর হয়নি। এই ফাইলটিতে ইভেন্ট বাইন্ডিং যুক্তি এবং ফাংশন ডিক্লেয়ারেশন রয়েছে যেমন $ (ডকুমেন্ট) .delegate ('# ফখেরা-সূচক পৃষ্ঠা', 'পেজিনিট', ফাংশন (ইভেন্ট) {... I আমি কীভাবে এটি করতে পারি?

— মোস্তফা

7

Jquery মোবাইলের সাথে ফোনগ্যাপ ব্যবহার করার জন্য, আপনাকে এটি এ জাতীয় ব্যবহার করা দরকার

<head>
<title>Index Page</title>

<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Adding jQuery scripts -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

<!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
 $.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
 $.ajax to load cross-domain pages. -->
<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>

<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
    src="cordova/cordova-1.8.0.js"></script>

<!-- Adding jQuery mobile scripts & CSS -->
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript"
    src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>

</head>
<script type="text/javascript">
    // Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
    document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
        navigator.splashscreen.hide();

        document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener    

    }
    </script>
<body>
<div data-role="page" id="something" data-ajax="false">
        <script type="text/javascript">
            $("#something").on("pageinit", function(e) {

            });

            $("#something").on("pageshow", function(e) {

            });

            $("#something").on("pagebeforeshow", function(e) {

            });
        </script>

        <div data-role="header">            
        </div>

        <div data-role="content">           
        </div>      
    </div>
</body>

— Coder_sLaY
সূত্র

6

যতক্ষণ লোকেরা স্থগিত হওয়াটি ব্যবহারের পরামর্শ দেয় যতক্ষণ না আপনি কোন অর্ডারটি পছন্দ করেন না devicereadyএবং mobileinitকীভাবে খুশি হন। তবে আমার ক্ষেত্রে, pageshowযখন অ্যাপ্লিকেশনটি প্রথম লোড হয়েছিল এবং mobileinitএক্সটেনশনের মাধ্যমে সেগুলি pageshow/ pagebeforeshow/ ইত্যাদি ইভেন্টগুলি হয়েছিল তখন আমার কয়েকটি ইভেন্টের প্রয়োজন ছিল সমস্ত গুলি ছোঁড়া devicereadyশেষ হওয়ার আগে , সুতরাং আমি তাদের পিছনে কোনও স্থগিত রেখে সঠিকভাবে আবদ্ধ করতে পারি না। এই রেসের অবস্থাটি ভাল জিনিস ছিল না।

আমার যা করা দরকার তা নিশ্চিত করা হয়েছিল যে '' মোবাইলিনিট ' deviceready' ইতিমধ্যে বরখাস্ত হওয়ার আগে পর্যন্ত ঘটেছিল না । কারণ mobileinitআপনি JQM লোড করার সাথে সাথেই অগ্নিকাণ্ডগুলি আমি jQuery.getScriptএটি লোড করার জন্য বেছে নেওয়ার পরে devicereadyইতিমধ্যে শেষ হয়ে গিয়েছিলাম।

<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/async.min.js"></script>
<script src="js/app.js"></script>
<script>
  document.addEventListener(
    'deviceready',
    function () {
      $('body').css('visibility', 'hidden');
      $(document).one("mobileinit", function () {
        app.init();
        $('body').css('visibility', '');
      });
      $.getScript('js/jquery.mobile-1.2.0.min.js');
    },
    false
  );
</script>

আমি দেহটি আড়াল করার কারণটি হ'ল এই পদ্ধতির একটি পার্শ্ব প্রতিক্রিয়া হ'ল jquery.mobile লোডের আগে মূল HTML ডকুমেন্টের দৃশ্যমানতার অর্ধেক দ্বিতীয়। এই ক্ষেত্রে এটি আড়াল করে ফাঁকা স্থানের অতিরিক্ত অর্ধেক সেকেন্ডটি আনস্টাইলযুক্ত নথিটি দেখার চেয়ে পছন্দ করা হয়।

— জেফ্রি ভ্যান অ্যালস্টাইন
সূত্র

1

আপনার উত্তরের জন্য +1 এর ফলে কিছুটা পরিবর্তন নিয়ে আমার সমস্যা সমাধানের জন্য আমাকে অনুপ্রাণিত করা হয়েছিল। প্রথমে, বডিএলড () এর খুব প্রথম লাইনে বডি হাইড () কোডটি সরান; দ্বিতীয়ত, getScript (jQM_PATH) এর পরে থাকা বডি.শো () কোডটি সরান; কারণ, প্রতিটি জিকিউএম পৃষ্ঠার ট্রানজিশনে মোবাইলআইনেট () কল করা হয়। আদর্শ নয়। আশা করি এটি অন্যকে সহায়তা করবে।

— জর্জ ডাব্লু

আপনি কী আপনার বাকি অংশটি অন্তর্ভুক্ত করতে পারেনindex.html

— জেগালার্ডো

এটি আমার পক্ষে কার্যকর হয়নি কারণ কর্ডোভা সেখানে থাকা সমস্ত ফাইল সরিয়ে দিচ্ছিল <script>ট্যাগ ব্যবহার করে অন্তর্ভুক্ত ছিল না ।

— ক্রিস তুষার

2

আমি বিশ্বাস করি যে স্থগিত করা বৈশিষ্ট্যটি ব্যবহার করা প্রয়োজন নয়। (ফোনগ্যাপের নতুন সংস্করণগুলির সাথে এটি প্রয়োজনীয় নয়?) আমার সূচক এইচটিএমএল ফাইলের মাথায় এটি রয়েছে এবং সবকিছু ঠিকঠাক কাজ করে। আমি মনে করি যে jquery, ফোনগ্যাপ এবং jquery মোবাইল অন্তর্ভুক্ত করার ক্রম গুরুত্বপূর্ণ।

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <!-- Adding jQuery -->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

    <!-- Add Phonegap scripts -->
    <script type="text/javascript" src="phonegap.js"></script>

    <!-- Add jQuery mobile -->
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>

    <title>MY TITLE</title>
</head>

— অ্যালি হচ জানোক
সূত্র

1

এটা আমার জন্য কাজ। ধাওয়ালের উপর ভিত্তি করে, এই নমুনাটি যখন আমি স্ক্লাইট ব্যবহার করা শিখি

<!DOCTYPE html>
<html>
 <head>
<title>Cordova Sqlite+Jquery</title>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.min.js"></script>   
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">`

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-1.8.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Populate the database 
//
function populateDB(tx) {
    tx.executeSql('DROP TABLE IF EXISTS DEMO');
    tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}

// Query the database
//
function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

// Query the success callback
//
function querySuccess(tx, results) {
    var len = results.rows.length;
    //console.log("DEMO table: " + len + " rows found.");
    $('#result').html("DEMO table: " + len + " rows found.");
    var listval = '';
    for (var i=0; i<len; i++){
        //console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
         listval += '<li>'+ results.rows.item(i).data + '[' + results.rows.item(i).id + '] </li>';
    }

    $('#listItem').html(listval);

}

// Transaction error callback
//
function errorCB(err) {
    console.log("Error processing SQL: "+err.code);
}

// Transaction success callback
//
function successCB() {
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(queryDB, errorCB);
}

// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
    // Now safe to use the Cordova API
    //alert('ready');
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(populateDB, errorCB, successCB);
    //$('#result').html('hello');
}

</script>
  </head>
 <body onload="onLoad()">
  <div>result:</div><div id="result"></div>
  <ul id="listItem">
  </ul>
 </body>
 </html>

— জেটুনস সিএইচ
সূত্র

0

@ জেফরির উত্তরটি তৈরি করতে, আমি একটি অনেক ক্লিনার উপায় খুঁজে পেয়েছি যা এইচটিএমএল মার্কআপ লুকিয়ে রাখে যতক্ষণ না জেকিউএম পৃষ্ঠার প্রসেসিং শেষ না করে এবং প্রথম পৃষ্ঠার উপাদানটি রেন্ডার করে, যেহেতু আমি লক্ষ করেছি যে জিকিউএম রেন্ডারগুলির আগে খালি মার্কআপের 1/2 সেকেন্ড ফ্লিকারটি।

আপনাকে কেবল সিএসএস দিয়ে সমস্ত মার্কআপ লুকিয়ে রাখতে হবে ... জেকিউএম দ্বারা পৃষ্ঠা প্রদর্শন () আপনার জন্য দৃশ্যমানতা টগল করবে।




//snip
<style type="text/css">
.hide {
  display:none;
}
</style>

//snip - now the markup notice the hide class
<div id="page1" data-role="page" class="hide">
     //all your regular JQM / html form markup
</div>

//snip -- down to the end of /body
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
   document.addEventListener(
     'deviceready',
      function () {
         $(document).one("mobileinit", function () {
         //any JQM init methods

       });
      $.getScript('js/jquery.mobile-1.2.0.min.js');
   },
   false);
</script>

— এরিক
সূত্র

আপনার পরামর্শটি চেষ্টা করেছিলাম এবং এটি আমার পক্ষে কার্যকর হয়নি। জিকিউএম পৃষ্ঠাগুলি লুকানো প্রথম পৃষ্ঠাটি প্রদর্শন করবে না। তদুপরি, মানক এইচটিএমএল এখনও লুকিয়ে থাকার আগে প্রদর্শিত হয়। সময়মতো সামান্য পরিবর্তিত হয়ে জেফরির সমাধানের ভিত্তিতে আমি শেষ পর্যন্ত এটিকে কাজ করেছিলাম। তার উত্তর নীচে আমার মন্তব্য দেখুন।

— জর্জ ডাব্লু

0

নিম্নলিখিতগুলি আমার জন্য পিজি ২.৩ এবং জ্যাকিউএম ১.২, সহ কাজ করেছে। ফেসবুক সংযোগ প্লাগইন:

<head>
<script src="./js/jquery-1.8.2.min.js"></script>
<script>
    $.ajaxSetup({
        dataType : 'html'
    });

    var dd = $.Deferred();
    var jqd = $.Deferred();
    $.when(dd, jqd).done(function() {                

        FB.init({ appId: auth.fbId, nativeInterface: CDV.FB, useCachedDialogs: false });
    });

    $(document).bind('mobileinit', function () {
        jqd.resolve();
    });                        
</script>
<script src="./js/jquery.mobile-1.2.0.min.js"></script>
<script>
    $.mobile.loader.prototype.options.text = "loading";
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.theme = "a";
    $.mobile.loader.prototype.options.html = "";

    $.mobile.ajaxEnabled = false;
    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;       

    $('[data-role=page]').live('pagecreate', function(event) {                      
        tpl.renderReplace('login', {}, '#content-inner', function() {                   
            auth.init();
        });
    });
</script>
<script src="./js/cordova-2.3.0.js"></script>
<script src="./js/cdv-plugin-fb-connect.js"></script>
<script src="./js/facebook_js_sdk.js"></script>                     
<!--some more scripts -->
<script>        
    document.addEventListener('deviceready', function() {
        dd.resolve();
    }, false);                        
</script>  
<head>

— জেনস পিটারস
সূত্র

-1

ফোনগ্যাপ লোড করা jQuery লোড করার চেয়ে কিছুটা আলাদা। jQuery ইউটিলিটি লাইব্রেরি হিসাবে আরও কাজ করে যাতে আপনি এটি অন্তর্ভুক্ত করেন এবং এটি অবিলম্বে ব্যবহারের জন্য উপলব্ধ। অন্যদিকে ফোনগ্যাপের যথাযথ প্রারম্ভিককরণের জন্য দেশীয় কোডের সমর্থন দরকার তাই এটি পৃষ্ঠাতে অন্তর্ভুক্ত করার পরে শীঘ্রই ব্যবহার করতে প্রস্তুত নয়।

ফোনগ্যাপটি devicereadyকোনও স্থানীয় নির্দিষ্ট কোড নির্বাহের জন্য ইভেন্টটি নিবন্ধ করার এবং অপেক্ষা করার পরামর্শ দেয় ।

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Example</title>

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript">
        // jquery code here
    </script>
    <script type="text/javascript" charset="utf-8" src="lib/android/cordova-1.7.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    function onLoad(){
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova is ready
    function onDeviceReady() {
        // write code related to phonegap here
    }
    </script>
  </head>
  <body onload="onLoad()">
    <h1>Phonegap Example</h1>
  </body>
</html>

আরও তথ্যের জন্য ডক চেক করুন

— dhaval
সূত্র

1

তবে সমস্যাটি হ'ল আমি আমার jquery কোডে ফোনগ্যাপ স্টাফ ব্যবহার করতে চাই। আপনার উদাহরণে ফোনগ্যাপ এমনকি লোড হওয়ার আগে সমস্ত jquery কোড চালানো হবে। আমি যদি ডিভাইস রেডি () ফাংশনটির ভিতরে সমস্ত কোড রাখি? এটি পছন্দ করুন: $ ("# ফর্ম") live

— Juw

যদি আপনার #formপ্রথম পৃষ্ঠা হয় তবে pageinitখুব দেরি হওয়ায় আপনি কলব্যাক পাবেন না

— ধাওয়াল