Usually when using any web page that is used to search for huge amount of data, like searching for cheap flights, user is first redirected to a page that shows progress bar e.g. 'Now Searching Multiple Travel Sites..', and when search on the server is done, then is redirected to actual search results.
How that is done? Is it some javascript/ajax trick?
Well you can easily set a function or event to trigger when the AJAX is finished loading. So on the submission of a form you can just set the page to display "loading..." then remove that to display the results or whatever once the AJAX is finished loading.
there are a few ways, one way as you suspect can be with javascript to show a div or some element with 'loading...' in it, on clicking a submit / search button. This will show up until the moment that the page refreshes with the page results.
There are lots jquery plugins which are really simple to use and allow customization in terms of the processing message you want to show. Here is one such Jquery plugin.
It is as simple as calling $blockUI() and $unblockUI() from javascript. You can check out the demo here.
Related
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.
On my website I have an option to display some data and also to download it in csv format. Some of the data is quite large (20,000 - 900,000 rows in SQL). When I display it on the site I use paging so that it quickly displays only x amount of rows at a time, however, the download link of course should and is downloading the entire report which can take several seconds to a couple of minutes depending on file size. I'm wondering if there is a way to create an interim pop-up or message in-line that says something like "Gathering Information..." where I could additionally put an animated gif so the user knows something is happening. Creating this shouldn't be an issue but I'm not sure if there is a way to trigger that to disappear once the download pop-up appears. The solutions I've seen on this site all suggest using a timer, but thats not an option in this case as the times will vary a lot.
I'm using classic ASP so would like to use either that or JavaScipt. I could additionally use flash if makes a difference.
I would probably wire up the "Gathering info..." message to be hidden upon receipt of a Comet style message from the server that could be sent out as soon as the file is ready to download on its end.
The gist of it is to use a cookie that you set using pure javascript or jquery cookies for ease of use. Then you send the cookie's name to your server, which sends an update for said cookie with the file once delivered.
Meanwhile you have some JS code that checks periodically for the cookie to see if its updated, and can then update the layout accordingly.
I ended up doing this a different way. On my site I have page we'll call "default.asp" on that page is a link to another asp wel'll call "download.asp". download.asp is where the code is to do the SQL query and create the report, which means this is where the wait comes in. After the report is prepared the popup to save, open, etc is displayed. What I ended up doing is creating a div that by default is hidden. When the download button is clicked the div is unhidden, then just before the popup is displayed I once again hide the div. Hopefully this can be of help to someone else as well.
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)
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.
I would like to have in my jsp when the user clicks on the submit button, a loading message or an image is shown while moving between the pages. So, how can I do that?
I tried to use some javascripts, but I did not success.
Thanx
If it is a complete page change, the loading indicator is already here in every browser.
If you update only a part of a page through AJAX, you may use AJAX progress indicator. According to the JavaScript framework you use, implementations may be different, so see the documentation or complete your question by specifying the framework you use.