सरल jQuery AJAX उदाहरण एचटीएमएल

में तत्वों को नहीं ढूंढ रहा है मैं jQuery के AJAX कार्यों को सीखने की कोशिश कर रहा हूं। मुझे यह काम मिल गया है, लेकिन jQuery को लौटे HTML DOM में तत्व नहीं मिलते हैं।सरल jQuery AJAX उदाहरण एचटीएमएल

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>load this</title> 

</head> 
<body> 
    <div id="wrapper"> 
    test 
    </div> 
</body> 
</html>

यह दो अलर्ट देता है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>runthis</title> 

    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script> 

    <script tyle="text/javascript"> 
    $(document).ready(function(){ 
     $('input').click(function(){ 
      $.ajax({ 
       type : "GET", 
       url : 'ajaxtest-load.html', 
       dataType : "html", 
       success: function(data) { 

       alert(data); // shows whole dom 

       alert($(data).find('#wrapper').html()); // returns null 

       }, 
       error : function() { 
        alert("Sorry, The requested property could not be found."); 
       } 
      }); 
     }); 
    }); 
    </script 

</head> 
<body> 
    <input type="button" value="load" /> 
</body> 
</html>

कौन सा "ajaxtest-load.html" इस पृष्ठ को लोड करता है: jQuery के रूप में एक ही फ़ोल्डर में, इस पेज को चलाते हैं। एक दिखा रहा है कि डोम लोड किया गया था, लेकिन दूसरे #Wrapper के बजाय NULL दिखाता है। मैं क्या गलत कर रहा हूं?

संपादित करें: मैं "AJAXtest-load.html" लोड कर रहा हूं जिसमें पूरे शीर्षलेख शामिल हैं, जिसमें jquery दोबारा शामिल है। क्या यह मुद्दा है? $.load documentation से

$('#testDiv').load('ajaxtest-load.html #wrapper', function(resp) { 
    alert(resp); 
});

स्रोत

2009-06-23 user110218

शायद शीर्ष कोड को साफ़ करें और 'ajaxtest-load.html' पर HTML जैसा दिखता है पोस्ट करें – ScottE

दूसरा HTML ब्लॉक ajaxtest-load.html है। विवरण संपादित किया गया। उसके लिए माफ़ करना। – user110218

मैंने .load() का उपयोग कर पूर्ण HTML-दस्तावेज़ों से स्निपेट लोड करने में कामयाब रहा है।

$('<div></div>').appendTo('body').load('some-other-document.html div#contents');

यह आप के लिए काम नहीं कर रहा है, तो सुनिश्चित करें कि आप नवीनतम संस्करण का उपयोग कर रहे हैं (या पोस्ट 1.2) jQuery के:

डोम में निकाले एचटीएमएल के साथ एक नया ब्लॉक बनाने के लिए मैं यह कर । अधिक उदाहरणों के लिए documentation for .load देखें।

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

नोट, हालांकि, कि ऊपर के उदाहरण के साथ परिणाम होगा:

<div><div id="contents">...</div></div>

सिर्फ अन्य दस्तावेज़ में #contents div की सामग्री को पाने के लिए, एक callback- का उपयोग लोड-फ़ंक्शन कॉल में फ़ंक्शन करें।

$('<div></div>').load('some-other-document.html div#contents', null, 
    function (responseText, textStatus, XMLHttpRequest) { 
     if (textStatus == success) { 
      $('<div></div>').appendTo('body').html($(this).html()); 
     } 
    } 
);

स्रोत

2009-06-23 17:14:40

मुझे यह पसंद है क्योंकि यह तुरंत लौटाए गए डेटा को दस्तावेज़ में चिपकाने से बचाता है। एफवाईआई, अगर आपको डमी डिवी बनाने और लौटाए गए डेटा को डालने में कोई फर्क नहीं पड़ता है, तो आप इसे '$ .get() 'के अंदर कर सकते हैं। यह अनिवार्य रूप से '.load()' हुड के नीचे होता है। –

धन्यवाद, यह मेरी परियोजना के लिए आवश्यक एकदम सही समाधान है। मेरे AJAX कॉल में मुझे उपयोगकर्ता द्वारा अनुरोधित डेटा प्राप्त होता है (या तो टूलटिप, पृष्ठ सामग्री या कुछ और) और उपयोगकर्ता के विजेट को अपडेट करने के लिए हमेशा एक जेसन ऑब्जेक्ट के साथ होना आवश्यक है ... अनुरोधित जानकारी और जेसन को विभाजित करना ऑब्जेक्ट को 2 div भेजकर निष्पादित किया गया है और आपकी तकनीक मुझे करने की अनुमति देती है। आवश्यक डेटा वापस करने के लिए()। धन्यवाद फिर से – Salketer

क्यों इस कोशिश मत और देखो क्या होता

jQuery 1.2 में आप अब URL में एक jQuery चयनकर्ता निर्दिष्ट कर सकते हैं। ऐसा करने से आने वाले HTML दस्तावेज़ को फ़िल्टर करेगा, केवल तत्वों को इंजेक्ट करेगा जो चयनकर्ता से मेल खाते हैं।

स्रोत

2009-06-23 16:00:37 karim79

धन्यवाद, लेकिन यह चल रहा है, फायरबग ने दिखाया कि त्रुटि '$ .load' एक फ़ंक्शन नहीं है। – user110218

आप केवल $ .load का उपयोग नहीं कर सकते हैं। आपको इसे $ (selector) जैसे चयनकर्ता पर उपयोग करना होगा .load() –

