CODEWITHSUNDEEP
jqueryajax
Rome
Rome

Reputation: 52

Jquery update 1-3 code issue

I have a older script that I use to use. I am not a jquery type person and I am having difficulties getting a script to work.

I am using jquery 3.2.1 but I can only get this to work using jquery 1.11.1 I am not sure what I am looking for or what is causing the issue.

the script is located here http://www.2my4edge.com/2013/07/username-live-availability-check-using.html

This issue code

$(document).ready(function(){

$("#username").change(function(){

var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 4){

$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "username="+ username,  
    success: function(msg){  
   $("#status").ajaxComplete(function(event, request){
    if(msg == 'OK')    {

        $("#username").removeClass("red");
        $("#username").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');

    } else  {

         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  

   });
   }

 });

} else {
$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>');
}
return false;
});

});

Upvotes: 1

Views: 48

Answers (2)

Epic
Epic

Reputation: 320

Try the following is works with version 3

$(function() {    

$("#username").keyup(function(){

var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 3){

$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "username="+ username,  
    success: function(msg){  

    if(msg == 'OK') { 

        $("#username").removeClass("red");
        $("#username").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');

    } else  { 

         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  

   } 

 }); 

} else {

$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>');
}
return false;
});

});

Upvotes: 1

Wizard
Wizard

Reputation: 3151

Yoy are using ajaxComplete inside success callback function, that doesn't make sense, since success callback will fire when ajax finishes. Also, according to .ajaxComplete() :

As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxComplete() method, must be attached to document.

Try to remove the line:

$("#status").ajaxComplete(function(event, request){

and its closing bracket and parenthesis:

});

Also, $(document).ready(function(){ is deprecated in jQuery 3. Replace it with $(function() {

Upvotes: 0

Related Questions