Solved

How to detect AjaxCals status.

Posted on 2011-09-28
7
194 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Diminish Pop-up  in 3 seconds 7 49
Add shadow behind div 5 25
iframe - style elements within an iframe 7 36
Wordpress Query 5 27
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…
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…

839 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