JQuery-Mobile / Phonegap का एक साथ उपयोग करने का सही तरीका?

107

JQuery मोबाइल और फोनगैप का एक साथ उपयोग करने का सही तरीका (इस तिथि तक) क्या है?

दोनों रूपरेखाओं को उपयोग करने से पहले लोड करने की आवश्यकता होती है। मैं यह कैसे सुनिश्चित कर सकता हूं कि दोनों का उपयोग करने से पहले लोड किया जाए?

jquery jquery-mobile cordova

— Juw
स्रोत

11

कृप्या ! एक जवाब चुनें !!!

— 18 मई को realtebo

हालांकि यह इसके लायक है, मैं +1 नहीं जा रहा हूं जब तक कि एक जवाब चुना नहीं जाता है <3

— डॉन वॉन

1

यहां वास्तविक समस्या को हल किया जा रहा है - क्या होगा यदि मैंने सिर्फ अपने index.html में jQuery और कॉर्डोवा के लिए आवश्यक js फ़ाइलों के संदर्भ दिए हैं और फिर jQuery के $ .mobile.changePage का उपयोग करके 3rd js फ़ाइल से लॉगिन पृष्ठ कहने के लिए पुनर्निर्देशित किया है? मेरा मतलब है कि इस डिजाइन को काम करने से क्या रोकता है और मुझे नीचे उल्लिखित समाधान की आवश्यकता क्यों है? क्या ऐसा इसलिए है क्योंकि jQuery और / या कॉर्डोवा के अंदर अतुल्यकालिक भार हैं और 2 फ्रेम लोड होने से पहले ही मेरी तीसरी js फाइल लोड की जा सकती है? कृपया सुझाव दे। साभार

— मुस्तफा

उदाहरण के लिए @Mustafa आप डेटाबेस तक पहुँचने की कोशिश कर सकते हैं ondeviceReadyघटना से पहले अपने JQM कोड से शुरू हो रहा है ...

— Mirko

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
}

— ऑक्टेवियन
स्रोत

3

इस उत्तर को अधिक वोट मिलना चाहिए और सही के रूप में चिह्नित किया जाना चाहिए।

— 17

4

क्या आप थोड़ा और विस्तार से बता सकते हैं? फ़ाइल संदर्भों का पदानुक्रम कैसा दिखता है? धन्यवाद

— farjam

2

कृपया, क्या आप नवीनतम संस्करण का उपयोग करते हुए स्क्रिप्ट लोड करने के क्रम को जोड़ सकते हैं ??

— रियल्टीबो

7

उन सभी के लिए जो कहते हैं कि यह काम नहीं करता है - स्क्रिप्ट मामलों की घोषणा का क्रम। पहले एक स्क्रिप्ट तत्व के अंदर jquery, THEN THDE CODE, फिर jquery मोबाइल js शामिल करें।

— मनीष

1

किस बारे में cordova.js? इसे JQM से पहले या बाद में लोड किया जाना चाहिए?

— फर्डिनेंड.क्राफ्ट

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>

— क्रिस्टियन रोमनस्कु
स्रोत

यह मेरे लिए भी काम करता है, लेकिन अगर मैं html टैग बंद करने से पहले एक ही पेज पर <div id = "test-index-page" data-role = "page"> </ div> जोड़ देता हूं तो पेज लोड नहीं होता है और मुझे त्रुटियां मिलती हैं। । मैं दोनों फ्रेम लोड किए गए बिंदु से तीसरे जेएस फ़ाइल का उपयोग करके दोनों रूपरेखाओं का उपयोग करना शुरू करना चाहता हूं। मैं उसको कैसे करू?

— मुस्तफा

