jQuery मोबाइल pageinit/

Question

फायरिंग नहीं pagecreate मैं 5 पृष्ठों है - आसानी कहना की सुविधा देता है के लिए:

• one.html
• two.html
• three.html
• four.html
• five.html

जब मैं प्रत्येक व्यक्ति के पृष्ठ लोड, दोनों pageinit और pagecreate सही ढंग से फायरिंग कर रहे हैं।

समस्या:

जब मैं two.html को, pageinit और pagecreate दोनों आग one.html से जाना है, लेकिन (two.html से) जब मैं वापस जाने के one.html को, pageinit और pagecreate नहीं करते आग।

यह क्यों है और मैं पृष्ठ लोड पर pageinit और pagecreate कैसे आग लगा सकता हूं, साथ ही प्रत्येक पृष्ठ के माध्यम से नेविगेट कर सकता हूं?

अद्यतन:

प्रत्येक पृष्ठ के लिए मेरे पास है:

<div data-role="page" id="page-name"> 

// content 
</div> 

जब चीजें मैं सक्रिय हो रहे हैं पर आदेश का परीक्षण करने के कार्य करें:

$(document).on('pagecreate','[data-role=page]', function(){ 
    console.log('PAGECREATE'); 
}); 
$(document).on('pageinit','[data-role=page]', function(){ 
    console.log('PAGEINIT'); 
}); 
$(document).on('pagebeforeshow','[data-role=page]', function(){ 
    console.log('PAGEBEFORESHOW'); 
}); 
$(document).on('pageshow','[data-role=page]', function(){ 
    console.log('PAGESHOW'); 
}); 

मैं हमेशा के लिए pagechange का उपयोग कैसे करूँ pageinit और pagecreate

Answer 1

तुम गलत घटनाओं के लिए जाँच कर रहे हैं, pageinit और pageshow क्या आप के बारे में चिंतित होना चाहिए।

pageinit आग हर एक पेज के लिए पहली बार भरी हुई है, jQM कैश डोम/स्मृति इसलिए जब आप two.html से वापस नेविगेट one.html करने के लिए पृष्ठों, pageinit नहीं होगा आग (यह पहले से ही प्रारंभ की गई हैं)

pageshow आग हर एक पेज में दिखाया गया है, यह क्या आप जब आप one.html को

साथ में आप बंद स्वच्छ कोड का एक बहुत खींच सकते हैं two.html से वापस नेविगेट की तलाश करने की आवश्यकता है, प्रारंभ करने, कॉन्फ़िगरेशन इत्यादि के लिए पेजिनिट का उपयोग करें और प्रारंभिक स्थिति में अपना डीओएम अपडेट करें।

1. बाँध एक: यदि आप दृश्य के बीच बदलने pageshow में इसे संभाल कर सकते हैं कि पृष्ठ पर गतिशील डेटा है, तो
   
   

   यहां पर अधिक वेबसाइटों है कि हम उत्पादन परिवेश में उपयोग करने के लिए एक अच्छा डिजाइन है कुछ में सभी पृष्ठों/संवाद pageinit और pageshow घटनाओं के लिए लाइव इवेंट में शामिल हैं कि हर पृष्ठ पर है:

   $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

2. मैं एक नाम के साथ प्रत्येक पृष्ठ का संदर्भ: <div data-role="page" data-mypage="employeelist"> इस लाइव इवेंट में आप मूल रूप से प्रत्येक पृष्ठ "नाम" के लिए एक स्विच बयान हो सकता है, और फिर pageinit/pageshow या दोनों के लिए event.type की जाँच करें और अपने कोड वहाँ तो हर बार शब्दों में कहें, एक पृष्ठ बनाया/दिखाया गया है कि यह ईवेंट निकाल दिया जाएगा, यह जानता है कि कौन सा पृष्ठ ट्रिगर हुआ है और फिर संबंधित कोड

3. कोई फर्क नहीं पड़ता कि उपयोगकर्ता आपकी साइट पर किस प्रविष्टि बिंदु पर उतरता है, सभी पृष्ठों के लिए सभी हैंडलर हैं लदा हुआ।जैसा कि आप पहले ही जानते हैं, जब आप किसी पृष्ठ पर नेविगेट करते हैं, तो यह केवल <script/> में div [data-role = "page"] में खींचता है - <head/> में किसी भी जेएस को अनदेखा कर रहा है, प्रत्येक पृष्ठ पर अलग जेएस रखना एक गड़बड़ है और होना चाहिए मुझे लगता है कि किसी भी बड़ी साइट से बचा है

4. अपने jQuery में कंबल चयनकर्ताओं का उपयोग न करने का प्रयास करें, उदाहरण के लिए $('div.myClass') क्योंकि यह आपके सभी डोम को खोजेगा जिसमें इसमें एक से अधिक जेक्यूएम पेज हो सकते हैं। सौभाग्य से उपरोक्त वर्णित पेजिनिट/पेजशो के लिए लाइव इवेंट हैंडलर में, this वर्तमान पृष्ठ को संदर्भित करता है। तो इसके भीतर सभी डोम खोज करें, उदा। $(this).find('div.myClass') यह सुनिश्चित करता है कि आप केवल वर्तमान पृष्ठ के भीतर तत्वों को पकड़ रहे हैं। (बेशक यह आईडी के लिए चिंता नहीं है)। pageshow घटना में नोट आप भी $.mobile.activePage उपयोग कर सकते हैं, लेकिन यह pageinit में उपलब्ध नहीं है, इसलिए मैं स्थिरता

