ASP.NET linkbutton raising onBeforeUnload event twice - asp.net

I've posted this here, but thought it might deserve a question on its own.
What I'm trying to do is show a dialog box that asks the user if he/she wants to leave the page if there are unsaved changes. That all works fine. But the problem is described below:
Has anyone come across the problem where Internet Explorer fires the onbeforeunload event twice? While Googling around, I found it has something to do with the fact that for (among others) an ASP.NET linkbutton the HTML code is <a href="javascript: __doPostBack....
Apparently, when IE encouters a link that doesn't have a href="#", it fires the onbeforeunload event. Then, when you confirm the javascript dialog box we're showing, the page will do the 'real' unload to navigate to the other page, and raise the onbeforeunload event a second time.
A solution offered on the internet is to set a boolean variable and check on it before showing the dialog. So the second time, it wouldn't be shown. That's all well, but when the user cancels, the variable will still be set. So the next time the user wants to leave the page, the dialog won't be shown anymore.
Hope this is a little clear, and I hope someone has found a way around this?

In reaction to annakata: Yes, but you want the result of the dialog box to be used by the browser. So you might think using 'return bFlag' would do the trick (or event.returnValue = bFlag), but that gives you a second dialog box.
I've found a way around, thanks to this page. It's quite simple actually:
var onBeforeUnloadFired = false;
Use this global variable here:
if (!onBeforeUnloadFired) {
onBeforeUnloadFired = true;
event.returnValue = "You'll lose changes!";
}
window.setTimeout("ResetOnBeforeUnloadFired()", 1000);
And then implement that function:
function ResetOnBeforeUnloadFired() {
onBeforeUnloadFired = false;
}
So, in effect, use the flag, but reset it if the user clicks cancel. Not entirely what I would like, but haven't found anything better.

I haven't encountered this, but surely you could set the flag variable to be equal to the result of the dialog? If the user cancels the flag will therefore remain false.
var bFlag = window.confirm('Do you want to leave this page?');

IE supports an event on the document object called onstop. This event fires after the onbeforeunload event, but before the onunload event. This isn't exactly pertinent to your two dialogs question, but its still relevant to other people that might stumble on this thread ( as I did ).
The problem I was having, was that I needed to display a loading message upon the onbeforeunload event firing. This is all fine until the page has some sort of confirm dialog on it. The onbeforeunload event fires even if the user cancel's and remains on the page. The easiest thing for me to do was to move my "loading" display logic into a handler for document.onstop. On top of this, you have to check the readyState property of the document object, which is another IE-only field. If its "loading", it means the user is actually leaving the page. If its "complete", it means the user is staying.
If you are fine with just using IE, then you might be interested in the following.
document.onstop = function()
{
try
{
if( document.readyState != "complete" )
{
showLoadingDiv();
}
}
catch( error )
{
handleError( error );
}
}

Related

Keep "Connect to QuickBooks" button from popping a new window

When implementing the "Connect to QuickBooks" button in my web application I found that it pops a new window instead of just being redirected, which is very undesired in the long run of this application. Is there any way to keep the button from popping a new window and just redirect in the same tab? Or would that go against Inuit's Do's and Don'ts (1. Don't modify the appearance or behavior of this button. 2. Don't modify the code that implements this button.)
I'm assuming the command to pop a new window is in Intuit's JavaScript anywhere() function but I didn't know if there was a way to prevent it from popping a new window and just make it use the same tab, without changing their code.
Or, if there really isn't anything would it be possible to close the popped up window automatically and resume control of the previously used tab? I tried to look this solution up but didn't find anything really, or at least nothing that worked for me.
Thanks for any help.
EDIT:
I figured out how to close the the window...now it's just a matter of handling the refreshing the page it goes back to to something. I haven't quite figured out how it works yet but I ended up using:
<script type="text/javascript">
try {
var parentlocation = window.parent.opener.location.hostname;
var currentlocation = window.location.hostname;
if (parentlocation != currentlocation) {
window.location = "/default.aspx";
}
else {
window.opener.location.href = window.opener.location.href;
window.close();
}
}
catch (e) {
window.location = "/default.aspx";
}
</script>
If someone wouldn't mind explaining that code that would be awesome, but nobody has to. I just can't right now so I'll do it later on my own.
I found that it pops a new window instead of just being redirected,
Yep, this is what Intuit wants it to do.
Is there any way to keep the button from popping a new window and just
redirect in the same tab?
Nope.
Trying to do that is a great way to get Intuit to ban your application/remove it from AppCenter.
Or, if there really isn't anything would it be possible to close the
popped up window automatically and resume control of the previously
used tab?
Of course. In fact, you'll have to if you want to publish on AppCenter.
Simple Javascript - window.close();
Keep in mind that this window only has to be opened once and then never again. It's not like this is going to be a huge inconvenience to your users when they'll only need to do this once in the entire history of ever using your application.

