2010-12-13 12 views
16

मैं पृष्ठ ए पर हूं। एक लिंक क्लिक किया गया है, और मैं jQuery के माध्यम से डीओएम में लोड कर रहा हूं पृष्ठ बी से प्राप्त होता है। पृष्ठ बी के डोम के अंदर कई गतिशील रूप से जेनरेट किए गए हैं स्क्रिप्ट टैग "डेटास्क्रिप्ट" के साथ अन्य स्क्रिप्ट टैग्स के समूह के साथ जो मैं कुछ भी नहीं करना चाहता हूं।एक jQuery AJAX से स्क्रिप्ट टैग का चयन करने का प्रयास करने के लिए प्रतिक्रिया

एकमात्र चीज जो मैं उस डोम से चाहता हूं वह हैं .डेटास्क्रिप्ट टैग, जिसे मैं पृष्ठ ए के डीओएम में "स्क्रिप्टऑटपुट" की एक आईडी के साथ एक div में डालना चाहता हूं। यह तत्व काम नहीं करेगा अगर तत्व "डेटास्क्रिप्ट" की श्रेणी एक स्क्रिप्ट टैग है। केवल अगर यह कुछ अन्य टैग है, जैसे "div" टैग।

पृष्ठ A::

<html> 
<head> 
<title>Page A</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(function() { 
$("#ajaxJsLink").click(function() { 
    $.get("pageB.html", function(data) { 
    var scriptElements = $(data).find(".dataScript").contents(); 
    console.log(scriptElements); 
    $(scriptElements).each(function(index) { 
    $("#scriptOutput").append($(this).html()); 
    }); 
    }); 
    return false; 
}); 
$("#ajaxDivsLink").click(function() { 
    $.get("pageB.html", function(data) { 
    var scriptElements = $(data).find(".dataDiv").contents(); 
    console.log(scriptElements); 
    $(scriptElements).each(function(index) { 
    $("#divOutput").append($(this).html()); 
    }); 
    }); 
    return false; 
}); 
}); 
</script> 
</head> 
<body> 
<p>This is page A.</p> 
<hr /> 
<p> 
<a href="pageB.html" id="ajaxJsLink">Get JavaScript from Page B.</a><br /> 
<a href="pageB.html" id="ajaxDivsLink">Get Divs from Page B.</a> 
</p> 
<hr /> 
<div id="scriptOutput"> 
<h2>Script Output</h2> 
</div> 
<div id="divOutput"> 
<h2>Div Output</h2> 
</div> 
</body> 
</html> 

पृष्ठ B: यहाँ मैं क्या कर रहा हूँ का एक उदाहरण है

<html> 
<head> 
<title>Page B</title> 
</head> 
<body> 
<p>This is page B.</p> 
<div id="scripts"> 
<script type="text/javascript" class="dataScript"> 
    function someFunction() { 
    alert("I am"); 
    } 
</script> 
<script type="text/javascript" class="dataScript"> 
    function anotherFunction() { 
    alert("Javascript"); 
    } 
</script> 
</div> 
<div id="divs"> 
<div class="dataDiv"> 
    <div> 
    function someFunction() { 
    alert("I am"); 
    } 
    </div> 
</div> 
<div class="dataDiv"> 
    <div> 
    function anotherFunction() { 
    alert("Html"); 
    } 
    </div> 
</div> 
</div> 
</body> 
</html> 

मैं .contents() जोड़कर की कोशिश की है, .html() , और .text() .डेटास्क्रिप्ट सामग्री के लिए, लेकिन कुछ भी काम नहीं करता है। मेरे प्रश्नों को देखने/जवाब देने में आपके विचार के लिए धन्यवाद। तुम्हारी सहायता सराहनीय है!


अद्यतन:

किसी और मामले किसी में यह करने के लिए कोशिश कर रहा है, यहाँ से कम सुरुचिपूर्ण लेकिन प्रकार से कार्य करने समाधान मैं के साथ समाप्त हो गया है:

