How to detect AjaxCals status.

I have written a function to know ajax calls status i.e ajaxStart, ajaxSuccess and ajaxStop . Please find function below.........

function doAjaxStart(obj) {

    obj.ajaxStart(function () {
        $('#loading').removeClass("hideSection").addClass("displaySection");
    });
    obj.ajaxSuccess(function () {
        $('#loading').removeClass("hideSection").addClass("displaySection");
    });

    obj.ajaxStop(function () {
        $('#loading').removeClass("displaySection").addClass("hideSection");
    });


}

We are calling this function before the Ajax get function as shown below.
We are calling Ajax get function in below two scenarios to get the information from the controller.
1) When there is change in the dropdown list item.

function Submitform_Onchange(val) {
    var $k = jQuery.noConflict();
    if (val > 0) {
        doAjaxStart($k("#questionTypeName"));
        var urlnew = initialUrl + "/survey/getquestiontypes/?ID=" + val + "&Key=" + Math.random() * Date.parse(new Date()); ;
        $k.get(urlnew, function (data) {
            $k("#RenderValue").html(data);


            if ($k("#btnsaveQuestion") != "undefined") {
                $k("#btnsaveQuestion").focus();
                if ($k("#QuestionText") != "undefined") {
                    $k("#QuestionText").focus();
                }
            }
        });
    } else {
        $k("#RenderValue").html('');
    }
}

2) When clicking on the link button.

function EditQuestion(questionID, controlID, controlIDs) {
    var $k = jQuery.noConflict();
    var urlnew = initialUrl + "/survey/EditQuestion";
    DisplayControl(controlID, controlIDs)
    doAjaxStart($k("#" + controlID));
    $k.get(urlnew, { questionID: questionID }, function (data) {
        $k("#RenderValue").html(data);

        if ($k("#divCreateQuestion") != null) {
            $k("#divCreateQuestion").html("Edit Question");
        }

        if ($k("#QuestionTypeId") != null) {
            $k("#questionTypeName").val($k("#QuestionTypeId").val());
            document.getElementById('questionTypeName').disabled = true;
        }
        if (document.getElementById("RowNumber") != null && document.getElementById("ColumnNumber") != null) {
            showHeaders(questionID, $k("#RowNumber").val(), $k("#ColumnNumber").val())
        }
        else if (document.getElementById("RowNumber") != null) {
            showTextboxs(questionID, $k("#RowNumber").val())
        }
    });
}



In first scenario we are passing dropdown object, then this function is working fine.But in second  we are not passing any object,then ajaxStart is not getting triggered.
 
Can i please know how can i detect  ajaxStart when i am not passing any object.
LVL 1
Praveen_BobbiliAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Praveen_BobbiliConnect With a Mentor Author Commented:
Its solved by giving the Id of a div which is in the page.
like below

doAjaxStart($k("#StartDiv"));

Have a static div like below

<div id="StartDiv">
</div>
0
 
chaitu chaituCommented:
may i know what is the second scenario and where  you are not passing any object then ajaxStart is not getting triggered.
0
 
leakim971PluritechnicianCommented:
what about something like :

function EditQuestion(questionID, controlID, controlIDs) {
    var $k = jQuery.noConflict();
    var urlnew = initialUrl + "/survey/EditQuestion";
    DisplayControl(controlID, controlIDs)
    if($k("#" + controlID).length==0) doAjaxStart($k("body")); else doAjaxStart($k("#" + controlID));
    $k.get(urlnew, { questionID: questionID }, function (data) {
        $k("#RenderValue").html(data);

        if ($k("#divCreateQuestion") != null) {
            $k("#divCreateQuestion").html("Edit Question");
        }

        if ($k("#QuestionTypeId") != null) {
            $k("#questionTypeName").val($k("#QuestionTypeId").val());
            document.getElementById('questionTypeName').disabled = true;
        }
        if (document.getElementById("RowNumber") != null && document.getElementById("ColumnNumber") != null) {
            showHeaders(questionID, $k("#RowNumber").val(), $k("#ColumnNumber").val())
        }
        else if (document.getElementById("RowNumber") != null) {
            showTextboxs(questionID, $k("#RowNumber").val())
        }
    });
}

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Praveen_BobbiliAuthor Commented:
I have gone through above link previously, but when ever we are going in this way we are not able detect ajaxstart, we can only detect ajaxSucess and ajaxStop events.............
0
 
Praveen_BobbiliAuthor Commented:
chaituu

    In the second scenario i will be having Guid id based on which i will get the data from the controller, But in first scenario we based on the drop list value i will get the data...........
0
 
Praveen_BobbiliAuthor Commented:
Div id give the solution for me.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.