Solved

How to detect AjaxCals status.

Posted on 2011-09-28
7
208 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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…
Suggested Courses
Course of the Month10 days, 22 hours left to enroll

631 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