2010-11-02 6 views
27

Мне нужно заменить содержимое div на моей странице html-результирующим результатом вызова ajax. Проблема заключается в том, что в html есть некоторые необходимые скрипты, и кажется, что функция jquery html() выделяет их, Мне нужно отфильтровать ответ и получить только определенный div.jquery html() удаляет теги скриптов

Я думаю об обходном пути, который должен извлечь все теги сценария из ответа ajax, а затем добавить их в DOM, но у меня возникли проблемы с этим.

Это мой код;

$('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

но любое заключение. Я попробовал предлагаемые решения, но никто из них не работает.

EDIT: Кажется, я нашел обходное решение, основанное на этой старой теме, но это не красиво;

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; 

Оригинальный ответ:

Подозреваю, что ответ вы связаны не работает для вас, потому что включенные скрипты вызываются с атрибут src, а не скриптовый контент между тегами <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

@Aman, пожалуйста, задайте вопрос с объяснением того, что вы пытаетесь сделать, что вы пробовали и как он терпит неудачу. – eyelidlessness

-2

Попробуйте

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

я не проверял. Не уверен, что .html() действительно прокладывает <script>, но попробуйте.

+1

iT работает так, но мне нужно отфильтровать ответ перед добавлением в DOM. Я попробовал этот var x = $ (response) .find ('# feedback -' + idfeedback); $ ('# feedback -' + idfeedback) .empty(). Append (x); но затем скрипты снова удаляются. – brpaz

-8

Можете ли вы показать мне структуру результатов html?

UPDATE 2010/11/03

Вы можете устранить <script> тег из .html() результата с регулярным выражением.
С вашего первого кода, после этой строки.

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), который я не мог внести изменения в любом случае.

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

Я использовал $.get() для получения этой HTML-страницы. Теперь, когда у меня есть код в виде строки, пришло время искать в нем с помощью jQuery. Моя цель состояла в том, чтобы изолировать Javascript-код внутри <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(); 

Решение простое решение. В начале мы заменим все <script> -Tags с чем-то вроде <sometag>:

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

Я презираю этот хак, но он работает, поэтому я проголосовал за него. Иногда HTML заставляет вас делать такие вещи. – usr

Смежные вопросы