Alkahna Alkahna - 3 months ago 10
Javascript Question

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

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?

Answer

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