Hidden Control State Repopulating

Posted on 2012-04-09
Medium Priority
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 window.open 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 window.open 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 window.open 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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 window.location.search. 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 window.open 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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 1500 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

Industry Leaders: 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!

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…
Suggested Courses

764 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