मैं अंत में बहुत ज्यादा कोड था के लिए उसका उपयोग नहीं करते, तो मैं एक हैंडलर ऑब्जेक्ट बनाया गया है जहां प्रत्येक पृष्ठ के जेएस को एक अलग जेएस फ़ाइल में शामिल किया गया है और लाइव ईवेंट

के साथ हैंडलर पंजीकृत कर सकते हैं यह दोष यह है कि आपकी पूरी साइट के लिए आपकी सभी जेएस उपयोगकर्ता द्वारा पहुंचने वाले पहले पृष्ठ पर लोड की जाती है, लेकिन मिनीफाइड यहां तक ​​कि एक बड़ी साइट jQuery या जेक्यूएम से छोटी है, इसलिए यह चिंता नहीं होनी चाहिए। लेकिन यदि आपकी साइट वास्तव में बड़ी है तो मुझे लगता है कि आप RequJS को देख सकते हैं।

एक लाभ यह है कि जब भी उपयोगकर्ता किसी नए पृष्ठ पर नेविगेट करता है तो आप प्रत्येक पृष्ठ के लिए अपने सभी जेएस को AJAX के माध्यम से लोड नहीं कर रहे हैं। यदि आपका सभी जेएस एंट्री पर उपलब्ध है, तो अब आप डीबगर कथन डाल सकते हैं और अधिक आसानी से डीबग कर सकते हैं!

Answer 2

मुझे विश्वास है pageinit और pagecreate दोनों केवल एक बार बुलाए जाते हैं जब पेज को पहली बार प्रारंभ किया जाता है और डीओएम में बनाया जाता है।

आप pagechange घटना http://jquerymobile.com/test/docs/api/events.html

Answer 3

में देखना चाहते हो सकता है आप तो आप

$("#YourPageID").on('pagebeforeshow ', function() { 
     //YourFunctionCall(); 
    }); 

के साथ-साथ आप कोशिश कर सकते हैं का उपयोग कर सकते pagebeforeshow यानी एक पृष्ठ लोड करने से पहले कुछ काम हर बार कॉल करने के लिए चाहते हैं पृष्ठ आईडी के साथ अपने पेजिनिट को बाध्यकारी लेकिन पृष्ठ init को केवल DOM में अपना पृष्ठ डालने के दौरान बुलाया जाता है। http://jquerymobile.com/test/docs/api/events.html

$("#YourPageID").on('pageinit', function() { 
     //YourFunctionCall(); 
    }); 

Answer 4

आप jQuery मोबाइल घटना दस्तावेज़ीकरण का एक thourough पढ़ने की आवश्यकता होती है: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

ऊपर दिए गए लिंक जब घटनाओं आग में से प्रत्येक के लिए, यहाँ पेज से एक जोड़े को नमूने हैं बारे में कुछ बेहतरीन जानकारी देता है:

pageinit

पृष्ठ पर उत्प्रेरित मैं के बाद प्रारंभ किया जा रहा है प्रारंभिक होता है। हम डीओएम तैयार() के बजाय इस घटना के लिए बाध्यकारी अनुशंसा करते हैं क्योंकि यह इस पर ध्यान दिए बिना काम करेगा कि पृष्ठ सीधे लोड हो गया है या सामग्री को अजाक्स नेविगेशन सिस्टम के हिस्से के रूप में किसी अन्य पृष्ठ में खींचा गया है।

।

pageshow

संक्रमण एनीमेशन के बाद "toPage" पूरा कर लिया है पर उत्प्रेरित। इस घटना के लिए कॉलबैक डेटा ऑब्जेक्ट को उनके दूसरे तर्क के रूप में प्राप्त करेंगे। prevPage (वस्तु) एक jQuery संग्रह उद्देश्य यह है कि पेज DOM एलीमेंट हम सिर्फ से दूर तरीके से संक्रमित होते हैं: यह डेटा वस्तु उस पर निम्नलिखित गुण है। ध्यान दें कि संग्रह खाली है जब पहला पृष्ठ एप्लिकेशन स्टार्टअप के दौरान परिवर्तित होता है।

वास्तव में अपने प्रश्न का उत्तर देने के लिए, pageinit का उपयोग न करें, pageshow का उपयोग करें। एक पृष्ठ के प्रारंभिक दिखाने पर pageshow आग (बस के बाद pageinit घटना तत्व पर निकाल दिया जाता है), लेकिन यह भी पृष्ठ पर अगली विज़िट में।

Answer 5

चेक इस कोड:

$(document).delegate("#pageid", "pageinit", function() { 
    console.log('PAGEINIT');  
}); 

Answer 6

निम्नलिखित ठीक काम करता है

<div data-role="page" id="signupForm"> 
    ... 
    ... 
<script type="text/javascript" src="test.js"></script> 
</div> 

test.js निम्नलिखित कोड

// test.js starts here 

$('#signupForm').on('pageinit', function(){ 
    // your code goes here 
    ... 
    ... 

}); 
// test.js ends here 

अपना लॉगिन रूप में हो सकती है, आप हो सकता है साइनअप के लिए लिंकफॉर्म और डेटा-AJAX = "false" href टैग में शामिल किया जाना चाहिए जो साइनअपफॉर्म से लिंक है।

मुबारक कोडिंग

Kuppuram

Answer 7

यदि यह इस पृष्ठ पर एक ajax अनुरोध है, स्क्रिप्ट शरीर में लिखा जाना चाहिए वरना यह ajax के लिए बिल्कुल भी काम doen't।

<!DOCTYPE html> 
<html> 
    <head> 
.......... 
    </head> 
    <body> 
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e"> 
........... 
    </div> 
    <script type="text/javascript" language="javascript" > 
    $('#self_edit_page').bind("pagebeforeshow",function(event) 
....... 
    </script> 
    </div> 
    </body> 
</html>