javascript - How to press a button after successful Ajax? - Stack Overflow

When Ajax call is successful, user gets redirected to main page:

$('#button_1').on('click', function () {
                //code
                $.ajax({
                    method: "POST",
                    url: "/somewhere",
                    data: {
                        //code
                    }
                }).done(function () {
                        location.href = "/";
                });    
            });

After getting redirected, I want to automatically click another button, which opens a modal. I tried inside done function different methods:

.done(function () {
    location.href = "/";
    $('#button_2').click(); // doesn't work 
 }); 

.done(function () {
    location.href = "/";
    setTimeout(function ()
        $('#button_2').click(); // doesn't execute  
    }, 2000);
 });

.done(function () {
    location.href = "/";
    $(document).ready( function () {
        // executes but user is immediately redirected to main page
        $('#button_2').click(); 
    });
 }); 

I also tried outside Ajax, in the function that Ajax call is in, but had the same results.

How can I click the button programmatically after the Ajax call?

When Ajax call is successful, user gets redirected to main page:

$('#button_1').on('click', function () {
                //code
                $.ajax({
                    method: "POST",
                    url: "/somewhere",
                    data: {
                        //code
                    }
                }).done(function () {
                        location.href = "/";
                });    
            });

After getting redirected, I want to automatically click another button, which opens a modal. I tried inside done function different methods:

.done(function () {
    location.href = "/";
    $('#button_2').click(); // doesn't work 
 }); 

.done(function () {
    location.href = "/";
    setTimeout(function ()
        $('#button_2').click(); // doesn't execute  
    }, 2000);
 });

.done(function () {
    location.href = "/";
    $(document).ready( function () {
        // executes but user is immediately redirected to main page
        $('#button_2').click(); 
    });
 }); 

I also tried outside Ajax, in the function that Ajax call is in, but had the same results.

How can I click the button programmatically after the Ajax call?

• javascript
• settimeout

Share Improve this question Follow asked Aug 1, 2017 at 8:22 SnowSnow 1,13833 gold badges2222 silver badges5454 bronze badges 8

• try the success: attribute in ajax – Rajan Chauhan Commented Aug 1, 2017 at 8:24
• is the $('#button_2') in the / page ? – Hamza Abdaoui Commented Aug 1, 2017 at 8:24
• If you redirect the user to another page, you can't do it in the first page. You have to do it on the second (redirected) page. – ADreNaLiNe-DJ Commented Aug 1, 2017 at 8:24
• 4 You'll have to put that click logic in the targetted page (at /) – trincot Commented Aug 1, 2017 at 8:24
• @Satpal yes, I tried that and .trigger('click'). They work, but then user is immediately redirected to main page. – Snow Commented Aug 1, 2017 at 8:26

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 5

You need to add that logic in the target (main) page.

Once you redirect, the current page is not longer the active one and all logic is removed.

You could add some parameter to the URL in order to know when you are there due to redirection, something like:

location.href="/?redirect=1"

and then check that parameter

The lines of code next to

location.href = "/";

will not be executed because the browser is navigating to another page.

So you should put your logic in the / page (#button_2 should be in that page).

You're currently trying to execute code after a redirect which isn't possible directly because the code after location.href = "/" will never be reached. Once you redirect you've have a fresh page with a clear state.

Your current function can still look like this:

$('#button_1').on('click', function () {
    $.ajax({
        method: "POST",
        url: "/somewhere",
        data: {
            //code
        }
    }).done(function () {
            location.href = "/?modal-open=1";
    });    
});

As you can see I've added a query parameter to the redirect so we know we were redirected with the intention to open the modal.

For your Root Page (/) you will need a script like this:

$(document).ready( function () {
    // check the URL for the modal-open parameter we've just added.
    if(location.search.indexOf('modal-open=1')>=0) {
        $('#button_2').click(); 
    }
});

This will check if the parameter is in the URL and trigger the click.

First of all when you redirect a new page you can not access DOM because the page is reloaded. You can send a parameter for do that.

$(document).ready( function () {

    //after page load

    var isButtonActive = findGetParameter("isButtonActive");
    if(isButtonActive){
        alert("button_2 activated");
        $('#button_2').click(); 
    }

    $('#button_1').on('click', function () {
        //code
        $.ajax({
            method: "POST",
            url: "/somewhere",
            data: {
                //code
            }
        }).done(function () {
            alert("page will be reload. button_2 wil be activated");
            location.href = "/?isButtonActive=true";
        });    
    });

    $('#button_2').on('click', function () {
        alert("button_2 clicked");
    });

});

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

Thank you for your answers. I researched a bit more and found another way to do it:

$('#button_1').on('click', function () {
                sessionStorage.setItem("reload", "true");
                //code
                $.ajax({
                    method: "POST",
                    url: "/somewhere",
                    data: {
                        //code
                    }
                }).done(function () {
                        location.reload();
                });    
            });

And in main page:

$(document).ready(function () {
        var reload = sessionStorage.getItem("reload");
        if (reload == "true") {
            $("#button_2").click();
            sessionStorage.setItem("reload", false);
        }
    });