Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets.
Basically i have a bunch of ajax requests, variables and content that i want wiped when a user clicks 'new' (currently i'm using just using location.reload(); ) but want a more graceful way of doing it.
I'm really wanting to refresh it without the screen going white for a split second and also want to retain a single modal popup i have which is open when the user clicks 'new'.
So the user clicks the 'new' button, a popup appears taking a parameter, the site refreshes and the parameter is passed to an Ajax request kicking off the start process.
If anyone could point me in the direction of what to even look for it'd be much appreciated.
"Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets."
You can't refresh the website without making it look like it refreshed, the browser needs time to display the content.
You can, however, use jQuery .load to load some standard markup into your site to make it appear as it did when it was initialized, the browser won't refresh, just like making an AJAX call doesn't require the website to refresh.
I'm, however, unable to see why you want the website to refresh if only to make an AJAX call.
The simple answer is to have the content you want to reload inside a container i.e.:
<div id="container"> page content </div>
Then when you have successfully got new data from the ajax call you can empty the container with:
$("#container").empty();
and repopulate it with
$("#container").append(newcontent);
You can use jQuery's .load to request and replace a portion of your page, e.g. a container element.
For example, calling the following on index.html would effectively "reset" the #container element:
$("#container").load("index.html #container");
See "Loading Page Fragments" on the docs for $.load.
As for resetting variables and cancelling any pending ajax requests - you could perhaps write a reset() function to do all that for you.
Another possibility would be to put data in local storage, or in the url after a # before the reload. But your options for having it look like it isn't refreshing are pretty limited outside of jQuery .load or an XHR request (which is what the jQuery load does)
Related
I'm a beginner in using jQuery along with Spring MVC framework, trying my luck on building a basic utility that might be helpful at work. I've made a bunch of AJAX calls using jQuery in the code.
Now, I want to make use of the back button of the browser and figured I'd need to use an anchor in the URL. Not sure about how to proceed, after a bit of browsing tried window.location.hash="value" in the success part of the AJAX call, although the hash was appended in the URL, the back button did not work.
Any tip would be helpful.
Thanks :)
So the problem is that whenever you change the hash portion of the URL, the page does not reload or anything. That's the beauty and the curse of the hash... : )
Your solution only has one half of the overall solution: changing the hash value of the current url, so that your link can be shared with others.
In order for the back button to work, you will need to play around with the history API.(A good tutorial is here)
In your case, you will basically have to redo your previous ajax calls to get back the state from the previous page when the "popstate" handler is called. Or you could store the ajax response as you pushState to the history API. But either way, you will have to re-apply your dynamic page building on popstate.
The back button usually asks the server for the previous page's URL. Now in a single page application, you will have to do all that work yourself an rebuild the previous page somehow.
Hope this helps!
What I'm trying to do is make my website show 10 posts, then ask the user if he/she wants to load the "next page." What I want this "next page" button to do is load the content when the user clicks it.
The reason I want the div to just not load completely at all is for website speed. If my website hits let's say 100 posts, even if I just use a simple .hide(); function or something, then the website's still going to take it's time trying to load the 90 posts the website is hiding.
And yes I do realize if I'm worried about page performance I could just make new pages every time I reach 10 posts but that seems like it'd take a lot of time and be very confusing because it wouldn't work in order or something would be wrong with it.
You can't. If it is in the HTML document then it will be sent to the browser. It will be too late to stop it from loading at that point.
The only way to stop the div content from loading is to not have the div in the document in the first place, and then fetch more data from the server (which you would typically do with a link to the next page optionally with JavaScript progressively enhancing things to load the extra data with Ajax instead).
What you need to use is an XHR or Ajax request to get the next 10 posts, it is much better to do it this way rather than hiding them and activating them as needed, because even if you hide it the browser still had to download the content.
You should start by displaying just a few posts, and then load more as needed using XHR/Ajax.
jQuery provides some simple .ajax functions that should help you with retrieving the data as needed.
AJAX is your best bet.
For your needs you could do this two ways:
Make AJAX load more posts as soon as the user clicks the button.
As soon as your page loads (JQ ready function) you could fire an AJAX call to get 10 more posts and either print them in a DOM hidden element OR save them in some variable for later use. After you recover the posts succesfully (AJAX .success()) you could call the AJAX function again and run it again and make it repeat this process until it caches say... 100 posts in a variable or prints it in your DOM element.
You can do an ajax call every time the user clicks the button and append the result to the last div on your page using jquery
$( ".container" ).append( $( "div" ) );
If you want to create a page which will not load all the content at once and not have the user click a button, you can use lazyloading.
It was developed for loading of images, but it can be used for loading of div's too. See Layz Loading for Div
This works both when the user scrolls down and if they navigate to another page and then go back, it will only load part of the page that is visible. Meaning, if they are at the bottom, and they scroll up, it will reload the div's above.
I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery
If I use ajax to change specific portions of the page, like a content section, which warrants a new URL (and requires one specifically for favoriting, or refreshing), is there some magic that I am not aware of that allows the user to click the back button and reload the content that was just there?
Or do you have to re-retrieve the data based on stored variables using popstate
Thanks!
I am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.