2010-11-02 30 views
27

Tôi cần phải thay thế nội dung của div trong trang của tôi bằng kết quả html từ cuộc gọi ajax. Vấn đề là html có một số kịch bản cần thiết trong nó và có vẻ như jquery html() chức năng stripts chúng ra, Tôi cần phải lọc phản ứng và chỉ nhận được một div cụ thể.jquery html() dải ra các thẻ script

Tôi đang suy nghĩ về giải pháp khắc phục để trích xuất tất cả các thẻ tập lệnh từ phản hồi ajax và sau đó nối chúng vào DOM nhưng tôi gặp sự cố khi thực hiện điều đó.

Đây là mã của tôi;

$('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; 
    }); 

tôi thấy chủ đề cũ này: jQuery - script tags in the HTML are parsed out by jQuery and not executed

nhưng là bất kỳ kết luận. Tôi đã thử các giải pháp được đề xuất ở đó nhưng không có giải pháp nào trong số đó hoạt động.

EDIT: Tôi dường như đã tìm thấy giải pháp thay thế dựa trên chủ đề cũ nhưng không đẹp;

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); 
       }); 

Phải có cách dễ dàng.

Trả lời

25

Chỉnh sửa: Tôi mệt mỏi và không suy nghĩ. Bạn chỉ có thể sử dụng phương pháp innerHTML bản địa thay vì .html():

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

Original câu trả lời:

linh cảm của tôi là rằng câu trả lời bạn liên kết không làm việc cho bạn bởi vì kịch bản bao gồm được gọi với thuộc tính src thay vì nội dung tập lệnh giữa các thẻ <script></script>. Điều này có thể hoạt động:

$.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()); 

    } 
}); 

Lưu ý, điều này chưa được thử nghiệm cho bất cứ điều gì và có thể ăn trẻ sơ sinh.

+13

ăn trẻ sơ sinh, haahaha! –

+1

'.HTMLHTML' hoạt động ok nhưng tập lệnh bên trong nội dung mới không được thực thi ... bất kỳ ý tưởng nào? – agpt

+0

@Aman, vui lòng đăng câu hỏi với giải thích về những gì bạn đang cố gắng làm, những gì bạn đã thử và cách nó không thành công. – eyelidlessness

-2

Hãy thử

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

tôi đã không kiểm tra. Không chắc chắn nếu .html() thực sự dải <script> nhưng hãy dùng thử.

+1

iT hoạt động theo cách đó nhưng tôi cần lọc phản hồi trước khi thêm vào DOM. Tôi đã thử var x = $ (response) .find ('# feedback -' + idfeedback); $ ('# feedback -' + idfeedback) .empty(). Chắp thêm (x); nhưng sau đó các tập lệnh bị tước lại – brpaz

-8

Bạn có thể chỉ cho tôi cấu trúc html kết quả không?

CẬP NHẬT 2010/11/03

Bạn có thể loại bỏ <script> thẻ từ .html() kết quả với biểu thức chính quy.
Từ mã đầu tiên của bạn, sau dòng này.

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

Bạn có thể làm điều gì đó như thế này.

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

Câu trả lời này như thế nào? –

+0

phản hồi xuất hiện chính xác với tất cả các tập lệnh. nhưng bất kỳ bộ lọc nào tôi áp dụng sau đó trong dải thẻ script. – brpaz

+0

Tôi cập nhật giải pháp của mình ở trên. – diewland

2

Tôi gặp vấn đề tương tự, nhưng với nhiều vấn đề khác mà tôi không thể khắc phục dễ dàng. Nhưng tôi đã tìm thấy giải pháp:

Đây là nguồn giả của tôi (HTML) mà tôi không thể thay đổi theo bất kỳ cách nào.

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

Tôi đã sử dụng $.get() để tìm nạp trang HTML này. Bây giờ tôi có mã như một chuỗi, đã đến lúc tìm kiếm trong đó bằng jQuery. Mục tiêu của tôi là tách biệt Mã Javascript bên trong <script>Thẻ, thuộc về DIV identifier2, nhưng không phải là identifier1. Vì vậy, những gì tôi muốn nhận được là bar(456) như là một chuỗi kết quả. Do lý do, rằng jQuery dải tất cả các kịch bản-Tags, bạn không thể tìm kiếm như thế này nữa:

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

Giải pháp là một cách giải quyết đơn giản. Ban đầu chúng tôi sẽ thay thế tất cả <script> -Tags với một cái gì đó giống như <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) 

Đó là một đơn giản hack, nhưng nó hoạt động!

+2

Tôi coi thường bản hack này nhưng nó hoạt động nên tôi đã bình chọn nó. HTML đôi khi buộc bạn phải làm những việc như vậy. – usr

Các vấn đề liên quan