Alert when browser window closed accidentally - javascript

I have a chat application, I want that whenever user accidentally or manually closes the browser ,he should get an alert so that various clean up operations could be carried out. I have more thing i itried to use on before event but I want that to be used for a particular web page as all other web pages are also called on before load. Please help

This is not really a JQuery thing, I use this functions:
function setConfirmUnload(on) {
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
return "Are you sure you want to leave this page";
}
Then, at any time you can call
setConfirmUnload(true) to enable the confirmation or false if you want to allow them to close the screen without a warning (if you have a close button for instance).

We should prevent or prompt user that on performing these actions he will lose his data.
Click on back browser button.
Click on refresh browser button.
Click on close button of browser.
Click of forward browser button.
Keyboard stroke- Alt+F4 (Close)
Keyboard stroke- F5 (Refresh)
Keyboard stroke-CTRL+ F5 (Refresh)
Keyboard stroke-Shift+ F5 (Refresh)
Change of url
Or anything that cause postback other than your particular submit button.
To explain that I have used two textboxes, one Asp.net submit button with id TestButton.
Other postback controls that I have taken are
One other asp.net button,one checkbox with autopostback property true,one dropdownlist with autopostback property true.
Now I have used all these postback controls so that to show you that we also need to show promt to user about the data lose when user perform actions on these controls.
On submit button we will not show the prompt as we have to submit the data with that control action.Here is the sample code.I have set window.onbeforeunload method on controls change.
<html >
<head id="Head1">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// Prevent accidental navigation away
$(':input').bind(
'change', function() { setConfirmUnload(true); });
$('.noprompt-required').click(
function() { setConfirmUnload(false); });
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return ('You have entered new data on this page. ' +
'If you navigate away from this page without ' +
'first saving your data, the changes will be lost.');
}
window.onerror = UnspecifiedErrorHandler;
function UnspecifiedErrorHandler()
{
return true;
}
});
</script>
</head>
<body>
<form id="form1" name="myForm" runat="server">
<div>
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<br />
<asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br />
<br />
<br />
<br />
<br />
<asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
/><br />
<br />
<asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
AutoPostBack="true" /><br />
<br />
DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
AutoPostBack="true">
<asp:ListItem Text="Text1"></asp:ListItem>
<asp:ListItem Text="Text2"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
</div>
</form>
</body>
Above I have used:
$('.noprompt-required').click(function() { setConfirmUnload(false); });
What I have done in this line is I am calling setConfirmUnload method and passing false as argument which will set the window.onbeforeunload to null.
So what that means is on any control where you want that user should not be prompted, give that control the class .noprompt-required and leave other as it is.

You can try the unload event:
$(window).unload( function () { alert("Bye now!"); } );
http://docs.jquery.com/Events/unload
I'm guessing this cleanup is on the client only. It would be interesting to know the nature of these "cleanups".

You may try this with ajax
$(window).unload( function () { alert("AJAX function to do required job"); } );

Related

Scroll to anchor multiple times using location.hash

