How to show loading while moving between pages - javascript

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.

Related

Interim message when downloading a file

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.

How to display a self-refreshing "popout" html GET page in a fanciful AJAX

I've got a web form done many donkey years ago that generates on form submit a popout html- page that refreshes itself every 10 seconds with the latest data drawn from the database.
Many browsers now prevent popouts, so I reckon that I need to rework the same web form to generate an AJAX or AJAX like "popout" that is not affected by browser security settings that block popout by default? Please advise if otherwise.
The "popout" should be movable, auto-refreshing and include a close button. I would also need to link to the "popout" from a html link.
Would like to hear from you web experts what are my options? :)
My recommendation as I said in my comment would be to take a look at jQueryUI specifically around the dialog (example here: http://jqueryui.com/demos/dialog/)
You could then use a javascript timer to periodically poll your server using jQuery Ajax (which if you haven't looked at before I would highly recommend) - see http://api.jquery.com/jQuery.ajax/

ASP.NET content display

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.

How to display loading page before page with search results displays?

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.

Pagination with special loading function?

I was searching for a script or at least a code snippet but haven't really made any progress. Anyway, I'm looking for a script that works like a simple pagination javascript but it should be accessible by linking from anywhere in the document and by calling it with the URL (e.g. on www.abc.de/default.html#thirddiv the third page of the pagination is displayed). Further, the contents should be loaded upon request (when the user clicks on the link and enters the specific page of the pagination), so that cookies, that have been set or deleted in the same document earlier can be used later without reloading the entire page. Something like that is used on Facebook for calling contents and loading them.
I've found a script on CSS Tricks called BetterBlogroll but I don't really get my mind into this. A pagination script from DynamicDrive is already working very well on the page but my problem is that there should be running three of them on the same page and as I said, the content should be loaded upon the user's request.
The script I'd need does not has to be with loads of CSS, the best way would be plain javascript and only the required CSS and HTML data. Anything else just disturbs. If anyone can help me out here, I'd be very thankful.
Check out Ryan Bates's Railscasts #174 and #175. These two are not rails specific, and explain this well.

Categories

Resources