Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to detect AjaxCals status.

Posted on 2011-09-28
7
Medium Priority
?
214 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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

Industry Leaders: 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!

Question has a verified solution.

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

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

721 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