Làm thế nào để tạo ra một javascript liên tục, nơi nó cập nhật khi nội dung được cập nhật liên tục thông qua ajax?

Question

Tôi có một trang web cập nhật thông qua ajax. Nó tải nguồn cấp tin tức cập nhật sau mỗi 1 phút. Những gì tôi muốn làm là tạo một javascript phát hiện trường ngày đến và đặt một thẻ mạnh xung quanh nó. Dưới đây là mẫu html nhận nguồn cấp dữ liệu qua:

<div class="results"> 
    <div class="article"> 
    <div class="date">jan 8, 2013</div> 
    <p>Some content here</p> 
    </div> 
    <div class="article"> 
    <div class="date">feb 8, 2013</div> 
    <p>Some content here</p> 
    </div> 
</div> 

Tôi có thể viết javascript cơ bản cập nhật, nhưng nó chỉ kích hoạt một lần. Làm thế nào để tôi đi về việc làm cho javascript phát hiện nếu có bất cứ điều gì thay đổi trong phần tử "kết quả" và hành động phù hợp.

Answer 1

Bạn có thể đính kèm một người nghe đến Ajax (hoặc .complete() hoặc .ajaxStop()), sau đó nhận được tất cả các ngày và so sánh chúng với ngày hôm nay. Nếu chúng khớp nhau thì hãy in đậm ngày tháng. Một cái gì đó như thế này:

$(document).ajaxStop(function() { 
    var today = new Date(); 

    $.each($('.article .date'), function(i, el){ 
     var el_text = el.text(); 
     if(el_text == today.toLocaleFormat('%b %d, %Y')) { 
      el.html('<b>' + el_text + '</b>'); 
     } 
    }); 
}); 

Answer 2

Nếu bạn đang sử dụng JQuery (bạn nên gắn thẻ câu hỏi của mình với thẻ jquery), sau đó bạn muốn có giải pháp như thế này sử dụng $.ajaxComplete. Nếu bạn đang sử dụng một số khung công tác khác, có nhiều cách khác để thực hiện điều này tương tự.

$(document).ajaxComplete(function() { 
 
    $(".results .date").each(function() { 
 
    var strong = $('<strong>').text($(this).text()); 
 
    $(this).empty().append(strong); 
 
    }); 
 
}); 
 

 
// for this test, only to demonstrate, manually trigger an ajax complete event 
 
function test() { 
 
    $(document).trigger('ajaxComplete'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="results"> 
 
    <div class="article"> 
 
    <div class="date">jan 8, 2013</div> 
 
    <p>Some content here</p> 
 
    </div> 
 
    <div class="article"> 
 
    <div class="date">feb 8, 2013</div> 
 
    <p>Some content here</p> 
 
    </div> 
 
</div> 
 
Test: <button onclick="test()">Trigger JQuery Ajax Complete Event</button>

Cách duy nhất để phát hiện một sự thay đổi trong kết quả là một trong hai A) lập giả thuyết dựa trên kết quả nói rằng nó hứa hẹn nó mới hay B) so sánh nó cho phiên bản trước. Bạn có thể sử dụng $.ajaxSend để lưu các thay đổi cho phương thức B.

Nếu bạn đang theo phương thức A, bạn chỉ có thể theo dõi ngày tối đa và chỉ thực hiện điều gì đó nếu ngày đó lớn hơn, sau đó cập nhật ngày tối đa với ngày đó.

Answer 3

Nếu bạn không muốn sử dụng gọi lại thành công Ajax thì bạn có thể sử dụng sự kiện DOMSubtreeModified. ví dụ:

$('div.results').bind("DOMSubtreeModified", function() { 

     alert('changed'); 
}); 

Điều này sẽ được kích hoạt khi nội dung của các thay đổi div.result. int sự kiện này, bạn sẽ có thể làm bất cứ điều gì thao tác bạn muốn với div.date