asked on

AJAX call causing apparent page refresh

Hi everyone,

I have the following AJAX call which updates portion of a page at 5s interval. The code works fine excepts that it appears as though the whole page is being refreshed, rather than just the values of the <p>. The page blinks briefly at every call, causing a horrible user experience. Any ideas why?

setInterval(function(){
        $.ajax({
         url:base_url+'dashboard/getLastTickets',
         method:'GET',
        success:function(data)
        {
            data = $.parseJSON(data);
        }
        });

        var ticketContainer = "";
        var i = 0;
        for (i=0; i<data.length; i++){
                ticketContainer = "ticketContainer" + data[i].service_code;
                document.getElementById(ticketContainer).html = data[i].service;
        }
}, 5000);

Open in new window

I did try to include the for loop within the AJAX call, but that did not solve the issue. Thanks for your help.

leakim971

Try this block and confirm the page still refresh for no reason :

setInterval(function(){}, 5000);

Open in new window

Tariiq Dusmohamud

ASKER

I just did and the page does not refresh. I narrowed down the refresh is being caused by the Ajax call.

Julian Hansen

I don't understand how this code can be working properly
A couple of house keeping suggestions
1. You don't need JSON.parse - jQuery will do this for you if you add the dataType: 'JSON' property to the AJAX options object
2. You should consider using . then() or .done() instead of success - the latter has been deprecated
3. You will find that neatly formatted code is much easier to debug.
Here is your code formatted

setInterval(function(){
  $.ajax({
    url:base_url+'dashboard/getLastTickets',
    method:'GET',
    success:function(data) {
      data = $.parseJSON(data);
    }
  });

  var ticketContainer = "";
  var i = 0;
  for (i=0; i<data.length; i++){
    ticketContainer = "ticketContainer" + data[i].service_code;
    document.getElementById(ticketContainer).html = data[i].service;
  }
}, 5000);

Open in new window

Let's look at what is happening here.
Your setInterval runs and makes an AJAX call. The AJAX call is async so it is going to take some time to run - however the code will continue to run - so while your AJAX call is in progress the loop is going to run against data.

The AJAX call completes and set's data - this will only be loaded on the NEXT setInterval - in other words your setInterval is only showing the previous item.

You should consider putting your update code in the success callback.

Can you show us a link where we can see the issue? An AJAX call will not cause a screen refresh.

ASKER CERTIFIED SOLUTION

Tariiq Dusmohamud

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Glad you got sorted out. I see this is your first question. Welcome to EE - hope to see you around on the forums.

Tariiq Dusmohamud

ASKER

Removing the ajaxStart(function()) solvers the screen refresh illusion.