2010-11-02 13 views
27

मुझे अपने पृष्ठ में एक div की सामग्री को एजेक्स कॉल से HTML परिणाम के साथ प्रतिस्थापित करने की आवश्यकता है। समस्या यह है कि एचटीएमएल में इसमें कुछ आवश्यक स्क्रिप्ट हैं और ऐसा लगता है कि jquery html() फ़ंक्शन उन्हें बाहर निकाल देता है, मुझे प्रतिक्रिया फ़िल्टर करने की आवश्यकता है और केवल एक विशिष्ट div प्राप्त करें।jquery html() स्क्रिप्ट टैग स्ट्रिप्स टैग

मैं एजेक्स प्रतिक्रिया से सभी स्क्रिप्ट टैग निकालने के लिए एक कामकाज पर सोच रहा हूं और फिर उन्हें डीओएम करना चाहता हूं लेकिन मुझे ऐसा करने में परेशानी हो रही है।

मेरा कोड यहां है;

$('a.link-vote').live('click',function(){ 
     var idfeedback = $(this).attr('id').split('-')[1]; 
     var href = $(this).attr('href'); 
     $('.feedback-' + idfeedback + '-loader').show(); 
     $.ajax({ 
      type: "POST", 
      url: href, 
      success: function(response){ 
       var x = $(response).find('#feedback-'+ idfeedback).html(); 
       $('.feedback-' + idfeedback + '-loader').hide(); 
       $('#feedback-'+ idfeedback).html(x); 

      } 
     }); 
     return false; 
    }); 

मैं इस पुराने विषय पाया: jQuery - script tags in the HTML are parsed out by jQuery and not executed

लेकिन किसी निष्कर्ष है। मैंने वहां सुझाए गए समाधानों की कोशिश की लेकिन उनमें से कोई भी काम नहीं करता।

संपादित करें: मुझे लगता है कि पुराने विषय के आधार पर एक कामकाज मिल गया है लेकिन यह सुंदर नहीं है;

var dom = $(response); 
       // var x = $(response).find('#feedback-'+ idfeedback).html(); 
       $('.feedback-' + idfeedback + '-loader').hide(); 
       //$('#feedback-'+ idfeedback).html(x); 

       $('#feedback-'+ idfeedback).html(dom.find('#feedback-'+ idfeedback).html()); 

       dom.filter('script').each(function(){ 
        var obj = $(this); 
        $('#feedback-'+ idfeedback + ' .feedback-comments').append(obj); 
       }); 

एक आसान तरीका होना चाहिए।

उत्तर

25

संपादित करें: मैं थक गया हूं और सोच नहीं रहा हूं। तुम सिर्फ देशी innerHTML बजाय विधि .html() उपयोग कर सकते हैं:

$('#feedback-' + idfeedback)[0].innerHTML = x; 

मूल जवाब:

मेरे कूबड़ है कि इस सवाल का जवाब आप लिंक आप के लिए काम नहीं करता है क्योंकि शामिल स्क्रिप्ट के साथ कहा जाता है <script> और </script> टैग के बीच स्क्रिप्ट सामग्री के बजाय विशेषता। यह काम कर सकता है:

$.ajax({ 
    url: 'example.html', 
    type: 'GET', 
    success: function(data) { 

     var dom = $(data); 

     dom.filter('script').each(function(){ 
      if(this.src) { 
       var script = document.createElement('script'), i, attrName, attrValue, attrs = this.attributes; 
       for(i = 0; i < attrs.length; i++) { 
        attrName = attrs[i].name; 
        attrValue = attrs[i].value; 
        script[attrName] = attrValue; 
       } 
       document.body.appendChild(script); 
      } else { 
       $.globalEval(this.text || this.textContent || this.innerHTML || ''); 
      } 
     }); 

     $('#mydiv').html(dom.find('#something').html()); 

    } 
}); 

नोट, यह किसी भी चीज़ के लिए परीक्षण नहीं किया गया है और बच्चों को खा सकता है।

+13

बच्चों को खाओ, हाहाहा! –

+1

'.innerHTML 'ठीक काम कर रहा है लेकिन नई सामग्री के अंदर स्क्रिप्ट निष्पादित नहीं होती है ... कोई विचार? – agpt

