javascript - How to Execute the function after Ajax call is complete - Stack Overflow

admin管理员组

文章数量:1291029

I have two functions,in 1st function having ajax call,so i want the 2nd function to be execute after ajax call (here i am reloading the page)plete,can you please help me?
Here the below code

<div id="exapnd_or_collapse_div" class="exapnd_or_collapse_div" onclick="changeLayout();">
<script>
function changeLayout () {
    alert('change layout');

    try {
        jQuery.ajax({
            url:'<%=resourceURL.toString()%>',
            dataType: "text",
            data:{
                <portlet:namespace  />cmd:'changeLayout'
            },
            error: function(){
             alert("AJAXError");
            },
            type: "post",

            success: function(data) {

                if("success" == data) {

                    location.reload();
                }
            }
        }).done(function(){
            exapndCollapse(); 
          });


    } catch(e) {
        alert('waiting: ' + e);
    }
};

function expandCollapse() {


            jQuery("div.Search_Styled-dropDown").css("display", "none");
            jQuery("span.menu-text").css("display", "none");

            jQuery("ul.Common_ul").css("display", "none");
            jQuery("img.module_images").css("width", "25px");
            jQuery("img.module_images").css("margin-top", "20px");
        jQuery("img.module_images").css("height", "21px");
            jQuery("#search_box").css("display", "none");   
        jQuery("#Escaped_toggle").css("margin-right", "94%");   
        }
</script>

I have two functions,in 1st function having ajax call,so i want the 2nd function to be execute after ajax call (here i am reloading the page)plete,can you please help me?
Here the below code

<div id="exapnd_or_collapse_div" class="exapnd_or_collapse_div" onclick="changeLayout();">
<script>
function changeLayout () {
    alert('change layout');

    try {
        jQuery.ajax({
            url:'<%=resourceURL.toString()%>',
            dataType: "text",
            data:{
                <portlet:namespace  />cmd:'changeLayout'
            },
            error: function(){
             alert("AJAXError");
            },
            type: "post",

            success: function(data) {

                if("success" == data) {

                    location.reload();
                }
            }
        }).done(function(){
            exapndCollapse(); 
          });


    } catch(e) {
        alert('waiting: ' + e);
    }
};

function expandCollapse() {


            jQuery("div.Search_Styled-dropDown").css("display", "none");
            jQuery("span.menu-text").css("display", "none");

            jQuery("ul.Common_ul").css("display", "none");
            jQuery("img.module_images").css("width", "25px");
            jQuery("img.module_images").css("margin-top", "20px");
        jQuery("img.module_images").css("height", "21px");
            jQuery("#search_box").css("display", "none");   
        jQuery("#Escaped_toggle").css("margin-right", "94%");   
        }
</script>

• javascript
• jquery
• html
• css
• liferay

Share Improve this question Follow edited Mar 27, 2015 at 6:59 ASR 3,55933 gold badges3939 silver badges6767 bronze badges asked Mar 27, 2015 at 5:30 PVBRajuPVBRaju 9511 gold badge11 silver badge1111 bronze badges 4

• 1 location.reload(); in success reload page without call your function – Nishit Maheta Commented Mar 27, 2015 at 5:32
• after reloading only i want to call expandCollapse(); – PVBRaju Commented Mar 27, 2015 at 5:35
• 1 if you reload page then you are not able to get ajax done request . page reload will not mange ajax plete event . – Nishit Maheta Commented Mar 27, 2015 at 5:39
• Check your spelling: exapndCollapse() <> expandCollapse(). Is that your problem? What is and what isn't working? – Amos M. Carpenter Commented Mar 27, 2015 at 5:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

As you know Ajax is to make Asynchronous request. It means client no need to wait till you get the response from server. So during this Ajax object goes different states (i.e. from 0 to 4). Those are:

• 0: request not initialized
• 1: server connection established
• 2: request received
• 3: processing request
• 4: request finished and response is ready

So as per your requirement there is two solution:

• either you make synchronous request (but it is not remended)
• you need to call your 2nd function when readystate value is 4

Refer below code, it will help you:

function changeLayout() {
    try{
        jQuery.ajax({
            url:'<%=resourceURL.toString()%>',
            dataType: "text",
            data:{
                <portlet:namespace  />cmd:'changeLayout'
            },
            type: "post",

            beforeSend: function(){
                //before send this method will be called
            },
            success: function(data) {
                //when response recieved then this method will be called.
            }
            plete: function(){
                //after pleted request then this method will be called.
            },
            error: function(){
                //when error occurs then this method will be called.
            }
        });
    }catch (e) {
        alert(e);
    }
}

Hope this will help you :)

Try this but i have created example change the code as per your requirement

function exapndCollapse(){

    //execute your script here
    //if u want reload the page means write your script here

}

function changeLayout () {
var myval = 'test';
    $.ajax({
          url:'script.php',
          type: "POST",
          data: {"myval":myval},
          success: function(data){
              //call the after ajax success 
              exapndCollapse(); //whatever the function call 
          },error: function() { 
              console.log("error");
          } // This is always fired
   });   
};    

本文标签： javascriptHow to Execute the function after Ajax call is completeStack Overflow