Javascript - Reloading page breaks my conditional formatting

Question

I have the following code which will refresh my web part every 60 seconds and its working great. The problem I have is that on top of the refresh code I also have a script that will highlight certain parts of my data and as soon as the refresh kicks in it breaks my scripts. What will happen is I load the page and I can see my script doing its thing my highlighting my data, a minute later the highlights are gone leaving me with just my data. I removed my refresh code and confirmed that my scripts stays intact afterwards.

Reload code:

<script type="text/javascript">
function reload() {
$.ajax({
   async: false,
   cache:false,
   url: "http://ensemble-mtl.ent.cginet/sites/SERVIPCManagement/imc/Shared%20Documents/Whiteboard/Whiteboard.aspx",
   complete: function (xData, Status) {
    var DVWPMarkup = $(xData.responseText).find("#reload_me").html();
    $("#reload_me").html(DVWPMarkup);
    }
});
}

$(document).ready(function(){ 
reload();
var auto_refresh = setInterval(function(){reload();}, 60000); 

});
</script>

Highlighting code:

<script language="javascript" type="text/javascript">
$('.IM_last_modified').each(function () {
    var dtSt = $(this).html().split(" ");
    var dtAr = dtSt[0].split("/");
    var when = new Date(dtAr[1] + "/" + dtAr[0] + "/" + dtAr[2] + " " + dtSt[1]);
    console.log(when);    
    var now = Date.now();

    if (now - when > 3600000) {
        $(this).addClass('min60');
    } else if (now - when > 1800000) {
        $(this).addClass('min30');
    } else if (now - when > 1000) {
        $(this).addClass('min1');
    } 

});
</script>

Answer 1

It looks to me as if your highlighting code only runs once. You need to put the highlighting code in a function and call it every time there is new data to be highlighted.

Answer 2

call "Highlighting code" inside ajax callback function if you are loading the same content again. My assumption is that the highlight part is getting replaced the ajax content.

.....
complete: function (xData, Status) {
    var DVWPMarkup = $(xData.responseText).find("#reload_me").html();
    $("#reload_me").html(DVWPMarkup);
    hightlightcode();  //make sure to change the highlight code to a function
}

function highlightcode()
{
   $('.IM_last_modified').each(function () {
     var dtSt = $(this).html().split(" ");
     var dtAr = dtSt[0].split("/");
     var when = new Date(dtAr[1] + "/" + dtAr[0] + "/" + dtAr[2] + " " + dtSt[1]);
     .....
}

Answer 3

Here is the script that finally worked for me, thanks everyone for the quick help.

<script type="text/javascript">
function reload() {
    $.ajax({
        async: false,
        cache:false,
        url: "http://ensemble-mtl.ent.cginet/sites/SERVIPCManagement/imc/Shared%20Documents/Whiteboard/Whiteboard.aspx",
        complete: function (xData, Status) {
        var DVWPMarkup = $(xData.responseText).find("#reload_me").html();
        $("#reload_me").html(DVWPMarkup);
        highlightcode_IM();
        }
        });
        }

function highlightcode_IM()
{

$('.IM_last_modified').each(function () {
    var dtSt = $(this).html().split(" ");
    var dtAr = dtSt[0].split("/");
    var when = new Date(dtAr[1] + "/" + dtAr[0] + "/" + dtAr[2] + " " + dtSt[1]);
    console.log(when);    
    var now = Date.now();

    if (now - when > 3600000) {
        $(this).addClass('min60');
    } else if (now - when > 1800000) {
        $(this).addClass('min30');
    } else if (now - when > 1000) {
        $(this).addClass('min1');
    } 

});

}
$(document).ready(function(){ 
reload();

var auto_refresh = setInterval(function(){reload();}, 6000); 
});
</script>