Question

I have a piece of JQuery AJAX that calls a VB.NET code-behind (class) that returns string data. It grabs some latest stats on a particular server. Now the code works, but the first time I press the refresh button data is returned and the alert “Refreshed” is shown on screen.

But if I press it again, the alert box “Refreshed” is shown twice, I click again three times! and on and on, until the time-out kicks in.

It seems to be coming from the AJAX call and no where else. I’m at a loss at what could be calling this, I’ve tried deleting the data returned after success but no joy. Any ideas on what could be causing this or where to look?

function RefreshServer(btn,div,id,ip) {

$('#aRefresh'+id).html("<img src=images/refreshServer.gif border=0 align=absmiddle />");
$("#"+btn).click(function() {
$.ajax({
  type: "POST",
  url: "Dashboard.aspx/refreshServerAJAX",
  timeout: 5000,
  data: "{'IP': '" + ip + "'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    var substr = msg.d.split('%');
    $('#serverBox_mod'+id).html(" " +substr[0]);
    $('#serverBox_map'+id).html(" " +substr[1]);
    $('#serverBox_playing'+id).html(" " +substr[2] + "/" + substr[3]);
    $('#serverBox_img'+id).html("<img src=images/Maps/" + substr[4] + " height=80 width=120 border=0 style=margin-top:10px;margin-bottom:10px; />");
    $('#serverBox_title'+id).html(" " +substr[5]);
    $('#aRefresh'+id).html("Refresh");
    delete substr
    delete msg
    alert("Refreshed");  
  },
  error: function(msg) {
    $('#aRefresh'+id).html("Refresh");
    $('#serverBox_title'+id).html("Server didn't respond!, sorry about that. Please try again...");
  }
});
});  
}

Answer 1

I guess you are binding the click event everytime you call the function. So it is making that many number of ajax calls to the server page. So If you want to keep the code structure as it is and fix it, I would unbind the click event already added and bind it again.

function RefreshServer(btn,div,id,ip) {

  $("#"+btn).unbind('click');
  $("#"+btn).click(function() {
     //your ajax code is here
  });

}