Multiple GET requests using JQuery and AJAX

Question

Very new to JQuery AJAX here. I have been looking around for a answer for awhile on this and can't find an answer.

I have a form that users would fill out. Once filled click on submit. This starts an ajax call to an asp page and basically just displays the information that was entered and fades out the user form. A confirm button below that takes the user to another .asp page that puts it into a database and gives them a ticket number.

My issue is that on the second call ( page that does the input ) , I notice in firebug that the get is happening twice. If I try the asp page alone it is only doing the input once so it's not my sql code. If I switch the second .asp page with the first it works fine.

Here is my jquery. I appreciate any comments. Thanks

 $('#submit').click(function (event){
event.preventDefault(); // DECLARE EVENT IN THE CLICK FUNCTION

//Get the data from all the fields 
var posting = 'no';
var firstname = $('input[name="firstname"]');
var lastname = $('input[name="lastname"]');
var phone = $('input[name="phone"]');
var email = $('input[name="email"]');
var family_size = $('select[name="family_size"]');
var date_3 = $("#date3");
var date_4 = $("#date4");
var book_option = $('input[name=book_option]:radio:checked');
var payment_type = $('input[name=payment_type]:radio:checked');
var comments = $('textarea[name="comments"]');

if (firstname.val()=='') { 
       firstname.addClass('fn_error');
       firstname.focus(); 
       return false;       
} else 
    firstname.removeClass('fn_error');

if (lastname.val()=='') {
       lastname.addClass('ln_error');
       lastname.focus();
       return false;       
} else 
    lastname.removeClass('ln_error');

if (phone.val()=='') {
       phone.addClass('fn_error');
       phone.focus();
       return false;       
} else 
    phone.removeClass('fn_error');

if (email.val()=='') { 
      email.addClass('ln_error');
      email.focus();
      return false;        
} else 
    email.removeClass('ln_error');

// TEST FOR VALID EMAIL
var email_pattern=new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$");
var email_result = email_pattern.test(email.val());
if( email_result == true ) {
    email.removeClass('fn_error');
}else{
    email.addClass('fn_error');
    email.focus();
    return false;
}

// TEST FOR VALID PHONE NUMBER
var phone_pattern= 
    new RegExp("^(\\(?\\d\\d\\d\\)?)?( |-|\\.)?\\d\\d\\d( |-|\\.)?\\d{4,4}(( |-|\\.)?[ext\\.]+ ?\\d+)?$");
var phone_result = phone_pattern.test(phone.val());
if( phone_result == true ) {
    phone.removeClass('fn_error');
}else{
    phone.addClass('fn_error');
    phone.focus();
    return false;
}

var dataString= 'firstname=' + firstname.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&family_size=' + family_size.val() + '&date3=' + date_3.val() + '&date4=' + date_4.val() + '&book_option=' + book_option.val() + '&payment_type=' + payment_type.val() + '&comments=' + comments.val() + '&posting=' + posting;

//alert(dataString);  
$('#ticketform').fadeOut('slow', function() {
    $('#testdiv').load('../resources/confirm_ticket.asp', dataString, function() {
        $('#generateform').fadeIn('slow');
        $('#submit').unbind('click');
    });

}); // LOAD CLOSE
}); // SUBMIT CLICK FUNCTION CLOSE

$('#gen').click(function (event){
event.preventDefault(); // DECLARE EVENT IN THE CLICK FUNCTION

var firstname = $('input[name="firstname"]');
var lastname = $('input[name="lastname"]');
var phone = $('input[name="phone"]');
var email = $('input[name="email"]');
var family_size = $('select[name="family_size"]');
var date_3 = $("#date3");
var date_4 = $("#date4");
var book_option = $('input[name=book_option]:radio:checked');
var payment_type = $('input[name=payment_type]:radio:checked');
var comments = $('textarea[name="comments"]');

var dataString= 'firstname=' + firstname.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&family_size=' + family_size.val() + '&date3=' + date_3.val() + '&date4=' + date_4.val() + '&book_option=' + book_option.val() + '&payment_type=' + payment_type.val() + '&comments=' + comments.val();

alert(dataString);  
$('#testdiv, #generateform').fadeOut('slow', function() {
    $('#message').load('../resources/generate_ticket.asp', function() {
        $('#message').fadeIn('slow'); 
    });

}); // LOAD CLOSE

   }); // SUBMIT2 CLICK FUNCTION CLOSE

Answer 1

I got the answer from a forum today. Can't remember where but the answer is....

$('#testdiv, #generateform').fadeOut('slow', function() {
$('#message').load('../resources/generate_ticket.asp', function() {
    $('#message').fadeIn('slow'); 
});

I have 2 selectors in the fadeOut. It was calling the load function twice for each selector. Changed it and now I'm only getting the one GET request. Thanks for the help though all! :) Happy Coding!

Answer 2

First off, a better way to verify if a field is filled in is to use jQuery $.trim(), it will trim all white space in the beginning and end so if someone enters a bunch of spaces, it will return false still. This is how you would do it:

if ($.trim(firstname.val())) { 
       firstname.addClass('fn_error');
       firstname.focus(); 
       return false;       
}

This is a much better way to verify if it is empty, but an even better idea is to use the jQuery Validation plugin, in which you can simple put class="required", class="required email", etc. for each rule (they can also be defined in the javascript if you prefer).

Also, I see that you keep using .load. Did you know a thing called $.get exists? It is a little more powerful way to send a get request and you don't have to load it into an element to make it work (there's also $.post). I used to use .load myself all the time a while back until I discovered $.get and $.post. This is an example with your code:

$.get('../resources/confirm_ticket.asp', dataString, function(data) { // data is what is returned from the request (html, etc.)
        $('#generateform').fadeIn('slow');
        $('#submit').unbind('click');
});

Anyway, now to your question.

I don't see any problems of why it would be doing that, but it could be a bug with the browser or something (usually not but this happened to me before too and I never found out how to fix it). Have you tried it in other browsers like Google Chrome or Safari?