@ टी बी - हाँ, मुझे नहीं पता कि मैं क्या सोच रहा था। @threebttn इसके बारे में क्षमा करें, एक div भरने के लिए इसका उपयोग करने का प्रयास करें। मेरा संपादन देखें। – karim79

मैंने पाया कि अगर ajaxtest-load.html < एचटीएमएल> या < शरीर> टैग लेकिन कुछ ही एचटीएमएल तत्वों, नहीं है यह काम करता है।

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

यदि इनपुट एक पूर्ण HTML पृष्ठ हो गया है, हो सकता है आप टैग के पहले पट्टी आप नहीं स्ट्रिंग आपरेशन .. किसी के साथ चाहते हैं कर सकते हैं?

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

थोड़ा याद जावास्क्रिप्ट/डोम "अस्थायी दस्तावेजों" जो आप पर काम करते हैं और से परिणाम इस्तेमाल कर सकते हैं के लिए अनुमति दी है, तो googling के एक बिट एक parseHTML समारोह (http://www.daniweb.com/forums/post874892-2.html) जो मैं अनुकूल नहीं बनाया है झुकेंगे सही बिट वापस करने के लिए:

$(document).ready(function(){ 
    $('input').click(function(){ 
    $.ajax({ 
     type : "POST", 
     url : 'ajaxtest-load.html', 
     dataType : "html", 
     success: function(data) { 
     alert(data); // shows whole dom 
     var gotcha = parseHTML(data, 'wrapper'); 
     if (gotcha) { 
      alert($(gotcha).html()); 
     }else{ 
      alert('ID not found.'); 
     } 
     }, 
     error : function() { 
     alert("Sorry, The requested property could not be found."); 
     } 
    }); 
    }); 
}); 

function parseHTML(html, idStr) { 
    var root = document.createElement("div"); 
    root.innerHTML = html; 
    // Get all child nodes of root div 
    var allChilds = root.childNodes; 
    for (var i = 0; i < allChilds.length; i++) { 
    if (allChilds[i].id && allChilds[i].id == idStr) { 
     return allChilds[i]; 
    } 
    } 
    return false; 
}

क्या यह काम करता है?

स्रोत

2009-06-23 16:37:26 MSpreij

ओह, शायद एक रेगेक्स शरीर या कुछ बाहर पट्टी? और फिर उस ऑब्जेक्ट में कनवर्ट करने के लिए jQuery का उपयोग करें जो मैं कर सकता हूं। ढूँढें() चालू है? – user110218

ऐसा कुछ, हाँ। मैंने एक उदाहरण दिया होगा लेकिन मेरा जेएस रेगेक्स शानदार नहीं है, और मैं रेगेक्स उदाहरण देने से दोगुना हूं, जब मुझे बहुत कम पता है कि सामग्री में क्या हो सकता है :-) (जैसे, शरीर एक '>' युक्त गुण हैं) लेकिन कोशिश करने के लिए तैयार .. – MSpreij

यह प्रत्यक्ष उत्तर नहीं है, लेकिन चीजों को स्पष्ट करने में मदद कर सकता है।

सामग्री है कि वास्तविक दस्तावेज़ के पहले आता है:

कॉलबैक फ़ंक्शन का डेटा पैरामीटर एक jQuery (1.6.2) वस्तु $ (डेटा) है, जो HTML उत्तर के विभिन्न भागों में शामिल है में बनाया जा सकता है , जैसे एक डॉक्टरेट घोषणा, या अनजान सफेद अंतरिक्ष textnodes।
मुख्य तत्व की सामग्री।
शरीर तत्व की सामग्री।

एचटीएमएल, सिर और शरीर तत्व डेटा ऑब्जेक्ट में नहीं हैं। चूंकि सिर और शरीर में निहित तत्वों की संख्या भिन्न हो सकती है, इसलिए आपको उन्हें $ (डेटा) [2] जैसे अनुक्रमणित नहीं करना चाहिए। इसके बजाय, इस तरह, इस वस्तु पर फ़िल्टर लागू:

 $.get(
      uri, 
      function(data, textStatus, jqXHR){ 
      var $doc = $(data); 
      var title = $doc.filter('title').text(); 
      // title is the title from the head element. 
      // Do whatever you need to do here. 
      } 
     );

सही तत्वों को छानने के बाद आप उस चयनकर्ताओं खोज का उपयोग कर आवेदन कर सकते हैं()।

दुर्भाग्यवश, आईई में मुख्य तत्व $ (डेटा) का हिस्सा नहीं हैं। मुझे नहीं पता कि यह क्यों है।

स्रोत

2012-03-07 10:15:03 rakensi

+1 क्योंकि यह नवीनतम '.ajax()' कार्यान्वयन के साथ भी काम करता है। मैंने अभी बदल दिया '.find() 'to' .filter()' और यह सब काम किया! –

मैंने यह पता लगाने की कोशिश करने में घंटों बिताए कि यह एक विशिष्ट तत्व क्यों नहीं मिलेगा, लेकिन इसमें सभी तत्व पाए गए। '.find() 'से' .filter()' को स्विच करना इसे काम करता है। आपको बहुत - बहुत धन्यवाद! इसके अलावा, मैं चेहरे में एक बच्चा पंच करना चाहता हूँ। मजाक भी नहीं, यह मैं कितना पागल हूँ। – qwerty

सरल jQuery AJAX उदाहरण एचटीएमएल

उत्तर

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