Prompt to save data if and when changes have been made

I am using asp.net and I need to display a prompt to the user if they have made changes to the web page, and they accidentally close down the browser.
The page could be anything from "Edit Profile" to a "Submit a Claim" etc.
How can I can display the messagebox, ensuring that it is displayed only if changes have been made (as opposed to, the user making changes, then undo-ing the changes, and shutting down the browser)
What I have done in the past is use some client side scripting which does this check during the onbeforeunload event....
var showPrompt=true;
var isDirty=false;
var hidePopup=false;
function onBeforeUnload() {
if (showPrompt) {
if (isDirty) {
if (hidePopup || confirm("Click ok to save your changes or click cancel to discard your changes.")) {
doSave();
}
}
}
showPrompt = true;
hidePopup = false;
}
ShowPrompt can be set to false when your clicking on an anchor tag which won't navigate you away from the page. For example <a onclick='showPrompt=false' href='javascript:doX()'/>
isDirty can be used to track when you need to save something. You could for example do something like $("input").onchange(function(){isDirty=true;}); To track undo's you might want to replace isDirty with a function which checks the current state from the last saved state.
HidePopup lets us force a save without confirming to the user.
That's very difficult to even touch without understanding what's on the page. If it's a few controls you capture value at page load and store them so you can later compare. If it's a complex page you'd need to do an exact comparison to the entire viewstate.
Typically you'd handle this type of situation by setting a boolean to TRUE the first time any change is made and disregard the user changing it back. If you're just trying to avoid accidential non-save of data the user should be smart enough to know they've "undone" their changes.
You can do this with javascript. See this question and either of the first two answers.

Sys.Application.add_load Problem with Modal popup extender