आउटपुट जावास्क्रिप्ट के रूप में नियमित पाठ (कोई स्क्रिप्ट टैग) एक div के अंदर (आईडी के साथ और प्रदर्शन करने के लिए सेट: कोई नहीं):

var docHead = document.getElementsByTagName("head")[0]; //head of Page A 
var newScript = document.createElement("script"); 
newScript.setAttribute("type","text/javascript"); 
newScript.innerHTML = jQuery(data).find("#divWithPlainTextJs").text(); //insert plain text JS into script element 
docHead.appendChild(newScript); //append script element to head of Page A 
jQuery("#divWithPlainTextJs").remove(); //remove the plain text div and JS from the DOM 
पर पृष्ठ बी फिर पर पृष्ठ A को प्राप्त अनुरोध के कॉलबैक फ़ंक्शन के अंदर निम्न कार्य करें 0

दस्तावेज़ के बारे में मुझे याद दिलाने के लिए Emmett के लिए धन्यवाद .createElement विधि।

+1

ऐसा इसलिए हो सकता है क्योंकि 'कक्षा' '

0

आप इस तरह AJAX के परिणाम लोड हैं:

function (data) { 
// the result is loaded in the variable 'data' 
} 

और फिर इस तरह एक div में धक्का:

function (data) { 
$("#someDiv").text(data); 
} 

पूरे एचटीएमएल टैग सहित पेज ताकि आप पाठ के रूप में रखा जाएगा टैग देख सकते हैं। आप केवल अपनी इच्छित स्क्रिप्ट प्राप्त करने के लिए पृष्ठ को ट्रिम कर सकते हैं, लेकिन खुद से पूछें कि ऐसा करने के लिए चालाक है।

बात ... अगर आप सिर्फ स्क्रिप्ट एक बाहरी .js फ़ाइल के रूप में आप पाठ के रूप में ajax में लोड कर सकता है :)

+0

मुझे पता है कि मैं सबकुछ एक div में डंप कर सकता हूं, लेकिन पेज को ट्रिम करने के लिए केवल वही स्क्रिप्ट प्राप्त करना चाहता हूं जो वास्तव में मेरे प्रश्न का क्रूक्स है। मुझे टैग प्राप्त करने के लिए jQuery चयनकर्ताओं का उपयोग करने की आवश्यकता है, लेकिन मुझे नहीं पता कि दस्तावेज़ को किस प्रकार से चुनना है। साथ ही, जैसा कि मैंने उपर्युक्त कहा है, मैं जेएस को बाहरी फाइल में नहीं डाल सकता क्योंकि यह आपके द्वारा किस पेज पर है, इसके आधार पर गतिशील रूप से जेनरेट किया जा रहा है। – esvendsen

+0

यदि यह गतिशील रूप से जेनरेट किया गया है, तो बस एक var में गतिशील रूप से जेनरेट किया गया कोड आउटपुट करें jQuery में भी और आप इसे वैसे भी आउटपुट कर सकते हैं :) –

3

मुख्य मुद्दे हैं ... <script> तत्वों की उम्मीद <div id='scripts'> के बच्चों होना करने के लिए, और .filter() के बजाय .find() का उपयोग कर।

का उपयोग करते समय jQuery के $.get() और $.ajax(), लौटे data एक पाठ स्ट्रिंग है। जब आप एक jQuery wrapper में data डालते हैं, $data = $(data), इसे एक सरणी में परिवर्तित किया जाता है: [p, div#scripts, div#divs, div#dataDiv, <script.dataScript>, <script.dataScript>]। क्या आपने देखा है कि <script> तत्व अब <div id='scripts'> के बच्चे हैं लेकिन मूल पर? jQuery ने उद्देश्य पर ऐसा किया।

$dataScripts = $data.filter('script.dataScripts') हमें एक संग्रह हम अभी की तरह के माध्यम से पुनरावृति कर सकते हैं दे देंगे:

$dataScripts.each(function(i) { 
    $('#scriptOutput').append($(this)); 
}); 

यह $dataScripts में स्क्रिप्ट का मूल्यांकन करेंगे, उन्हें @Emmett उल्लेख की तरह डोम में सम्मिलित नहीं।

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