Jquery script works only after opening new window in IE

Question

The script below queries a PHP service that returns a JSON response. Buttons are created for each returned record, allowing the user to delete that record from the database. A link is also created below to refresh the data.

This all works fine in IE, Chrome, Safari...IE (tried 8 & 9), however, is having a strange issue.

When the page loads, I am able to refresh the data by clicking the 'refresh' link. After this, clicking has no effect UNLESS I open the same page in a different IE window, click the link in the new window, and return to the original window. The 'refresh' link then works on the new window ONE time. It then turns into a vicous cycle.

Your help is appreciated!

function getNew(){ 
    $('#new').remove();
    $.getJSON('service.php', function(data) {   
        var items = [];

        items.push('<tr><th>EmplId</th><th>ExternalID</th><th>Name</th></tr>');   

        $.each(data, function(key, val) {

            var indiv = val.toString().split(",");
            items.push('<tr>');
            var id = indiv[0];

            $.each(indiv, function(index, value) {
                items.push('<td align="center" id="' + index + '">' + value + '</td>');
            });

            items.push('<td  class="updateButton" align="center" onclick=\'return update("'+id+'")\'>Update</td>');

        });

        items.push('<tr><td  class="refreshButton" align="center" onclick=\'return getNew();\'>Refresh </td></tr>');

        $('<table/>', {
            'id': 'new',
            html: items.join('')
        }).appendTo('body');
    });
}

function update (emplID){
    $.ajax({
        url: "service.php?emplID="+emplID,
        context: document.body,
        success: function(){
            $('#new').remove(); 
            getNew();
        }
    });
}

I have tried using .live and I get the same results.

$(".refreshButton").live("click" , function() { 
    getNew(); 
    $.ajax({
        url:     "Service.php?emplID=", 
        context: document.body, 
        success: function(){       
            $('#new').remove();     
            getNew(); } 
    }); 
});

I have disabled the cache still to no avail. The ONLY way to make the link work is to open the same page in a separate window, click the link, and return to the original window. Is there any solution to this?

$(".refreshButton").live( "click" , function() { 
    getNewStudents(); 
    $.ajax({
        url: "studentService.php?emplID=",
        cache: false,
        context: document.body,
        success: function(){

            $('#newStudents').remove();

            getNewStudents();
        }
    });
});

Thanks for your suggestions. I fixed the tr, but it seems that the solution was to use

 $.ajaxSetup({ cache: false });

It seems all versions of IE treat ajax calls as normal web requests (cacheable), whereas other browsers consider ajax calls as non-cacheable.

Learned something new today, thanks guys!

Answer 1

Maybe it's because of cache, have you tried to clear your cache and try again? this may help http://kb.iu.edu/data/ahic.html#ie8

Answer 2

Perhaps IE is choking on the malformed HTML that getNew is generating; note that in your .each loop, you are not closing the tr element. Also, if you're getting a JavaScript error, JS execution may stop, so make sure your browser isn't configured such that it ignores JS errors. Check the error console.