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';
        }
     }

?>

Answer 1

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");
        }

    });

});

Answer 2

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);
    }
}