Question

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

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

     });

});