Reload page dynamically - javascript

I create a dashboard to which I added a modal box which proposes to save or to go back. To go back, I need to reload the page (so that the data will return to the initial state). I used javascript and this script works but the problem is that the browser shows that the page is reloaded (I would like to reload the page dynamically). Do you have an idea to reload the page dynamically?
current code:
function cancel() {
close();
document.location.reload();
}

To my knowledge there is no way to do this automatically. You will have to fetch all your values asynchronous and repopulate your Html.
Or perhaps put your entire dashboard inside an iframe and call document.location.reload(); inside that.
That should stop the browser showing the reload animation. I have not tried it though.

Related

Page reload once before loading any of the other content

I want to reload my site (only once) before loading any of the content. I implemented this option but the user is still able to see the content of the page before going for reload.
Here is my code
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
How can I implement this functionality without showing any of the content to the site visitor.
You mean you don't want your user to see any of the content on the page before you trigger the reload?
If you mean 'see', like visually see the content, you could always put a div that blocks the entire viewport, and then remove it once the page has been reloaded.
But to me, this seems like an issue that could be resolved by not adding anything to the document body until your conditions have been met. You should design your code in such a way that a refresh is not needed, as that is creating unnecessary requests.

Reloading page without browser knowing

I currently am building a website that fetchs data from MySQL with php and then displays it. On one of the pages I use a form to submit data and then I reload the page to display it. It does it's job fine and works exactly as I want the only problem is when a user presses the browser back button it goes through all previously submitted data instead of just going back to the page it came from. Is there a way to reload a page without the browser storing it or is there a way to make the browser go back to the previous page instead of history.
NOTE: I am aware of Ajax and how to use it to not reload the page at all but I wanted to see if there was a way to do it without redesigning my whole page with a seemingly small problem.
You can use history.replaceState in HTML5.
Another possibility appears to be
window.onpopstate = function(event) {
window.history.go(-1);
};
although I have not tried this myself.
See https://developer.mozilla.org/en-US/docs/Web/API/History_API and https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Reloading Website without stopping JS code

I am trying to run a JS script on a website (not my own) and I want it to refresh the website, in order to check for updates. However, I have only found code online for reloading the entire page (location.reload(true), etc...), which clears any code that I have running through the console. I am new to JS so is there any way to refresh a page and keep the JS code running? Also might there be a way to only reload load a certain portion of the page?
Basically,
Reload website without stopping code
Using jQuery you can easily load any part of a page from a URL using AJAX. To fill the body element with the contents of a URL:
$('body').load('/page');
Your URL can respond with the segment of HTML you want to render, or you can request a full web page and grab just the segment you want buy adding a selector:
$('body').load('/page body');
The page isn't technically refreshed, just the HTML content inside the body (or whatever element you select) is replaced. Any previously loaded header content like JS remains and keeps running.
There is no way to actually refresh the entire page without stopping the execution of the JavaScript code.
For doing updates on the page there would be two possibilities:
Use of AJAX (Asynchronous JavaScript and XML) to check for new updates on the page. There are some very good tutorials out there on the internet – just google »AJAX JavaScript«.
Use of IFRAME. Make a page and stuck all the stuff in it and then put that page in an iframe and then reload the iframe instead of reloading the entire page.
Hope I could help you.

Prevent browser from keeping iframe url when reloading the parent

I have a form inside an iframe. As soon as the user saved the data I redirect the iframe to a page that does nothing more than reloading the main page (as some other content depends on what was inserted inside the iframe). So the data outside the iframe ist updated and the form should appear again.
The problem: at least firefox (haven't tested it in other browsers yet) keeps the "new" url of the iframe with the redirected page and not the one that is set by sourcecode. Something similar to autocompletion with input fields.
I do the reload by
parent.location.reload();
Is there maybe a way to force a real reload without keeping any information from the history of the containing iframes?
btw: I may use jQuery if it helps.
Thanks.
You could try something along these lines (http://jsfiddle.net/AKykZ/):
document.querySelector('button').addEventListener('click', function() {
document.querySelector('iframe').setAttribute('src', document.querySelector('iframe').getAttribute('src'));
window.top.location.reload();
return false;
}, false);
In the fiddle, click the link in the iframe, and hit the reload button. It sounds like you're reloading from the iframe, but this should at least get you on the right track.
Found the solution. It is pretty funny but doing the reload by
parent.location.href = parent.location.href;
makes a fresh reload of the page without keeping the history. Haven't tested it in other browsers though.

Make page go forward after executing JS

I am trying to make a simple website which has it's pages rendered by Javascript, for example:
<script>
function openPage(page) {
if(page == "Page2") document.getElementById('page').innerHTML = "You are on Page2";
}
</script>
Page2
This works, however my problem is that after Page2 shows up, the back button doesn't go back to the initial page. How can I make it go back to the default Page1 when the back button is pressed?
I have also tried:
Page2
But it does the same thing.
The browser's back button works on URL changes, so if the URL doesn't change, the browser assumes you are on the same page. Luckily you can change the URL in javascript without causing a full page reload by either setting location.hash or by using the html5 history api (will only work on newer browsers). You'll have to also have some javascript to handle those events.
in your code you have a button that change content of element with id : page
when you click this button you don't change the page, you change only the DOM element of the same page, this means you stay in the initial page

Categories

Resources