+0

@ एमान, कृपया आप जो करने की कोशिश कर रहे हैं, जो आपने कोशिश की है, और यह कैसे असफल रहा है, के स्पष्टीकरण के साथ एक प्रश्न पोस्ट करें। – eyelidlessness

-2

$('#feedback-'+ idfeedback).empty().append(response); 

प्रयास करें मैं परीक्षण नहीं किया था। सुनिश्चित नहीं है कि .html() वास्तव में <script> स्ट्रिप्स करता है लेकिन इसे आज़माएं।

+1

आईटी इस तरह से काम करता है लेकिन मुझे डोम में जोड़ने से पहले प्रतिक्रिया को फ़िल्टर करने की आवश्यकता है। मैंने इस var x = $ (प्रतिक्रिया) .find ('# फीडबैक -' + idfeedback) की कोशिश की; $ ('# फीडबैक -' + idfeedback) .empty()। संलग्न (x); लेकिन तब स्क्रिप्ट फिर से छीन ली जाती हैं – brpaz

-8

क्या आप मुझे परिणाम HTML संरचना दिखा सकते हैं?

अद्यतन 2010/11/03

आप नियमित अभिव्यक्ति के साथ .html() परिणाम से <script> टैग समाप्त कर सकते हैं।
इस लाइन के बाद, आपके पहले कोड से।

var x = $(response).find('#feedback-'+ idfeedback).html(); 

आप ऐसा कुछ कर सकते हैं।

x = x.replace(/\n/g, '{n}') 
.replace(/<script.*?<\/script>/g, '') 
.replace(/{n}/g, '\n'); 
+1

यह एक उत्तर कैसे है? –

+0

प्रतिक्रिया सभी स्क्रिप्ट के साथ सही ढंग से दिखाई देती है। लेकिन स्क्रिप्ट टैग स्ट्रिप्स में उसके बाद मैं जो भी फ़िल्टर लागू करता हूं। – brpaz

+0

मैं ऊपर अपना समाधान अपडेट करता हूं। – diewland

2

मुझे एक ही समस्या थी, लेकिन अधिक मुद्दों के साथ जो मैं आसानी से इसे ठीक नहीं कर सका। लेकिन मुझे एक समाधान मिला:

यह मेरा छद्म स्रोत (एचटीएमएल) है कि मैं किसी भी तरह से परिवर्तित नहीं कर सका।

<html> 
    <body> 
    <div id="identifier1"> 
     <script>foo(123)</script> 
    </div> 
    <div id="identifier2"> 
     <script>bar(456)</script> 
    </div> 
    </body> 
</html> 

मैंने इस HTML पृष्ठ को लाने के लिए $.get() का उपयोग किया। अब मेरे पास एक स्ट्रिंग के रूप में कोड है, अब यह jQuery के साथ खोज करने का समय है। मेरा उद्देश्य <script> -Tag के अंदर जावास्क्रिप्ट-कोड को अलग करना था, जो DIV identifier2 से संबंधित है, लेकिन identifier1 पर नहीं है। तो मैं परिणाम स्ट्रिंग के रूप में bar(456) प्राप्त करना चाहता था। कारण के कारण, jQuery स्ट्रिप्स कि सभी स्क्रिप्ट टैग, आप कर सकते हैं इस तरह खोज नहीं अब:

var dom = $(data); //data is the $.get() - Response as a string 
var js = dom.filter('div#identifier2 script').html(); 

समाधान एक सरल समाधान नहीं है। शुरुआत में हम <sometag> की तरह कुछ के साथ सभी <script> -Tags बदल देगा:

var code = data.replace(/(<script)(.*?)(<\/script>)/gi, '<sometag$2</sometag>'); 
var dom = $(code); 
var result = dom.find('div#identifier2 sometag').html(); 

//result = bar(456) 

यह एक सरल हैक है, लेकिन यह काम करता है!

+2

मैं इस हैक को तुच्छ जानता हूं लेकिन यह काम करता है इसलिए मैंने इसे वोट दिया। एचटीएमएल कभी-कभी आपको ऐसी चीजें करने के लिए मजबूर करता है। – usr

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