Unable to trigger .ajaxComplete() function with jQuery function

Question

I am currently trying to use ajax function to check name availability, but I was unable to prompt out the correct message. It is always stuck on "loading" icon there. I had tried to troubleshoot my code, and it seem like it unable to trigger the .ajaxComplete function. I have no clue on this, please point out if I am doing anything wrong. Thanks

Here is my Ajax code :

<script type="text/javascript">

        pic1 = new Image(16, 16); 
        pic1.src = "assets/img/loader.gif";

        $(document).ready(function(){

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

        var pName = $("#packageName").val();

        if(pName.length >= 4)
        {
        $("#status").html('<img src="assets/img/loader.gif" align="absmiddle">&nbsp;Checking availability...'); 
            $.ajax({  
            type: "POST",  
            url: "checkPackageAvaibility.php",  
            data: "packageName="+pName,

            success: function(msg){  

           $("#status").ajaxComplete(function(event, request, settings){
            if(msg == "OK")
            { 
                $("#packageName").removeClass('object_error'); // if necessary
                $("#packageName").addClass("object_ok");
                $(this).html('&nbsp;<img src="assets/img/tick.gif" align="absmiddle">');
            }  
            else  
            {  
                $("#packageName").removeClass('object_ok'); // if necessary
                $("#packageName").addClass("object_error");
                $(this).html(msg);
            }  

           });

         } 

          }); 

        }
        else
            {
            $("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
            $("#packageName").removeClass('object_ok'); // if necessary
            $("#packageName").addClass("object_error");
            }

        });

        });

        //-->
        </script>

Here is my php code:

<?php
     include "include/session.php";
     include 'include/dbConnect.php';

     global $dbLink;

     if(isset($_POST["packageName"])){

         $pacName = $_POST["packageName"];

         $query= ("SELECT * FROM Package WHERE package_name = '$pacName'");
         $sql_check = sqlsrv_query($dbLink,$query);

         $rows = sqlsrv_has_rows($sql_check);

         if($rows ===true )
        {
        echo '<font color="red">The nickname <STRONG>'.$pacName.'</STRONG> is already in use.</font>';
        }
        else
        {
        echo 'OK';
        }
     }

?>

Arun P Johny · Accepted Answer · 2015-05-29 08:31:49Z

2

You need to bind ajaxComplete to the document

As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.

So

$(document).ajaxComplete(function(event, request, settings){
})

Demo: Fiddle

You don't need ajaxComplete(), instead just use the done callback like

pic1 = new Image(16, 16);
pic1.src = "assets/img/loader.gif";

$(document).ready(function () {

    $("#packageName").change(function () {
        var pName = $("#packageName").val();
        if (pName.length >= 4) {
            $("#status").html('<img src="assets/img/loader.gif" align="absmiddle">&nbsp;Checking availability...');
            $.ajax({
                type: "POST",
                url: "checkPackageAvaibility.php",
                data: "packageName=" + pName
            }).done(function (msg) {
                if (msg == "OK") {
                    $("#packageName").removeClass('object_error'); // if necessary
                    $("#packageName").addClass("object_ok");
                    $('#status').html('&nbsp;<img src="assets/img/tick.gif" align="absmiddle">');
                } else {
                    $("#packageName").removeClass('object_ok'); // if necessary
                    $("#packageName").addClass("object_error");
                    $('#status').html(msg);
                }
            });
        } else {
            $("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
            $("#packageName").removeClass('object_ok'); // if necessary
            $("#packageName").addClass("object_error");
        }

    });

});

edited May 29, 2015 at 8:31

answered May 29, 2015 at 8:22

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Marcus Tan Over a year ago

sorry for my poor english, what document you mean?

Arun P Johny Over a year ago

@MarcusTan the document object

Marcus Tan Over a year ago

then my "#status" should change to what?

Arun P Johny Over a year ago

@MarcusTan use $("#status").html(msg); instead of $(this).html(msg);

Marcus Tan Over a year ago

How about my $("#status").ajaxComplete(function(event, request, settings) ?

jeroen · Accepted Answer · 2015-05-29 08:25:55Z

1

You are attaching an ajaxComplete event handler inside the function that triggers when your ajax request is complete.

Apart from the fact that you cannot do that, you don't need that either, the success function is all you need in this case:

success: function(msg) {  
    if(msg == "OK") { 
        $("#packageName").removeClass('object_error'); // if necessary
        $("#packageName").addClass("object_ok");
        $("#status").html('&nbsp;<img src="assets/img/tick.gif" align="absmiddle">');
    } else {  
        $("#packageName").removeClass('object_ok'); // if necessary
        $("#packageName").addClass("object_error");
        $("#status").html(msg);
    }
}

answered May 29, 2015 at 8:25

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

2 Comments

Marcus Tan Over a year ago

I had try this method before, still my it never remove any class and stuck on loading icon

jeroen Over a year ago

@MarcusTan This is the correct way, if it does not work, you need to check what msg contains exactly. So add console.log(msg); before your if statement and see what you get in the console. Note that any output in your php script except OK (spaces, new-lines, php warnings) will cause your if statement to fail.

Collectives™ on Stack Overflow

Unable to trigger .ajaxComplete() function with jQuery function

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related