jQuery मोबाइल 1.4.5 - गतिशील रूप से बनाए गए पृष्ठ पर नेविगेट करने में त्रुटि

मैं कुछ घंटे के लिए दीवार के खिलाफ अपना सिर मार रहा हूं, और अभी भी इसे काम करने के लिए प्रतीत नहीं होता है।jQuery मोबाइल 1.4.5 - गतिशील रूप से बनाए गए पृष्ठ पर नेविगेट करने में त्रुटि

मैं, एक वेब अनुप्रयोग बना रही हूँ एक बहु पृष्ठ टेम्पलेट का उपयोग (मेरी index.html में एकाधिक पृष्ठ होने

उद्देश्य:।। गतिशील रूप से एक नया पृष्ठ बनाने, और फिर स्क्रीन पर इस पेज को दिखाने

समस्या: पेज बनाने, और इस पेज मैं निम्न त्रुटि प्राप्त करने के लिए बदलने के लिए कोशिश कर के बाद: jquery.mobile-1.4.5.js:1850:8

में Error: Syntax error, unrecognized expression: :nth-child प्रासंगिक कोड के नीचे पाया जा सकता है :

जावास्क्रिप्ट

// Add the page to the DOM     
$.mobile.pageContainer.append(page); 

// Change the page 
$.mobile.pageContainer.pagecontainer('change', $('#' + pageId));

एचटीएमएल

पेज बनाया गया है और <body> को जोड़ा गया है, इसलिए मैं एचटीएमएल हिस्सा छोड़ देगा।

मुझे लगता है कि पृष्ठ पेजकेंटेनर में पंजीकृत नहीं हो सकता है, जो एक त्रुटि देता है? मैंने देखा है, लेकिन एक पेज कंटेनर रीफ्रेश विधि प्रतीत नहीं होता है।

इसे ठीक करने के तरीके पर कोई विचार?

संपादित करें 1:

अन्य पृष्ठ पर नेविगेट करने के लिए, उदाहरण के लिए होमपेज पर बस ठीक काम करता है उल्लेख किया कोड का उपयोग करना। काम करने वाला एकमात्र पृष्ठ नव निर्मित पृष्ठ है।

संपादित करें 2:

ऐसा लगता पेज मैं बना त्रुटि पैदा करता है। कोड पर नेविगेट करने के लिए इस्तेमाल किया गया कोड ठीक से काम करता था।

कोड मैं पेज बनाने के लिए उपयोग:

var page = $('<div/>', { 
     id: pageId, 
     'data-role': 'page', 
     'data-dom-cache': 'false', 
    }); 
var content = $('<div/>', { 
     'data-role': 'content', 
    }); 
var courseTabs = $('<div/>', { 
     'data-role': 'tabs', 
    }); 
var courseNavbar = $('<div/>', { 
     'data-role': 'navbar', 
    }).append($('<ul/>')); 
var courseBtn = $('<a/>', { 
     href: '#', 
     class: 'ui-btn', 
     text: 'testbutton', 
    }); 

// Glue the page parts together in the page. 
courseTabs.append(courseNavbar); 
content.append(courseTabs).append(courseBtn); 
page.append(content); 

// Add the page to the DOM 
$.mobile.pageContainer.append(page); 

// Navigate to the page 
$.mobile.pageContainer.pagecontainer("change", page, { 
    transition: "flip" 
});

कोड से ऊपर त्रुटि पैदा करता है।

स्रोत

2017-07-06 JiFus

आप की कोशिश की '.pagecontainer है (" परिवर्तन ", पृष्ठ) ; क्या आप jQuery 3.x का उपयोग कर रहे हैं? क्या आप गतिशील पृष्ठ का एक उदाहरण जोड़ सकते हैं? – Omar

@ ओमार नोट करें कि पेजकैंटेनर फ़ंक्शन वेबपैप की शुरुआत के बाद पहले से मौजूद हर दूसरे पृष्ठ के लिए काम करता है। मैं जिस jQuery का उपयोग कर रहा हूं वह jQuery मोबाइल के डाउनलोड पैकेज में शामिल है। यह इस तरह पाया जा सकता है: 'jquerymobile.com> नवीनतम डाउनलोड> फ़ाइलों को निकालें '। इसके बाद निकाले गए मानचित्र में: 'jquery.mobile-1.4.5> डेमो> जेएस> jquery.mobile-1.4.5.js'। हालांकि मैंने फ़ाइल का नाम बदल दिया था ('jquery.js' पर)। – JiFus

आपके सूचकांक के अंदर कितने पेज हैं? क्या आप इंडेक्स फ़ाइल के अलावा अन्य फाइलों पर जा रहे हैं? – Omar

मेरा मानना है कि इस मुद्दे को स्पष्ट किया जाना चाहिए:

यह एक jQuery त्रुटि नहीं है, यह एक jQuery मोबाइल त्रुटि है। प्रश्न में पोस्ट किया गया त्रुटि संदेश गलत है, क्योंकि jquery.mobile.js लाइब्रेरी का नाम बदलकर jquery.js कर दिया गया है।

मानक jquery.mobile-1.4.5.min.js त्रुटि संदेश का उपयोग करके है:

Uncaught Error: Syntax error, unrecognized expression: :nth-child at jquery.mobile-1.4.5.min.js:3

लेकिन बारे में पता होना, लाइन नंबर अगर एक कस्टम डाउनलोड प्रयोग किया जाता है या डिबग संस्करण प्रयोग किया जाता है, तो भिन्न हो सकते हैं।
प्रभावित विजेट: क्योंकि यह भी एक स्थैतिक पृष्ठ में उठता Navbar

यह त्रुटि, गतिशील पेज निर्माण के साथ क्या करना कम है। यह आसानी से मार्कअप निम्नलिखित के साथ परीक्षण किया जा सकता है:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
    <div data-role="navbar"> 
     <ul> 
     <!-- no <li> here --> 
     </ul> 
    </div> 
    <div data-role="content"> 
    </div> 
    </div> 
</body> 
</html>

समाधान: कम से कम एक <li> नेवबार <ul> अंदर होगा।

इस सवाल कई upvotes प्राप्त हुआ है, क्योंकि यहां JQM साथ एक HTML टुकड़ा के गतिशील निर्माण के बारे में मेरी दो सेंट हैं:

डिजाइन और एक का उपयोग करके अंतिम जिसके परिणामस्वरूप HTML स्निपेट का परीक्षण JQM स्थिर पृष्ठ, Plunker में।
यदि स्थिर टेम्पलेट काम करता है, तो HTML टुकड़े एक साथ रखें। मैं एक साधारण पाठ संगतता का उपयोग करना चाहता हूं, लेकिन यह व्यक्तिगत प्रोग्रामिंग शैली और वरीयता के है (इसे गंभीरता से न लें) - कम से कम, यदि आप एक बड़े टेम्पलेट से निपट रहे हैं, तो टैग घोंसला तुरंत स्पष्ट है।
```
var html = [ 
    '<div data-role="navbar">', 
     '<ul>', 
      '<li><a href="'+link1+'" class="ui-btn-active">'+text1+'</a></li>', 
      '<li><a href="'+link2+'">'+text2+'</a></li>', 
     '</ul>', 
    '</div>' 
].join(""); 
```
अंत में, का उपयोग append() बस केवल एक बार।

यदि कोई दिलचस्पी है, तो HTML टेम्पलेट/खंड निर्माण के लिए विभिन्न विधियों के प्रदर्शन के बारे में कुछ प्रतिक्रिया सुनना अच्छा लगेगा।

एक नोट एक तरफ:

सवाल इस पोस्ट के शीर्षक में निहित पहले से ही Omar लंबे समय पहले से जवाब दिया गया है: jquery mobile Dynamically Injecting Pages

स्रोत

2017-07-16 07:46:03 deblocker

आपके उत्तर के लिए धन्यवाद! मैंने स्पष्टता के लिए प्रश्न शीर्षक + jquery मोबाइल फ़ाइल को अपडेट किया – JiFus

jQuery मोबाइल 1.4.5 - गतिशील रूप से बनाए गए पृष्ठ पर नेविगेट करने में त्रुटि

उत्तर

संबंधित मुद्दे