Hidden Control State Repopulating

Posted on 2012-04-09
Last Modified: 2012-05-02
I have  built a front-end ASP.NET page that accepts a technical question from the user and returns matching help topics.  Following help topic retrieval, the user may opt to open a chat window if a satisfactory answer was not found.  The chat function is hosted on another server and is accessed through a new window opened on top of the front-end page using a JavaScript command.  This command includes window size and positioning and a number of querystring parameters.  It is constructed server-side and added to a hidden field.  A client-side JavaScript function executes on page load, checks to see if the command is in the hidden field and, if so, executes the command using a JavaScript eval command.  Immediately following the command execution the hidden field is cleared.  See the attached sequence diagram for more information.  There are a number of AJAX panels on the page but the hidden control is not on any of them.

This is working well except for one tiny detail.  If the user refreshes the page (pushes F5 or <Ctrl>+F5) after returning to the front-end page upon closing the chat window, the chat window is opened again.  This is due to the state of the hidden field.  For some reason, even though the last thing done by the page load script is to clear the hidden field, the command is magically back in it when focus returns to the page.  Can anyone tell me why this is happening?

Thanks in advance!
Question by:Murfmon
  • 5
  • 4
LVL 38

Expert Comment

by:Tom Beck
ID: 37827158
From your description, I would say that the hidden field is being repopulated server side when the user refreshes the front-end page. You are clearing the hidden field on the client side but the server does not know you are done with it, it's just re-loading the last request, which was to populate the hidden field. In a case like that you could use a query string in the url to tell the server when to populate the hidden field and when not to. Maybe ?chat=1 and ?chat=0 to communicate "open" or "close" to the server. When you clear the hidden field client side after the chat window is closed, also adjust the query so the server knows what's happening using On the server side of course, check for the value in the query string before populating the hidden field.

On second thought, the simpler approach would be to always have a value in the hidden field that communicates the chat window status to the server. Change the value client side as needed. The server checks the message in the hidden field before populating it with the pop up window script. Hidden field default value = "no chat". Hidden field open chat value = "open chat". The server checks these values before acting.

Author Comment

ID: 37833979
Unfortunately, populating the hidden field with a value of "NoChat" in the JavaScript that executes the chat does not help.  The value of the hidden field when it hits the server-side is a zero-length string.  Another curious thing:  When the page is refreshed after viewing the chat, the event handler for the "Initiate Chat" button is fired again.  I am certain the exact same POST is happening on refresh that happened on the last POST (i.e. chat is initiated).  Why is the button event firing instead of the page reloading as it did on the first (non-postback) pass?  I'm afraid I just don't have a clear enough understanding of the mechanics at work under the hood.
LVL 38

Expert Comment

by:Tom Beck
ID: 37834458
You are not telling the server to NOT populate the hidden field, so it will on the refresh. Http is a "stateless" protocol. Once the server has fulfilled the last request, it is ignorant of what is going on at the client. You need to say how you want the UI built each time you make a request to the server or it will build it the same as it did the last time. You are in charge of maintaining "state". See if my additions to your diagram will help clear things up.Chat diagram
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 38

Expert Comment

by:Tom Beck
ID: 37834706
And here is what I am suggesting.Chat Window

Author Comment

ID: 37852840
tommyBoy, I revised the page and code-behind as you suggested above (see attached file for partial code).  Still no joy.  On refresh after the chat window has been closed the hfChatStatus value is still set to "Chat" when it clearly (as far as I can see) should be set to "NoChat".  Please take a look and see if you can see where I'm going astray here.

LVL 38

Expert Comment

by:Tom Beck
ID: 37854144
If you put in the missing equal sign in this conditional, it will not fire thus preventing the chat window from loading again after the chat window is closed and the user clicks reload on the page.

if (document.getElementById('<%=hfChatState.ClientID %>').value == 'Chat') {

However, realize that this statement in your button click handler never fires in that same scenario because the old value of "Chat" is retained on the server side in a reload scenario. That means the open window script will populate the hfChatScriopt field. The chat window does not open because the value of "NoChat" is held on the client side. Only when the page is submitted in the usual way will the new value of "NoChat" in the hidden field be carried back to the server.

                // check for button click caused by screen refresh
                if (this.hfChatState.Value == "NoChat")

Author Comment

ID: 37855515
Thanks for your comments and for pointing out the error regarding the single "=" sign in the pageLoad() function.  Actually, the single "=" causes the following lines to be executed every time because an assignment action always returns true.  This was not a problem as the hfchatScript value is empty when nothing is to be executed but thanks for pointing it out.

It is your second point that is more relevant.  The value of NoChat in the hidden field does not transmit to the server except in a normal postback.  This has been the problem all along.  I am now out of time for diagnosis of this issue and will mark it closed.  However, I would appreciate a brief explanation of WHY this happens if you feel so inclined.  Obviously my understanding of the postback and refresh process is incomplete.

Thanks very much for your help with this issue.
LVL 38

Accepted Solution

Tom Beck earned 500 total points
ID: 37855578
A reload of a page is NOT the same as a form submit. On a form submit, values from controls on the page are added to the post data and returned to the server. On a page reload, form values from the previous loading of the page are returned. Browsers like Firefox say this in a message box upon reload:

"To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier."

On your first point, it does not matter if hfChatScript is populated with the script or not as long as the conditional is working properly (syntax corrected). The chat window will only load if hfChatState == "Chat". In fact, you could load the script into hfChatScript on every page load and just use the hfChatState to determine whether to display the chat window or not.

Author Closing Comment

ID: 37919125
Thanks very much for your explanation.  it helped my understanding of the process.

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Triple line in an alert message 4 24 web app 3 27
disable open new tab with right mouse click in <a> tag 3 20
HTML editor custom button 3 60
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question