www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: How to refresh page after clicking "Back" button??

  1. #1
    Join Date
    Oct 2006
    Posts
    26

    How to refresh page after clicking "Back" button??

    I have a page that is dynamically build through DOM manipulation. So, when I browse outside the page, and then click back, those dynamically created DOM objects are gone. I can rebuild the page easily. So the point is that if the user leaves the dynamic page, then clicks back on their browser, I need the page they are going back to to refresh. I can not figure this out. BTW, I thought it might be something about caching, so I've tried to use all following 3 META tags but it doesn't work.
    Code:
    <meta http-equiv="Pragma" content="no-cache">
    	<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    	<META HTTP-EQUIV="Expires" CONTENT="-1">
    Please help....Thank you so much

  2. #2
    Join Date
    Nov 2005
    Posts
    170
    I don't understand....You said when you go back...you lose all the DOM objects (which presumably means the page has been refreshed?)

    So, what are you trying to do?

  3. #3
    Join Date
    Oct 2006
    Posts
    26
    for example, I dynamically add an new line in page A, then browse outside the page. When I click back to go back to page A, the newly added line is gone. but when I click refresh, the line will appear. So the point is how to force refresh the page A after back button hit. Thanks.

  4. #4
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.

    If you don't care about rebuilding the page and want to actually reload it, then you could do:
    Code:
    <input type="hidden" id="refreshed" value="no">
    <script type="text/javascript">
    onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
    }
    </script>
    Last edited by Ultimater; 02-07-2007 at 11:37 AM.

  5. #5
    Join Date
    Oct 2006
    Posts
    26
    Thank you, Ultimater. Your code does exactly what I need. cheers...

  6. #6
    Join Date
    Oct 2006
    Posts
    26
    Thanks for previous help. The page does get refreshed everytime when I come back by clicking "back" button. But now I am facing a new problem. If I have any validation error before, clicking "back" button will take me back along with those errors though they actually have been corrected. In my opnion, I thought the page should be refreshed with latest form with corrected data, but looks like they are refreshed with previous form with invalid data. Please suggest. Thanks again.

  7. #7
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887

  8. #8
    Join Date
    May 2008
    Posts
    1

    refresh browser window after browser back button click

    Quote Originally Posted by Ultimater
    The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.

    If you don't care about rebuilding the page and want to actually reload it, then you could do:
    Code:
    <input type="hidden" id="refreshed" value="no">
    <script type="text/javascript">
    onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
    }
    </script>

    Really great code, i am looking for this solution from past days, thanks your effort, which is exactly matched with my requirement

  9. #9
    Join Date
    Jan 2009
    Posts
    4

    Lightbulb

    Quote Originally Posted by Ultimater View Post
    The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.

    If you don't care about rebuilding the page and want to actually reload it, then you could do:
    Code:
    <input type="hidden" id="refreshed" value="no">
    <script type="text/javascript">
    onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
    }
    </script>
    Hi,

    Where should I put this hidden field and java script? Do I need to put in the page that has "Back" button or the page that is actually refreshed after going back.

    Also let me know do I need to set the value for the hidden field from the page where the back button is located? Pls help.

    Thanks!

  10. #10
    Join Date
    Jan 2009
    Posts
    4
    Where should I put the javascript and hidden field? In the page that has "back" button or the page that is loaded after refreshing? Pls help.

  11. #11
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    In the page that you want to be refreshed. The same page the code has to be in.

    P.S.

    This was a Zombie thread.

  12. #12
    Join Date
    Jan 2009
    Posts
    4
    Thanks for your reply... I tried and it did not work. Is it because my url is a "https" and I use freemarker for web presentation or am I doing something wrong?

    I added the java script and hidden field in the page "A" that need to be refreshed what the back button from the current page say "B" (not the browser back button) is clicked. I even tried browser back button and that also didn't work....

    here is the code that I have in my app

    In page B - <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);">

    In page A -

    <script type="text/javascript" language="javascript">
    onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
    }

    </script>

    <input type="hidden" id="refreshed" value="no"> - This field was added under the form tag.

    Let me know if I have done something wrong. I am using IE 6.0 version.

  13. #13
    Join Date
    Jun 2004
    Posts
    316
    This sounds like a problem that will only get more complicated the more you try to fix it. The problem sounds like it is a problem with internet explorer itself...
    Windows XP Professional
    256MB RDRAM (damn expensive)
    120GB HD, 2.56GHz P4 Processor
    Only 64MB GeForce4 Vid Card /w TV-Out
    Wish I had money to buy more RAM lmao

  14. #14
    Join Date
    Jan 2009
    Posts
    4
    The onload method is called every time the page A is loaded, only when I click the page B that has "Back" button I am getting the below exception...

    Warning: Page has Expired The page you requested was created using information you submitted in a form. This page is no longer available. As a security precaution, Internet Explorer does not automatically resubmit your information for you.

    To resubmit your information and view this Web page, click the Refresh button


    My URL is a "https"... I dont know if this is the problem... this is working fine in firefox though.... any help appreciated...

  15. #15
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Most websites get around this by storing the submitted data in a database, session or cookie then providing a hyperlink "edit previous information" which will open up a fresh page rather than actually navigate backwards and rely on browser settings.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles