[CLOSED] How to use the History control?

Hi,

I'm trying to mimic the behavior of "blocking" the use of the browser "Back" button. When the user attempts to navigate backwards, a prompt should be presented and page location remain the same. The prompt should not fire when the page initially loads, which is the problem of the code sample below. It seems that the call to suspend events on the History control has no bearing on it so when the token is sent, the change event always fires. Please suggest how to fix it.

Code:

<%@ Page Language="C#" AutoEventWireup="true" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" /> <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" /> <script type="text/javascript"> var onDocumentReady = function () { History1.suspendEvents(false); History1.add("Main"); History1.resumeEvents(); }; var blockBackButton = function () { History1.add("Main"); Ext.Msg.alert("Alert", "Back button is disabled!"); }; </script> </head> <body> <ext:ResourceManager runat="server"> <Listeners> <DocumentReady Fn="onDocumentReady" /> </Listeners> </ext:ResourceManager> <form id="form1" runat="server"> <ext:History ID="History1" runat="server"> <Listeners> <Change Fn="blockBackButton" /> </Listeners> </ext:History> </form> </body> </html>

Hello Vadym!

Sorry for the delay in the reply! Did you know about this thread with a sample handling this issue: Back-button. It can prove very useful.

Actually your example didn't work to me at all, and maybe you can't get the behavior you want simply because there Fn= property to the DocumentReady listener does not work.

As the thread pointed above, use Handler="onDocumentReady()", with the parenthesis in the end and all.

With just that change though, you get your unwanted behavior. Apparently by removing your lines 12 and 14 solves the problem. But you probably added them there for a reason I just don't realize. Can you get rid of those lines, or are they required?

Hope this helps!!

Hi Fabricio,

The example should work as it is with the DocumentReady Fn handler. Please get the latest version of the $\branches\1\Ext.Net\Core\ResourceManager\Resource Manager.cs file from the code repository that contains Bug# 916 fix.
Yes, I've checked the thread you've referenced. It actually produces the behavior that I'd like to avoid, which is firing the History control "change" event on page load. I've tried to suspend its events in my original code snippet to no avail. The desired behavior is for the page to load normally with no warning message. Then, when the user attempts to go back in the history, there supposed to be a prompt. The following code snippet is the slightly modified code sample from Back-button

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Ext.NET Example</title> <script type="text/javascript"> var blockBackButton = function () { History1.add("empty"); Ext.Msg.alert("Alert", "Back button is disabled!"); }; </script> </head> <body> <form id="Form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server"> <Listeners> <DocumentReady Handler="blockBackButton();" /> </Listeners> </ext:ResourceManager> <ext:History ID="History1" runat="server" > <Listeners> <Change Fn="blockBackButton" /> </Listeners> </ext:History> Try to "Back" </form> </body> </html>

Hello @vadym.f!

It is not firing the dialog box to me on first load, probably because I miss that change (and maybe other side effects) you are talking about. I will double check it and return to you with an update.

On a second thought, somehow I didn't reproduce the dialog on first load, probably because I already had the "#Main" in the address bar when I refreshed the page.

There's a very simple approach you can use to ignore the change event during the first page's load, and that would be this:

Code:

loaded = false; var blockBackButton = function () { if (!loaded) { loaded = true; return; } History1.add("Main"); Ext.Msg.alert("Alert", "Back button is disabled!"); };

Because the change on history during documentReady should really trigger the history change event. I didn't really dig deep on that but probably you'd have to override methods or something more complex while this simple approach could just do it the way you require it to.

I hope this helps!

Hi Fabricio,

Using your suggestion, the token never has a chance to be added to the history and the change event won't fire. Am I following you correctly here? Please give it a run.

Code:

<%@ Page Language="C#" AutoEventWireup="true" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" /> <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" /> <script type="text/javascript"> var onDocumentReady = function () { blockBackButton(); }; var loaded = false; var blockBackButton = function () { if (!loaded) { loaded = true; return; } History1.add("Main"); Ext.Msg.alert("Alert", "Back button is disabled!"); }; </script> </head> <body> <ext:ResourceManager runat="server"> <Listeners> <DocumentReady Fn="onDocumentReady" /> </Listeners> </ext:ResourceManager> <form id="form1" runat="server"> <ext:History ID="History1" runat="server"> <Listeners> <Change Fn="blockBackButton" /> </Listeners> </ext:History> </form> </body> </html>

Hello @vadym.f!

Sorry, I didn't mean you to change the onDocumentReady() to call blockBackFunction(). Just remove the event mangling lines (12 and 14 on your first code sample).

It would be like this:

Code:

var onDocumentReady = function () { History1.add("Main"); };

Well, to avoid more misunderstandings, have the full "working" code:

Code:

<%@ Page Language="C#" AutoEventWireup="true" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" /> <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" /> <script type="text/javascript"> var onDocumentReady = function () { History1.add("Main"); }; loaded = false; var blockBackButton = function () { if (!loaded) { loaded = true; return; } History1.add("Main"); Ext.Msg.alert("Alert", "Back button is disabled!"); }; </script> </head> <body> <ext:ResourceManager runat="server"> <Listeners> <DocumentReady Handler="onDocumentReady()" /> </Listeners> </ext:ResourceManager> <form id="form1" runat="server"> <a href="60786-historyMangle.aspx">Move forward</a> <ext:History ID="History1" runat="server"> <Listeners> <Change Fn="blockBackButton" /> </Listeners> </ext:History> </form> </body> </html>

Worked fine here, at least. Notice, as you have the Fn= fixed on your version, you don't need to change your version's <DocumentReady /> line at all!

Thanks, Fabricio, your code sample works as expected. It breaks in my setup having a TabPanel AutoLoad in IFrame mode when a tab gets closed. Then, I'm able to navigate backwards without getting prompted. I haven't yet been able to reproduce it with a simple test case though. You may close down this thread.

Hello @vadym.f!

To solve the intra-iframe problem I think that you can tinker with the Iframe Communication example. That is, from the iframe it can run the script to mangle browser history from the outer iframe.

But well, feel free to open a new thread with the iframe issue if you can give it further explanation (probably with sample code) and we'll gladly do our best to help!