I have a ASP.NET page using ValidationGroup. If the validation fails, I want the page to scroll to an anchor (#edit). Here is my code so far:
<div id="edit">This is my anchor area</div>
<div>
<asp:TextBox runat="server" ID="txtDescription" ValidationGroup="Edit" />
<asp:TextBox runat="server" ID="txtComment" ValidationGroup="Edit" />
<asp:Button runat="server" ID="btnSave" OnClick="btnSave_OnClick" OnClientClick="ValidatePage();" ValidationGroup="Edit" CausesValidation="True" />
</div>
<script type="text/javascript">
function ValidatePage() {
if (!Page_ClientValidate("Edit")) {
location.hash = "edit";
}
}
</script>
First time I click the button, the page scroll to the anchor (#edit) if validation fails. But, If I click the button again, the page does not scroll to the anchor.
How can this be fixed, so that the page allways scroll to the anchor if validation fails? Even if the button is allready clicked (#edit is in the url).

preventing autopostback when a checkbox is clicked

I have a check box and a continue button on my web page. If the user checks the checkbox then I want to do postback on the server otherwise I want to stay on the page:
<input data-theme="a" id="field_UseAdvancedSearch" type="checkbox" data-iconpos="left" runat="server" id="chkAgree" />
<asp:Button ID="btnContinue" runat="server" Text="Continue" data-icon="arrow-r" OnClick="btnContinue_Click" /></div>
If the user click on the continue button then I want them to go to next page otherwise they need to stay on the same page. I dont want any post back to occur when the continue button is clicked if the user does not check the check box or if the checkbox is not checked then continue button should be disabled.
Any help will be highly appreciated.
For that you should use OnClientClick attribute on conditional basis. So for this fix you should use jquery function inside <head> tag as follows :
<script>
function myFunction()
{
if ($('#field_UseAdvancedSearch').is(":checked")){
return true;
}
else if ($('#field_UseAdvancedSearch').is(":not(:checked)")){
return false;
}
}</script>
And call from your button as follows :
<asp:Button ID="btnContinue" runat="server" Text="Continue" data-icon="arrow-r" OnClick="btnContinue_Click" OnClientClick="myFunction();" />
Here We are checking if the checkbox is checked or not using jQuery and returns based on that if the checkbox is checked then the user able to postback button else user won't able to postback.
Hope this helps.

Calling javascript function from button hides FullCalendar in my ASP.net

I have an C# ASP.net website that is using FullCalendar (http://arshaw.com/fullcalendar/).
I want to grab all the calendar events and save them to my SQL database. I have added the following button which calls a javascript function:
<script type="text/javascript">
function save() {
alert('save');
//this will save to database...
}
</script>
<asp:Button ID="btnSave" runat="server" OnClientClick=" return save();" Text="Save" />
I notice that when I click the button the message appears but then the whole calendar just disappears from my page, why is this? and how can I prevent it.
It sounds like you're wanting to keep the page from submitting with this button. Adding return false; to your save() function will prevent the postback from occurring. If that is not right and you have a server-side click event for this button, in it, you will need to emit the javascript needed to recreate the calendar.
Use a HTML input button
<input type="button" id="btnSave" runat="server" Value="save" onclick="save()" />

How to disable submit button which caused post back on ASP.NET UpdatePanel

I have an UpdatePanel inside page with couple of buttons. Each button cause PostBack event. But I found that user can click multiple times in button and crash application. I want ot disable all buttons on first click until postback will be handled and new content of UpdatePanel arrived.
I tried to bind (via jquery) to 'click' event of button, set 'disabled; attribute and call 'submit' on parent form. Unfortunately is seems that this method not working - content of UpdatePanel still old.
After that I tried to override 'submit' event but faced another issue - how to submit form again if I came to my handler each time? It may be fixed with introducing flag variable, but I dislike it - another variable just increase code entropy.
Maybe I can do it somehow with ASP.NET methods?
Apply ajax UpdateProgress and put your code in UpdatePanel as to disable Button after first click:
<aspAtlas:UpdateProgress ID="upUpdatePanelProgress" runat="server" DisplayAfter="0"
DynamicLayout="true" AssociatedUpdatePanelID="updpnlProgram">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<img runat="server" id="img1" src="../Images/UpdateProgress.gif" alt="Loading..." /><br />
<br />
<b>Loading...</b>
</asp:Panel>
</ProgressTemplate>
</aspAtlas:UpdateProgress>
<aspAtlas:UpdatePanel runat="server" ID="updpnlProgram" UpdateMode="Conditional">
<ContentTemplate>
<div>
//--Your code in this div
</div>
</ContentTemplate>
<Triggers>
<aspAtlas:PostBackTrigger ControlID="Button_ID" />
</Triggers>
</aspAtlas:UpdatePanel>

How to prevent PostBack without using JavaScript?

I have an asp button in default.aspx:
<asp:Button ID="Button1" runat="server" Text="Button" />
And there is a procedure in default.aspx.vb:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Panel1.Controls.Add(New LiteralControl(Date.Now))
End Sub
And teacher asked me, how to make exactly same operation (when click on button, shows up a date) but without postback and without javascript code. I could make a java code there and use OnClientClick="return false" but it seems not right
Refer The Client Side of ASP.Net Pages
You can't do. The default behaviour of Button(input type=submit) is to submit/post the form to the url specified in the form's action attribute.
If you want to prevent default behaviour you need to write a javascript return false
<asp:Button ID="btn" OnClientClick="return false" runat="server" Text="Button" />
By Default asp.net post the form to the same page itself. We say this as PostBack. See the form tags action value from rendered html in browser , it will be the same page name
<input type =submit name ="btn" id="btn"
onclick="javascript:__doPostBack('btn','')"value ="Button">
The following built in javascript code does this
<script>
function __doPostBack(eventTarget, eventArgument) {
document.Form1.__EVENTTARGET.value = eventTarget;
document.Form1.__EVENTARGUMENT.value = eventArgument;
document.Form1.submit();
}
</script>
Your page will have the below fields added automatically, inorder to detect which event needs to be fired in server side. you can access simply in a request parameters like Request.Params["__EVENTTARGET"]
<input type =hidden name ="__EVENTTARGET" value ="">
<input type =hidden name ="__EVENTARGUMENT" value ="">

Categories