CODEWITHSUNDEEP
jqueryajaxformsregistration
Bor
Bor

Reputation: 793

jQuery AJAX slower than accessing DOM element

I want to check whether username is free for use with AJAX and jQuery.

This is the registration input field 

      <tr> 
          <td><input type = "text" id ="new_username"/></td>
      </tr>
      <tr>
        <td></td>
        <td id ="information"></td>
     </tr>
     <input type = "submit" id = "sign-up" value = "Sign up" />

here is the jquery part with ajax 

(function($){
$(document).ready(function(){
    $('#new_username').blur(function() {
        var newUsername = $(this).val(); 

        $.post('../registration/check-username.php', 
            { 
                newUsername : newUsername  
            }, function (data) {
                $('#information').html(data);
            }
        );  
    }); 

    if( $("#information").html() != "" ) { 
        $("#sign-up").attr('disabled', 'disabled');
    } else { 
        $("#sign-up").removeAttr("disabled"); 
    }     
});
})(jQuery);

If there's any problem - the "information" td gets some error message. If the username is free it's empty and no any notification. The problem is it takes some to for the ajax to response and it's faster just to click somewhere - that causes check that is not correct. Any ideas if you understand my question ?

Upvotes: 0

Views: 108

Answers (3)

Ryan Brodie
Ryan Brodie

Reputation: 6620

I think by "it's faster just to click somewhere" you're referring to users being able to click submit before the input has been validated. Use the $.ajax() beforeSend method to get around this:

$(document).ready(function(){
  $('#new_username').blur(function() {
    $.ajax({
      url: "../registration/check-username.php",
      data: {
        newUsername: $(this).val()
      },
      beforeSend: function() {
        $("#sign-up").attr("disabled","disabled");
      },
      success: function(data) {
        $('#information').html(data);
        if( !data )
          $("#sign-up").removeAttr("disabled");
      }
    });
  });
});

Upvotes: 1

Sinetheta
Sinetheta

Reputation: 9449

You are right, you need to wait for the AJAX response to come back. Without refactoring your code completely, just do your check once the response has returned. You are right, you need to wait for the AJAX response to come back. Without refactoring your code completely, just do your check once the response has returned.

$.post('../registration/check-username.php', 
  { 
    newUsername : newUsername  
  }, function (data) {
    $('#information').html(data);
  }).done(function(){
    if( $("#information").html() != "" ) { 
      $("#sign-up").attr('disabled', 'disabled');
    } else { 
       $("#sign-up").removeAttr("disabled"); 
    } 
  });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

It is because $.post is a asynchronous request means once the request is sent to the server to verify the username the script execution will continue. In your case this means the if condition will get executed before the server responds, so the solution is to move the if condition inside the callback method.

Also it is better to use the .prop() method to modify the disabled property

Try

(function($){
    $(document).ready(function(){
        $('#new_username').blur(function() {
            var newUsername = $(this).val(); 

            $.post('../registration/check-username.php', 
                   { 
                       newUsername : newUsername  
                   }, function (data) {
                       $('#information').html(data);

                       $("#sign-up").prop('disabled', data != "");
                   }
                  );  
        });         
    });
})(jQuery);

Upvotes: 1

Related Questions