Solved

How to detect AjaxCals status.

Posted on 2011-09-28
7
197 Views
Last Modified: 2013-01-21
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.
0
Comment
Question by:Praveen_Bobbili
  • 4
7 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 36813135
may i know what is the second scenario and where  you are not passing any object then ajaxStart is not getting triggered.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36814104
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
 
LVL 1

Author Comment

by:Praveen_Bobbili
ID: 36814573
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Praveen_Bobbili
ID: 36814627
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
 
LVL 1

Accepted Solution

by:
Praveen_Bobbili earned 0 total points
ID: 38786183
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
 
LVL 1

Author Closing Comment

by:Praveen_Bobbili
ID: 38800560
Div id give the solution for me.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP sending two datas 2 22
ModalPopup  question 22 37
Glitching Slide Show 19 26
How do I post more than 1 item to php backend 24 27
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question