How to create a persistent javascript where it updates when content is constantly updated via ajax?
If you're using JQuery (you should tag your question with the jquery tag), then you want a solution like this using $.ajaxComplete. If you're using some other framework, there are other ways to go about this similarly.
$(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>The only way to detect a change in the results is to either A) make an assumption based on the result saying that it promises it's new or B) comparing it to the previous version. You can use $.ajaxSend to stash the changes for method B.
If you're going by method A, you could just keep track of the max date, and do something only if the date is greater, then update the max date with that one.