I have the current problem, let's explain the context before :
I have a Modal popup extender who contains a form. There is a feature "Save and Add New", when the user click on this button the data in the form is saved in the database during postback and the page is reloaded.
I want this Modal popup to appear again on the page_load allowing the user to enter new data without clicking again on the button who show this Modal Popup.
I've tried to call it this way first :
ClientScript.RegisterStartupScript(Page.GetType(), "ModalPopup", "ShowModalPopup(""" & Me.formModalButton.ID & """);", True)
but the problem was when the function was called my Modal Popup was not existing yet on the page. Because of that the code was crashing on the
var modal = $find('myModal');
So, I found that other way and it's working almost perfectly.
ClientScript.RegisterStartupScript(Page.GetType(), "ModalPopup", "Sys.Application.add_load(function() {ShowModalPopup(""" & Me.formModalButton.ID & """)};", True)
The modal is showing up on the page load like I want, but the problem is if I click on any other button on my page the Modal Popup is also appearing again.
Example : I have another Modal Popup for deleting data, when I click on the button, both Modal are appearing, which is not cool.
Does anyone have a clue about how to fix that or a better way to do it ?
P.S. I'm not calling to Modal popup server-side because the javascript function exist in the page, so I don't want to create a copy of this function in the RegisterStartupScript.
Thx for your time.
Use the below code snippet
//Declares gloabal variable
ClientScript.RegisterStartupScript(Page.GetType(),"vardeclaration","var reloadModal;",true);
ClientScript.RegisterStartupScript(Page.GetType(), "ModalPopup", "Sys.Application.add_load(
function()
{
reloadModal = function() {ShowAddModalPopup(""" & Me.imgAdd.ID & """);};
Sys.Application.add_init(reloadModal);
}
);", True)
This would allow you to use
function cancelClick()
{
Sys.application.remove_init(reloadModal);
}
Finally I found a workaround for my current problem.
I'm still using the ClientScript.Resgister[...] but this time I also change the OnClientClick Javascript function of my cancel button.
So when the guy select the feature "Save and Add New", when the page reload and the modal Show again if he click on Cancel I do a postback to the server just to reload the page and solve those weird behavior.
I also think, the problem could exist because of the different Update Panel in my code, but I need them to make the Modal Popup Extender working.
Anyway, I discovert that's it's not even working in Opera and Safari, but the Whole thing (Ajax Control toolkit - Modal popup extender).
It's a chance the compagny here don't care about the other and support officially only IE. In my case, I wanna make it works at least in FF and Chrome too.
ClientScript.RegisterStartupScript(Page.GetType(), "ModalPopup", "Sys.Application.add_load(function() {ShowAddModalPopup(""" & Me.imgAdd.ID & """)});", True)
btnCancel.OnClientClick = "resetDefaultValue();__doPostBack('" & btnCancel.ID & "','onclick')"
So there is the code, also in FF another error appear,
Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 0
And I found this workarounf for it, it's not the best but I lost enought time with this...
ClientScript.RegisterStartupScript(Page.GetType(), "WorkAroundFF", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest); function endRequest(sender, args) { /* Check to see if there's an error on this request.*/ if (args.get_error() != undefined) { $get('Error').style.visibility = ""visible""; /* Let the framework know that the error is handled, so it doesn't throw the JavaScript*/ alert. args.set_errorHandled(true); } }", True)
So thx for your help Ramesh, i'm pretty sure your solution would work if it was not my Update Panels.
Hope that could help someone else.

does showModalDialog interfere with ClientScript.RegisterStartupScript?

I'm showing a modal dialog via "window.showModalDialog(..." which happens in a vbscript function (the page shown is aspx). I'd like to do some resizing of the window based on the number of rows in a datatable that's coming back. So naturally I go to register a startup script that resizes the window based on the number of rows. Well, that didn't work, so I tried to register a script that just showed a msgbox.
The code looks like (in the OnLoad event handler):
if (!this.ClientScript.IsStartupScriptRegistered(typeof(MyPageClassName), "hello"))
{
this.ClientScript.RegisterStartupScript(typeof(MyPageClassName), "hello",
#"<script language=vbscript>
sub fnWindowOnLoad()
MsgBox ""hello""
end sub
<script>", false);
}
if (!this.ClientScript.IsStartupScriptRegistered(typeof(MyPageClassName), "hello"))
{
throw new Exception("Failed to load script");
}
To me it looks like this should work and show a message box that says "hello" when the page loads (I've got the window's onload event set to fnWindowOnLoad). But what happens is nothing, no exception, no alert. I've tried every Type I could think of in the typeof call. Nothing seems to work. The only thing I can think of is that since the dialog is a modal ClientScript.RegisterStartupScript won't run properly. But that doesn't make any sense to me.
I put the MsgBox "hello" call into my script block directly and the alert showed, so it's possible. But I need to modify some arguments in the code behind so I have to use RegisterStartupScript as far as I can tell.
Have you tried opening your window via window.open() rather than window.showModalDialog()? I've seen some postings on the web about incompatibilities between showModalDialog() and RegisterStartupScript.
showModalDialog() is an IE only method, so it's not recommended anyway. I know it's convenient because it returns a value, but there are various ways to simulate this functionality.
Edit: The other problem with showModalDialog() is that IE often caches the results. This means that if one time you calling the dialog, you do not resize it, then another time you do, then 2nd time might get your the first cached dialog. A way to get around this is to add a unique querystring at the end. Like MyDialog.aspx?q=320934 (randomly generated or generated based on server tics).
The solution for this was to have a script that read a value out of a hidden field and then resized the dialog. The value was set on the Page_Load. Using RegisterStartupScript never seemed to work, neither did RegisterClientScript, so I'm pretty sure modal dialog and RegisterXxx don't get along. Need to use window.dialogHeight & window.dialogWidth in the vbscript.

Setting Focus with ASP.NET AJAX Control Toolkit

I'm using the AutoComplete control from the ASP.NET AJAX Control Toolkit and I'm experiencing an issue where the AutoComplete does not populate when I set the focus to the assigned textbox.
I've tried setting the focus in the Page_Load, Page_PreRender, and Page_Init events and the focus is set properly but the AutoComplete does not work. If I don't set the focus, everything works fine but I'd like to set it so the users don't have that extra click.
Is there a special place I need to set the focus or something else I need to do to make this work? Thanks.
We had exactly the same problem. What we had to do is write a script at the bottom of the page that quickly blurs then refocuses to the textbox. You can have a look at the (terribly hacky) solution here: http://www.drive.com.au
The textbox id is MainSearchBox_SearchTextBox. Have a look at about line 586 & you can see where I'm wiring up all the events (I'm actually using prototype for this bit.
Basically on the focus event of the textbox I set a global var called textBoxHasFocus to true and on the blur event I set it to false. The on the load event of the page I call this script:
if (textBoxHasFocus) {
$get("MainSearchBox_SearchTextBox").blur();
$get("MainSearchBox_SearchTextBox").focus();
}
This resets the textbox. It's really dodgy, but it's the only solution I could find
this is waste , its simple
this is what you need to do
controlId.focus(); in C#
controlID.focus() in VB
place this in page load or button_click section
eg. panel1.focus(); if panel1 has model popup extender attached to it, then we put this code in page load section
How are you setting focus? I haven't tried the specific scenario you've suggested, but here's how I set focus to my controls:
Public Sub SetFocus(ByVal ctrl As Control)
Dim sb As New System.Text.StringBuilder
Dim p As Control
p = ctrl.Parent
While (Not (p.GetType() Is GetType(System.Web.UI.HtmlControls.HtmlForm)))
p = p.Parent
End While
With sb
.Append("<script language='JavaScript'>")
.Append("function SetFocus()")
.Append("{")
.Append("document.")
.Append(p.ClientID)
.Append("['")
.Append(ctrl.UniqueID)
.Append("'].focus();")
.Append("}")
.Append("window.onload = SetFocus;")
.Append("")
.Append("</script")
.Append(">")
End With
ctrl.Page.RegisterClientScriptBlock("SetFocus", sb.ToString())
End Sub
So, I'm not sure what method you're using, but if it's different than mine, give that a shot and see if you still have a problem or not.
What I normally do is register a clientside script to run the below setFocusTimeout method from my codebehind method. When this runs, it waits some small amount of time and then calls the method that actually sets focus (setFocus). It's terribly hackish, but it seems you have to go a route like this to stop AJAX from stealing your focus.
function setFocusTimeout(controlID) {
focusControlID = controlID;
setTimeout("setFocus(focusControlID)", 100);
}
function setFocus() {
document.getElementById(focusControlID).focus();
}
I found the answers from Glenn Slaven and from Kris/Alex to get me closer to a solution to my particular problem with setting focus on an ASP.NET TextBox control that had an AutoCompleteExtender attached. The document.getElementById(focusControlID).focus() kept throwing a javascript error that implied document.getElementById was returning a null object. The focusControlID variable was returning the correct runtime ClientID value for the TextBox control. But for whatever reason, the document.getElementById function didn't like it.
My solution was to throw jQuery into the mix, as I was already using it to paint the background of any control that had focus, plus forcing the Enter key to tab through the form instead of firing a postback.
My setFocus function ended up looking like this:
function setFocus(focusControlID) {
$('#' + focusControlID).blur();
$('#' + focusControlID).focus();
}
This got rid of the javascript runtime error, put focus on the desired TextBox control, and placed the cursor within the control as well. Without first blurring then focusing, the control would be highlighted as if it had focus, but the cursor would not be sitting in the control yet. The user would still have to click inside the control to begin editing, which would be an UX annoyance.
I also had to increase the timeout from 100 to 300. Your mileage my vary...
I agree with everyone that this is a hack. But from the end-user's perspective, they don't see this code. The hack for them is if they have to manually click inside the control instead of just being automatically placed inside the control already and typing the first few letters to trigger the auto lookup functionality. So, hats off to all who provided their hacks.
I hope this is helpful to someone else.

Resources