fire a function after triggering a click event

Question

How can fix this :

function Navigation(sender) {
    var senderID = sender.id;


    var answer = confirm("do you want to save your current layout ?");
    if (answer) {
        $("#loadingImg").css("display", "block");
        $("#<%=Button1.ClientID %>").click();
         //the next line is never fired
         if (senderID == "AboutClick") { setTimeout('ShowLoadingMsg()', 3000); } 

    }    
 }
function ShowLoadingMsg() {
   window.location="About.aspx";
}

<a href="javascript:void(0)" id="AboutClick" class="menu" onclick="Navigation(this);" >Navigate Click</a>
<asp:Button ID="Button1" runat="server" OnClick="btnSaveState_Click" style="display:none;" />

//Server side:

 protected void btnSaveState_Click(object sender, EventArgs e)
{

     SaveState();

}

The main problem is that this line is never fired what am i doing wrong here

Answer 1

The problem here is that $("#<%=Button1.ClientID %>").click(); causes the entire page to reload. It won't really matter what scripts you set a timeout for after that, since the page is refreshed anyway.

You could try putting Button1 inside an UpdatePanel , or just solve the problem in another way, such as saving state and redirecting in the same method.

Answer 2

Try this:

<a href="#" id="AboutClick" class="menu trigger">Navigate Click</a>​

-

$(function(){
    $(".trigger").click(function(){
        var answer = confirm("do you want to save your current layout ?");
        if (answer) {
            $("#loadingImg").show();
            if (this.id == "AboutClick") { setTimeout('ShowLoadingMsg()', 3000); }
            $("#<%=Button1.ClientID %>").click();
        }  
    })       
})

function ShowLoadingMsg() {
   window.location="About.aspx";
}

Demo here!