Button click event not firing from javascript

Question

I need to do a postback and save the data in the screen to session when the screen is closed, for this i am using the onBeforeUnload event, and placed a hidden button in the screen. In the on before unload event I am calling the click event to call the button server event. But the event is not firing. Is anything I am missing here.

<asp:Button Style="display: none" runat="server" ID="btnHidUpdate" OnClick="btnHidUpdate_Click" />
<script type="text/javascript">
 $(document).ready(function () {
 window.onbeforeunload = updateSessionBeforeUnload; 
 });
</script>

In .js file:

function updateSessionBeforeUnload() {
 var hidUpdate = $('[id$="btnHidUpdate"]')[0];
 hidUpdate.click();
}

In .cs code behind:

protected void btnHidUpdate_Click(object sender, EventArgs e)
{
 UpdateSession();
}

• tranceporter: Stupid question, but have you included the .js file in your inline code, which contains the updateSessionBeforeUnload function? <script language="javascript" src="file.js" type="text/javascript"> </script>
• shahkalpesh: Please take a look at the html source in the browser. Is the id of the button "btnHidUpdate"? IIRC, asp.net changes the ID. Also, I don't think this is how you can call the method on the server from the client.
• Tim B James: also have you included jquery?
• ARV: I have included the .js file also jqueary, other thing that i just found, when i add a new code like say calling a var hid = $('[id$="hid"]')[0]; after the click call the event starts firing, but this does not work from a client machine.
• Mark Broadhurst: Unfortunately the click event is created as an async call meaning that it will call click and then leave the page. probably before it has chance to execute the click handler.

Answer 1

The problem is that the page loads the next page before it can execute the button click.

Use the Jquery Unload event e.g.

$(function(){
 $(window).unload(function(){
 // put synchronous code here to persist what you need.
 });
});

You can use an Ajax event like Yuriy says however you must set async to false like this:

 $.ajax({
 type: "POST",
 url: "Url/To/Persistance",
 dataType: "json",
 data : { "data" : "to be persisted"},
 async: false
 });

EDIT I would avoid the click event all together and do something like this:

$(function(){
 $(window).unload(function(event){
 var hidUpdate = $('[id$="btnHidUpdate"]')[0];
 __doPostBack(hidUpdate.attr('id'),'');
 });
});

However if you must click the button try this

$(function(){
 $(window).unload(function(event){
 var hidUpdate = $('[id$="btnHidUpdate"]')[0];
 hidUpdate.click()
 alert(
 "Default: " + event.isDefaultPrevented() + "\n" + 
 "ImedPropStopped: " + event.isImmediatePropagationStopped() + "\n" + 
 "PropStopped: " + event.isPropagationStopped()
 );
 });
});

And tell us what the alert says ?

• ARV: Using, the unload, does fire the click event, but page navigation does not occur, any idea why this would be a problem, if i remove the click call navigation works fine.
• Mark Broadhurst: I haven't tried calling the click on the unload, I would have thought that you would have the same result (async clicking the button). I've updated my answer with an alternate way of doing and and if not a debug to tell us what is stopping it.
• Mark Broadhurst: Additional info here on __doPostBack evagoras.com/2011/02/10/how-postback-works-in-asp-net
• ARV: The event.isDefaultPrevented() function and other function is not available in event, also the _doPostBack does not do the navigation.
• Mark Broadhurst: let us continue this discussion in chat

Answer 2

I think the other suggestions here should work fine. I have another suggestion which you can try, and is to use GetPostBackEventReference. You can see details about it here: http://msdn.microsoft.com/en-us/library/aa720417(v=vs.71).aspx

Answer 3

You can use jquery trigger("click") function which will call the click event on the button.

Answer 4

In my opinion the problem is that onbeforeunload event handler intended to ask user for confirmation when he want to leave a page. And since updateSessionBeforeUnload method doesn't returns any question string, unloading process continues immediately after this method leaves.

If you can make UpdateSession method static you can call it asynchronously with async jQuery.ajax method call:

<script type="text/javascript">
 window.onbeforeunload = foobar;
 function foobar() {
 $.ajax({
 type: "POST",
 url: "WebForm2.aspx/UpdateSession",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 async: true
 });
 }
</script>
[WebMethod]
public static void UpdateSession()
{
}

• ARV: I cannot make the method static as in the metod i am updating the session from taking the data from the control, which are not accessible in a static method.
• IUnknown: What type of control? Can you get value of this control on client?
• ARV: The page has many control and unsercontrols data from which I have to save in session, getting all the values in client would be difficult