Why is my jquery ajax requests performing multiple times?

Question

Hi there,

I am looking at the console in firebug when I click on a function which performs an ajax request. The problem is, that one click of a button should send 1 ajax request, but I get 2 requests being sent!

The code for my js looks like this:

$(document).ready(function() {
   $('.book_now').click(function(){


$.ajax({
  type: 'POST',
  url: '/booking.php',
  data: 'event_id='+event_id+'&time_id='+time_id,
  success: function(data) {
    console.log('inside');
    $('#booking_box_content').html(data);
  }
});


  });
});

Which seems pretty straight forward right?

In my console however, I see 2 x GET requests off 1 click.

My button is simply:

<div class="book_now"></div>

Am I missing something - is there supposed to be 2 GET requests?

Is it by any chance loading up the $(document).ready() function again when the new file is loaded and therefor executing the click function again?

Note: I'm not double clicking the button. It probably doesn't matter, but if I change it to POST it does it twice also.

Edit: the response from booking.php

<div id="booking_box_left">
  <h1 class="speaker_name"></h1>
  <h1 class="event_name"></h1>

  <div class="event_start_header">Start</div><div id="event_start_datetime">, </div>
  <div class="cleared"></div>
  <div class="event_end_header">End</div><div id="event_end_datetime">, </div>
  <div class="cleared"></div>
  <div class="event_where_header">Where</div><div id="event_where"><strong></strong><br /><br />
</div>

</div>
<div id="booking_box_right_container">
  <form id="booking_form_1" method="post">
    <input type="hidden" name="booking_id" value="7a614fd06c325499f1680b9896beedeb" />
    <input type="hidden" name="event_id" value="" />
    <input type="hidden" name="time_id" value="" />
    <div id="booking_box_right">
      <h1>To reserve your seat</h1>
      <input type="text" name="booking_email" class="enterSomething booking_email" title="Enter your email..." />
      <div class="booking_email_helper">On clicking next a ticket will be held for you for a short period for you to complete your registration.</div>
      <input type="submit" id="next" value="Next" />
    </div>
  </form>
</div>

Note: nothing in this response has any functions being triggered to my knowledge. I'm skeptical that the response is what is firing off the ajax request twice... if the click function is only running once, then it can't possibly be the button is executing the function twice, but the $.ajax() part, namely the success callback which is. I've updated the JS code to show how I structured the console.log() stuff.

FINAL EDIT:

My ajax function was wrapped inside of the following:

   $('#shade, #booking_box').fadeIn(function(){

     // ajax function

  }

I had no idea but it was calling this function for for when the #shade (my thickbox) and the #booking_box came in hence running it TWICE! :(

I feel like such a tool.

Thanks everybody for your help.

Answer 1

A few things could be happening:

1. The click handler has been binded twice. Change $('.book_now').click(function(){ to $('.book_now').unbind('click').click(function(){ to debug. Later on you could refactor your code to use $('.book_now').unbind('click',handler).click(handler);.

2. There is a redirect occurring on the server-side causing there to appear as if there are two ajax requests performed. This would mean console.log('inside') would only run once.

3. The click handler is being triggered twice. To debug this, add a breakpoint to your click handler via firebug or webkit's developer tools and debug it manually. You will be able to traverse up the "call stack" and discover if this is the case.

Answer 2

I had my function inside 2 divs with the following JS

$('#shade, #booking_box').fadeIn(function(){

 // ajax function

}

I didn't realise that by doing this it would execute inside the function 2 times for each div I was fading in...

Solution was:

$('#shade').fadeIn(function(){

     $('#booking_box').fadeIn(function() {

        // ajax function

     });

});