Execute a second .click() event after the first is done

Question

I would like to "chain" two .click() calls but cannot get it to work. The code does work when I debug the JS code in my browser (so with a delay it seems to work)

I somehow need the first .click() to load the page (that's what the first event does) and only if that is done, I want the second .click() to execute.

My Code:

$.post("settings?type=mail&nr=" + nr, function(data){
    if(data != ""){
        alert(unescape(data));

        // First click event -> realoads the page
        $("#change_settings").click();

        // Second click event -> navigates to a tab
        // inside the page loaded by the first click event
        $("#tab_mail_header" + nr + "").click();
    }
});

EDIT: More Code

function load_change_settings_view(e){
    e.preventDefault();
    $("#content").empty();
    // load settings.jsp in a div (test) inside the mainpage
    $("#content").load("settings.jsp #test", function(){
        // In here are a couple of .click() & .submit() functions but nothing else
    });
});     


$("#change_settings").click(function(e){
    load_change_settings_view(e);
});

EDIT: I currently have this code:

$("#change_settings").click();
    window.setTimeout(function () {
        $("#tab_mail_header" + nr + "").click();
}, 1000);

I dont really like it though, as it is a timed delay and it may be the case (on a slow client) that that 1 second timeout will not be enough. I don't want to set the timeout too high as this slows down the workflow for users with a faster client...

I looked though a couple of post like these:

JQuery .done on a click event

Wait for a user event

How to wait till click inside function?

Wait for click event to complete

Does anyone have an idea on how to get this to work?

How do you "load the page"? Do you mean to load contents via ajax? Then you have to trigger your second event in the success callback function of your ajax call. — chrisbergr, Aug 10 '16 at 11:12
After the page reload is called nothing will get executed. Restructure your code to account for that. — Stack, Aug 10 '16 at 11:12
You have to past a _GET variable or something to the new page and there you can click on the tab you want using that param. — Victor, Aug 10 '16 at 11:23

score 1 · Accepted Answer · answered Aug 12 '16 at 13:23

after a few more attempts I ended up with the following solution:

Code Snippet#1

$.post("settings?type=mail&nr=" + nr, function(data){
    if(data != ""){
        alert(unescape(data));
        // create event object
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        // call method manually (not called by actual button click like its supposed to be)
        //   - pass event object
        //   - additional parameter to specify the tab the user is viewing
        load_change_settings_view(evt, "tab_mail_header" + nr);
    }
});

Code Snippet#2

function load_change_settings_view(e, p_tab){
    e.preventDefault();
    $("#content").empty();
    // load settings.jsp in a div (test) inside the mainpage
    $("#content").load("settings.jsp #test", function(){

        // Go to previous tab (if one was selected)
        var prev_tab = p_tab;
        if(typeof prev_tab != 'undefined'){
            $("#" + prev_tab).click();
        }
        // In here are a couple of .click() & .submit() functions but nothing else
    });
});

feel free to comment if you have a better idea on how to solve this problem or if you have any other suggestions

Execute a second .click() event after the first is done

1 Answers1