Tips for Running a Function Once an Ajax Request is Finished

Question

Tips for Running a Function Once an Ajax Request is Finished

I have a requirement where I need to execute the second function after the completion of an AJAX call in the first function (which involves reloading the page). Can you assist me with this? Here is the code snippet:

<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

Answer 1

Answer №1

As you may be aware, Ajax is used to make asynchronous requests, allowing the client to continue without waiting for a response from the server. During this process, the Ajax object goes through various states (ranging from 0 to 4). These states are defined as follows:

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

To address your specific requirements, there are two potential solutions:

You could opt for synchronous requests (although not recommended)
You should call your second function when the readystate value reaches 4

Below is a code snippet that could guide you:

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

            beforeSend: function(){
                // This method will be executed before sending the request
            },
            success: function(data) {
                // This method will be executed upon receiving a successful response.
            }
            complete: function(){
                // This method will be executed after completing the request.
            },
            error: function(){
                // This method will be executed if an error occurs.
            }
        });
    }catch (e) {
        alert(e);
    }
}

We hope this information proves useful to you :)

Answer 2

As you may be aware, Ajax is used to make asynchronous requests, allowing the client to continue without waiting for a response from the server. During this process, the Ajax object goes through various states (ranging from 0 to 4). These states are defined as follows:

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

To address your specific requirements, there are two potential solutions:

You could opt for synchronous requests (although not recommended)
You should call your second function when the readystate value reaches 4

Below is a code snippet that could guide you:

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

            beforeSend: function(){
                // This method will be executed before sending the request
            },
            success: function(data) {
                // This method will be executed upon receiving a successful response.
            }
            complete: function(){
                // This method will be executed after completing the request.
            },
            error: function(){
                // This method will be executed if an error occurs.
            }
        });
    }catch (e) {
        alert(e);
    }
}

We hope this information proves useful to you :)

Answer 3

Answer №2

Give this a try, I have provided an example but make sure to customize the code based on your needs

function toggleView(){

    //add your script here
    //if you need to reload the page, add it in this section

}

function adjustDesign () {
var variable = 'example';
    $.ajax({
          url:'script.php',
          type: "POST",
          data: {"variable":variable},
          success: function(data){
              //execute actions after successful ajax call 
              toggleView(); //make sure to adjust the function call accordingly
          },error: function() { 
              console.log("error");
          } // This will be triggered every time there's an error
   });   
};

Answer 4

Give this a try, I have provided an example but make sure to customize the code based on your needs

function toggleView(){

    //add your script here
    //if you need to reload the page, add it in this section

}

function adjustDesign () {
var variable = 'example';
    $.ajax({
          url:'script.php',
          type: "POST",
          data: {"variable":variable},
          success: function(data){
              //execute actions after successful ajax call 
              toggleView(); //make sure to adjust the function call accordingly
          },error: function() { 
              console.log("error");
          } // This will be triggered every time there's an error
   });   
};

Tips for Running a Function Once an Ajax Request is Finished

Answer №1

Answer №2

Similar questions

Tips for setting up my ajax/views method to output a dictionary

Issues with Toggling Visibility in HTML, CSS, and Javascript

Having trouble running react-native on iOS?

All elements of the Jquery Accordian are receiving identical data appends

Having trouble updating the text in a div tag located above a specific button?

The subsequent menu selection will be based on the chosen menu value

Tips for displaying an alert in the upcoming event loop

Sending variable data through AJAX: A comprehensive guide

Creating your own unique CSS animation or transition timing function is a great way to add a

How to transfer input value from textbox to a div using Vue.js

How can I properly update a TimeStamp column in PostgreSQL using Node JS?

Enzyme 3 accesses the properties of the displayed DOM element

Enabling the jQuery auto-complete plugin for automatic submission

Resolving issues with JavaScript caused by Polymer updates

Using Jquery to target images within the viewport based on their class name

Guide to applying a class to a bar with jQuery

What causes an image background to take precedence over the background color of Bootstrap buttons?

There seems to be an issue with the functionality of flatlist and scrollView

When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to

Looping through an array of objects in VueJS can become a bit tricky when dealing with objects whose properties are dynamic. How can I efficiently