jQuery मोबाइल पेज रीफ्रेश तंत्र

Question

मुझे वर्तमान में बहुत दर्द हो रहा है कि AJAX अद्यतन के बाद JQuery मोबाइल हैंडल पेज रीफ्रेश कैसे करें।

मेरे पास दो पृष्ठ हैं - अद्वितीय फ़ाइल साइट: एक खोज इंजन।

पहला पृष्ठ एक खोज क्षेत्र है। जमा करें एक JSON कॉल और पार्सर जो दूसरे पृष्ठ को अद्यतन करता है: परिणाम।

अब के लिए मैं उपयोग कर रहा हूं: $.mobile.changePage($('#result')); जो खोज क्षेत्र से परिणाम पृष्ठ तक बहुत अच्छा काम करता है। हालांकि: यदि मैं इसे अगले/पिछली पृष्ठों (नया जेसन कॉल, नया पार्स, डीओएम में नए जोड़े गए नोड्स) के परिणाम पृष्ठ से पुन: उपयोग करता हूं; Jquery मोबाइल बस नए जोड़े गए नोड्स को "पेंट" न करें।

किसी को भी, यह बताएं कि मैं पेज परिवर्तनों को संभाल चाहिए पर इस्तेमाल करते हैं और 1- $.mobile.page() 2- $.mobile.changePage() 3- $.mobile.refresh()

या मुझे एक संकेत दे का गौरव को खुश कर सकते हैं। धन्यवाद!

Answer 1

कृपया अच्छी तरह से देखने के लिए यहाँ ले: http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage() एक पृष्ठ से दूसरे में परिवर्तित करने के लिए है, और पैरामीटर एक यूआरएल या एक पेज वस्तु हो सकता है। एक महत्वपूर्ण अंतर

नोट है कि वहाँ: (केवल #result भी काम करेंगे)

$.mobile.page() अब और अनुशंसित नहीं है, .trigger("create") का इस्तेमाल करें, यह भी देखें: JQuery Mobile .page() function causes infinite loop?

महत्वपूर्ण: बनाम ताज़ा बनाएं निर्माण ईवेंट और कुछ विजेट्स के रीफ्रेश विधि के बीच एक महत्वपूर्ण अंतर है। निर्माण कार्यक्रम कच्चे मार्कअप को बढ़ाने के लिए उपयुक्त है जिसमें एक या अधिक विजेट शामिल हैं। रीफ्रेश विधि जो कुछ विगेट्स को मौजूदा (पहले से बढ़ाए गए) विजेट्स पर प्रयोग किया जाना चाहिए जिन्हें प्रोग्रामेटिक रूप से छेड़छाड़ की गई है और यूआई की आवश्यकता है मिलान के लिए अपडेट किया जाना चाहिए।

उदाहरण के लिए, यदि आपके पास एक पृष्ठ था जहां आपने पृष्ठ निर्माण के बाद डेटा-भूमिका = सूचीदृश्य विशेषता के साथ एक नई अनियंत्रित सूची को गतिशील रूप से जोड़ा, तो उस सूची के मूल तत्व पर ट्रिगर करने से इसे एक सूचीदृश्य स्टाइल विजेट में बदल दिया जाएगा। यदि अधिक सूची आइटम प्रोग्रामेटिक रूप से जोड़े गए थे, तो सूचीदृश्य की रीफ्रेश विधि को कॉल करने से केवल उन नई सूची आइटम को उन्नत स्थिति में अपडेट किया जाएगा और मौजूदा सूची आइटम छूटे रहेंगे।

$.mobile.refresh() मैं अनुमान

मौजूद नहीं है तो आप अपने परिणामों के लिए क्या प्रयोग कर रहे हैं? एक सूचीदृश्य? तो फिर तुम यह करने से अद्यतन कर सकते हैं:

$('ul').listview('refresh'); 

उदाहरण: http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/

नहीं तो आप कर सकते हैं:

$('#result').live("pageinit", function(){ // or pageshow 
    // your dom manipulations here 
}); 

Answer 2

मैं पोस्ट किया है कि jQuery मंचों में (मुझे आशा है कि यह मदद कर सकते हैं):

जेक्यूएम कोड में डाइविंग मुझे यह समाधान मिला है।मुझे आशा है कि यह अन्य लोगों की मदद कर सकते हैं:

एक गतिशील रूप से संशोधित पेज को ताज़ा करने के लिए:

function refreshPage(page){ 
    // Page refresh 
    page.trigger('pagecreate'); 
    page.listview('refresh'); 
} 

यह काम करता है, भले ही आप नए हेडर, navbars या पाद पैदा करते हैं। मैंने इसे जेक्यूएम 1.0.1 के साथ परीक्षण किया है।

Answer 3

function refreshPage() 
{ 
    jQuery.mobile.changePage(window.location.href, { 
     allowSamePageTransition: true, 
     transition: 'none', 
     reloadPage: true 
    }); 
} 

यहाँ http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/ से लिया भी jQuery मोबाइल 1.2.0

Answer 4

पर परीक्षण इस उत्तर मुझे http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php के लिए चाल किया था।

एक बहु पृष्ठों टेम्पलेट के संदर्भ में, मैं एक जावास्क्रिप्ट 'pagebeforeshow' हैंडलर में एक <div id="foo">...</div> की सामग्री को संशोधित और स्क्रिप्ट के अंत में एक ताज़ा को गति प्रदान:

$(document).bind("pagebeforeshow", function(event,pdata) { 
    var parsedUrl = $.mobile.path.parseUrl(location.href); 
    switch (parsedUrl.hash) { 
    case "#p_02": 
     ... some modifications of the content of the <div> here ... 
     $("#foo").trigger("create"); 
    break; 
    } 
}); 

Answer 5

मैं इस समस्या का समाधान उन पेजों पर पेज div में डेटा-कैश = "झूठी" विशेषता का उपयोग करके जिन्हें मैं ताज़ा करना चाहता था।

<div data-role="page" data-cache="false"> 
/*content goes here*/ 

</div> 

मेरे मामले में यह मेरा शॉपिंग कार्ट था। यदि किसी ग्राहक ने अपने कार्ट में कोई आइटम जोड़ा और फिर खरीदारी जारी रखी और फिर अपने कार्ट में एक और आइटम जोड़ा तो कार्ट पेज नया आइटम नहीं दिखाएगा। जब तक वे पृष्ठ को रीफ्रेश नहीं करते। जहां तक ​​मैं समझता हूं उस पृष्ठ को कैश करने के लिए जेक्यूएम को झूठे निर्देशों में डेटा-कैश सेट करना।

उम्मीद है कि यह भविष्य में दूसरों की सहायता करेगी।

Answer 6

मुझे यह थ्रेड jQuery मोबाइल के साथ एक AJAX पेज रीफ्रेश बटन बनाने के लिए देख रहा है।

@sgissinger के पास जो कुछ मैं ढूंढ रहा था उसका सबसे नज़दीकी उत्तर था, लेकिन यह पुराना था।

मैं बना सकते हैं और ताज़ा के बीच के अंतर को स्पष्ट करने के लिए के लिए jQuery मोबाइल 1,4

function refreshPage() { 
    jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, { 
    allowSamePageTransition: true, 
    transition: 'none', 
    reloadPage: true 
    // 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406 
    }); 
} 

// Run it with .on 
$(document).on("click", '#refresh', function() { 
    refreshPage(); 
});