बेशक, मैंने 3 जीएस फाइल को लोड करने की कोशिश की, जिसमें मेरे ऐप के लिए डूइनिट () में व्यावसायिक तर्क हैं, लेकिन यह काम नहीं किया। उस फाइल में इवेंट बाइंडिंग लॉजिक और फंक्शन डिक्लेरेशन जैसे $ (डॉक्यूमेंट) है। डेलीगेट ('# फखेरा-इंडेक्स-पेज', 'पेजइनिट', फंक्शन (इवेंट) {...}। मैं यह कैसे कर सकता हूं?

— मुस्तफा

7

Jquery मोबाइल के साथ-साथ phonegap का उपयोग करने के लिए, आपको इसे इस तरह उपयोग करने की आवश्यकता है

<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.mx भार से पहले मूल HTML दस्तावेज़ की दृश्यता का आधा सेकंड है। इस मामले में इसे छुपाने के लिए खाली स्थान का एक अतिरिक्त आधा हिस्सा अस्थिर दस्तावेज़ को देखने के लिए पसंद किया जाता है।

— जेफरी वैन एलस्टाइन
स्रोत

1

इसके लिए आपके जवाब पर +1 ने मुझे कुछ मामूली बदलाव के साथ मेरी समस्या को हल करने के लिए प्रेरित किया। सबसे पहले, body.hide () कोड onBodyLoad () की बहुत पहली पंक्ति में ले जाएं; दूसरा, बॉडी.शो () कोड गेटस्क्रिप्ट (jQM_PATH) के बाद होना चाहिए; क्योंकि, प्रत्येक JQM पृष्ठ संक्रमण पर mobileInit () कहा जाता है। आदर्श नहीं। आशा है कि यह दूसरों की मदद करता है।

— जॉर्जडब्ल्यू

क्या आप अपने बाकी के सभी को शामिल कर सकते हैंindex.html

— JGallardo

यह मेरे लिए काम नहीं करता था क्योंकि कॉर्डोबा उन सभी फाइलों को हटा रहा था जिनमें <script>टैग का उपयोग करना शामिल नहीं था ।

— क्रिस स्नो

2

मेरा मानना है कि आस्थगित सुविधा का उपयोग करना आवश्यक नहीं है। (शायद फोनगैप के नए संस्करणों के साथ यह आवश्यक नहीं है?) मेरे पास मेरी index.html फ़ाइल के प्रमुख में है और सब कुछ ठीक है। मुझे लगता है कि jquery, phonegap और 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>

— Ztuons चौ
स्रोत

0

@ जेफरी के जवाब पर निर्माण करने के लिए, मैंने एक बहुत क्लीनर तरीका पाया जो HTML मार्कअप को छुपाता है जब तक कि JQM ने पेज को प्रोसेस करना और पहले पेज एलिमेंट को रेंडर नहीं कर दिया है, क्योंकि मैंने देखा है कि JQM रेंडर करने से पहले नंगे मार्कअप के 1/2 सेकंड फ्लिकर करता है।

आपको केवल सभी मार्कअप को css के साथ छुपाना होगा ... JQM द्वारा PageShow () आपके लिए दृश्यता को टॉगल करेगा।




//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>

— एरिक
स्रोत

अपने सुझाव की कोशिश की और यह मेरे लिए काम नहीं किया। JQM Pageshow पहले छिपे हुए पेज को नहीं दिखाएगा। इसके अलावा, मानक HTML अभी भी छिपे होने से पहले दिखाई देता है। मैंने अंततः इसे जेफरी के समाधान के आधार पर काम किया और समय में थोड़ा बदलाव किया। उनके जवाब के नीचे मेरी टिप्पणी देखें।

— जॉर्जडब्ल्यू

0

निम्नलिखित ने पीजी 2.3 और JQM 1.2, incl पर मेरे लिए काम किया। फेसबुक कनेक्ट प्लगइन:

<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

PhoneGap का लोडिंग jQuery के लोडिंग से थोड़ा अलग है। jQuery एक उपयोगिता पुस्तकालय के रूप में अधिक काम करता है ताकि आप इसमें शामिल हों और यह तुरंत उपयोग के लिए उपलब्ध है। दूसरी ओर PhoneGap को उचित आरंभ के लिए देशी कोड से समर्थन की आवश्यकता होती है, इसलिए यह पृष्ठ में शामिल करने के बाद जल्द ही उपयोग करने के लिए तैयार नहीं है।

फोनगैप 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 कोड फ़ोनगैप के लोड होने से पहले चलाए जाएंगे। शायद अगर मैं onDeviceReady () फ़ंक्शन के अंदर सभी कोड डालूं? इस तरह: $ ("# फॉर्म")। लाइव ("पेजिनिट", फ़ंक्शन (घटना) {// फोनगैप सामान यहां});

— Juw

यदि आपका #formपहला पृष्ठ है तो आप pageinitकॉलबैक प्राप्त नहीं करेंगे क्योंकि बहुत देर हो चुकी है

— dhaval