Jquery.get behaviour on timeout?

I'm new to web coding and have been playing with JQuery recently. I've noticed some behaviour and wanted to know if it is normal behaviour and the best way to deal with it.

I am doing a simple get to my web server, sometimes the server can take a couple of minutes to return its result. What I notice is that my server side code is called more than once, in this case '/userprofile' can be called up to 3 times.

("li#user").click(function(){
    $.get('/userprofile',{partialrender: 'true' },
        function (data) {
          $("div#content").html(data); 
    });
});

So my questions are;

1)Is this normal behaviour? and 2)if so is it JQuery making the extra calls or the browser? 3)What are some good ways of handling this?

I appreciate that the answers to question 3 might be a difficult one, but any help is very much appreciated.

Many thanks.

UPDATE:

Thanks Guys,

ok so I can't generate the problem with that exact call due to the backend database being small but I can with another identical call. I put an alert call in just before the get and its only called once. I am using the Mojolicious webframework, so I'm wondering if it could have something to do with that? I am using the Morbo web server.

Here is my code that is exhibiting this behaviour

("li#importDevice").click(function(){
    alert('import clicked');
    $.get('/importDevice',{device: 'corptest' },
       function (data) {
         $("div#content").html(data); 
   });
 })



sub importDevice {
  my $self = shift;
  my $res = "test";
  my $dir      = $self->session("dir");
  my ($debug, $log, $path, $upload) = createLogHandles($self);
  my %deviceEntry = device::getDeviceEntry($devicename);
  print "In Import   Device \n";
  return $self->redirect_to('failed') unless $self->session('role') eq 'admin';

  my %sessiondetails = utils::buildSessionDetails(%deviceEntry);

 #THE FUNCTION BELOW IS WHERE THE DELAY CAN BE. 
 my $result = utils::connectToDevice(\%sessiondetails);

  if ($result ne 'failedconnect') {
    Vendor::importConfig($session,$dir);
    Vendor::processConfig($dir,$debug,$upload);
  }  
$self->render(text => $result);  
}

When my utile::connectToDevice takes a while to respond, I see that the whole callback is called again.

And here is the output from my morbo webserver log. It does APPEAR to be getting two calls.

[Thu Nov 22 00:22:27 2012] [debug] GET /importdevice (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11).
[Thu Nov 22 00:22:27 2012] [debug] Routing to controller "MyApp::DevT" and action "importDevice".
[Thu Nov 22 00:22:50 2012] [debug] 200 OK (22.117681s, 0.045/s).
[Thu Nov 22 00:22:50 2012] [debug] GET /importdevice (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11).
[Thu Nov 22 00:22:50 2012] [debug] Routing to controller "MyApp::DevT" and action "importDevice".

My suggestion while making ajax calls would be, set a flag indicating there's already a request made to server. Check the flag each time and depending on it's status decide whether to make request or not. Once you get the response from server reset the flag. So you can try this -

var running=false;
$("li#user").click(function(){

    if(!running){
       running=true;
       $.get('/userprofile',{partialrender: 'true' },
        function (data) {
          $("div#content").html(data);
          running=false; 
       });
    }
});

This will avoid the situation of user clicking on button 100 times and flooding requests.

Update

Removed error in if condition.

if above thing doesn't help then do this.

$("li#user").unbind('click').click(function(){
   // do the thing
});

This will detach all click handlers and events from element and binds again.

Recommended topics

Hot tags