Reload page

Hi,

I have this page, where everything is working nicely.
http://kroweb.dk/gfdev/ft_raw2/
The page works with a rather large MySQL database and I have no problems with that.

The issue here is that when I hit the browsers "page refresh" button on the page, it keeps the latest displayed data on the screen.
My question is if there is any way that I can get the "page refresh" button to clear the page completely?
Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
It is inside the form. I was just trying :)
And what happened when you tried - the page did not clear?
BTW it is still outside the formss139.jpgBut we are getting distracted.
If you are going to use a button to refresh then simply put it in the form and take out the onclick()

That will cause the form to submit with blank values. If you look at my first post - at the very end

Optionally you could just have a button that says Clear that sits in its own form and does a get on the URL.

This would be my preference. Given how you have your form setup already, just put the Nulstil button in its own form and make the URL of that form http://kroweb.dk/gfdev/ft_raw2/
0
 
Julian HansenCommented:
Here is what is happening and why.

When you post data to a page the browser remembers the post (url + data posted)- this is because POST data is sent in the body of the REQUEST - not in the URL - whereas a GET has the parameters in the URL - a refresh on a GET does not lose anything. When you hit refresh the browser will ask you if you want to resend the data as well as refreshing the URL. In some instances this is very useful - for instance testing a script that accepts posted data - you don't want to have to re-enter the data each time.
However, in production environment this is a problem.

There are two ways of getting around this
1. Do your post by AJAX and populate the screen with data sent back to the complete function
2. On the server redirect to the page

Option 2 is really for situations where you are posting data that needs to be saved - you save then redirect so that you don't end up re-submitting your data.

In your case however you are actually doing a GET - you are posting your variables but in the true sense you are doing a GET of existing data.
One option would be to change from POST to GET - the variables move to your URL - you can then refresh without the popup BUT you don't get the blank screen.

That leaves you either with the AJAX solution or writing some overly complicated code on the server to save the POST variables in a session - redirect to the same page - get the POST from the SESSION, clear the SESSION and send back the data.

Optionally you could just have a button that says Clear that sits in its own form and does a get on the URL.
1
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Julian,

I believe I will manage ti like this:

<button onclick="myFunction()">Nulstil</button>
                                    <script>
                                    function myFunction() {
                                    location.reload();
                                    }
                                    </script>

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Chris StanyonCommented:
Hey Peter,

location.reload() will do exactly the same as if you hit refresh - it will prompt the visitor asking if they want to re-submit the data.

If you genuinely want to clear the data with a button click, then it would make more sense to just remove the table from the DOM. Something like:

$('#clearButton').click(function() {
    $('#myTable').remove();
});

Open in new window

Having said that, I'm with Julian on this - the way forward is to implement an AJAX request to get the data. Will make this all a bit easier and your page more responsive :)
1
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

I will consider moving to AJAX - but not just now where everything works so beautifully :)

But, but - hitting the browsers refresh button does not do the same thing as the reload function i have put in does.

The both ask if I want to resend, but the reload function clears the page and all the search strings, which the browsers refresh button does not do.
0
 
Julian HansenCommented:
There is something strange with your code - if you take a look at this sample http://www.marcorpsa.com/ee/t2859.php you will see it does not exhibit the same behaviour.

I also noticed that on your page the first time I click the Nulstil button (with a break point in myFunction) if I step over the location.reload() it does not clear the page. However, it also seems to lose something because a second click on the button does not trigger the same breakpoint and does clear the page.

What I think is happening is that your button is doing a reload AND a post - I suspect if you put an evt.preventDefault() in the myFunction it will not clear the results.

So when you click the Nulstil button it posts the (now empty select's) and does a reload. Because the post is now with empty select's the page is clearing - because your code is not sending back any results - so you get the desired effect but not for the reasons you think
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
I'm not sure I understand.

How should the button be able perform a POST when the only code that relates to the button is this:

<button onclick="myFunction()">Nulstil</button>
                                <script>
                                function myFunction() {
                                    location.reload();
                                }
                                </script>

Open in new window


Is it because the reload button is placed inside the form?
0
 
Chris StanyonCommented:
For me, it doesn't matter whether I refresh the page or click the button - the result is the same - I get prompted to re-submit the data - if I say Yes to the prompt, then the query is re-submitted and the results are not re-loaded. If I say Cancel then the page reload is cancelled and the data remains. This is what I would expect to happen with both the reload() method and the browser refresh.

Julian's page is showing exactly the same bahaviour.

As I've already suggested - just delete the table when the button is clicked.
0
 
Julian HansenCommented:
How should the button be able perform a POST
The button is inside a form, it submits by default.

Take a look at the first sample I posted - the button exists outside the form (http://www.marcorpsa.com/ee/t2859.php)
To emulate your form enter something in the text box and submit. Then clear the box and click the refresh button. The test value is still submitted each time.

No look at this sample http://www.marcorpsa.com/ee/t2861.php, similar concept except this one has the button inside the form. Now repeat the exercise. Enter a value and submit. This time the post value is cleared (refer the block below) - the reason being that in the first sample no post is being triggered so the cached value of the form is being submitted - even when you blank the box the posted value does not change. In the second sample a post and a reload are being done - the post is clearing the posted value
0
 
Chris StanyonCommented:
Am I missing something - the Nutsil button is NOT inside the form!!
0
 
Julian HansenCommented:
Am I missing something - the Nutsil button is NOT inside the form!!
Its been moved - it was definitely there before.
If you try it now you will see the data does not clear.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
It is inside the form. I was just trying :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
I think we are beginning to run down a side track here :)

Thanks a lot for your input. Everything is working as expected, and I am closing this thread for now.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks to Julian and Chris :)
0
 
Julian HansenCommented:
Just a note - you might have missed my last comment.

As you have it - it still asks you to resend. My last (and first) suggestion was to do this
<form action="http://kroweb.dk/gfdev/ft_raw2/">
<button>Nulstil</button>
</form>

Open in new window

This will refresh the page without asking you, the only drawback is that you will have to do some styling to get the buttons next to each other.

You can achieve the same result by just removing the onclick() from the button as it is now.

To see what I am saying do the following

Select options from the select that shows a result.
Now click the Sog button (without making any further selections) - the page will clear without asking you.

By removing the onclick from Nulstil - you get the same effect.

The advantage of the separate form option is it guarantees a clear - the second won't if there are selections in the dropdowns
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.