jQuery / JavaScript “please wait” window while page is loading? - javascript

I’ve two individual pages which actual needs the same kind of function so I’ll combine them into one question.
The function I would like is a modal window while the page are loading but the different for the two pages is when this modal window with a waiting text should appear.
When entering pageA it has to collect and calculate a lot of data so the loading time can take some time before it is ready. For this page I would like the waiting sign to come until the page is finish loading.
PageB is a form. The page loads fast but when a user hits the submit button the code does some different things with the data so it too can take some time and here I would like the modal javascript waiting sign to come when pressing submit. I do all the collecting, checking, validating and inserting on the same page, PageB, so I’m not changing back and forth between two pages.
I’ve scouted Google and different jQuery / JavaScript pages for a solution but what I’ve been struggling with is that it should work on both kind of pages, if that’s possible, or otherwise create two functions one for each page.
I’ve also searched stackoverflow but the question which is somewhat similar is not quite what I’m looking for either or I simple just doesn’t understand the solutions good enough.
Any help, suggestion or tips would be very much appreciated.
Sincere
- Mestika

Take a look at the jQuery UI Dialog - it has everything you need ...
http://jqueryui.com/demos/dialog/
For pageA call the function in a <script> tag at the top of the page and close it in the $(document).ready() function
For pageB call the function when the form is submitted and close it once that processing has been completed ...

For page A, create a normal HTML element (and CSS) to show the loading indicator, then hide it in Javascript when the page finishes loading.
To make the page work if Javascript is disabled, add the element using Javascript at the beginning of <body>.

Related

Where to put all the logic for a full ajax page

I am really new to all the AJAX stuff and now I wanted to convert a small homepage I created with CakePHP to an full AJAX page.
The functions I use are mainly:
View Dashboard with a List of "Book"s
View a "Book"
Create a "Book"
Edit a "Book"
Delete a "Book"
Each function uses its own view and should be shown in a modal. It is important that modals can overlap. In the beginning I added the JavaScript I needed to each view. So AJAX was loading the HTML view (+new AJAX) and displayed it in an modal. I was able to click on "View Book" and then "Edit Book", so two modals would overlap.
This was working fine, but Chrome threw a few warnings because it didn't like reloading AJAX.
So I decided to put all the AJAX logic into the Dashboard View and created an event handler for every possible button that could be clicked. Because my modals might overlap (and I don't know which ones would overlap) I created an empty div for every modal that could occur.
Currently it is working fine, but what if I add way more functionality?
Would I need in my Dashboard View an empty div for every modal that could show up and do I have to load ALL the AJAX functionality when the page is loaded?
Where should I put all the logic? Do I load all at once, even though I might just use a tiny part of the logic? How would I handle many overlapping modals with different content?
I hope you got some advice for me, because I think my solution will make it a big mess as soon as the project grows.
Thanks a lot!
Cheers

Stop form from refreshing but do post

I am working on a radio website, with a player, and a bunch of banners where you can click on to play a radio.
The ideal behavior in my opinion would be that if i click on the button to play a radio, it'll jump to the player. But now its refreshing the page, and jumping to the top of the page. which is a bit annoying.
I got an form with multiple buttons, those buttons contain the ID of the radio from the database.
Then i got my player, without the form being posted, printing a default player, on submit of the form, it'll load all the information needed from the database with the ID that's being posted to the player.
Now my question is, how to stop the form from refreshing and jumping back to the top of the page, while it does post to the player.
if you guys need any code, i am wiling to post it here, but since it a shitload of code on my index.php i need a site where i can put this on.
You're going to want to use Javascript (and more specifically: AJAX) for this. It may seem daunting, but especially when used in combination with jQuery, it's quite doable.
The idea is basically to send requests to a different page on the background, without reloading the page, and to use Javascript to update the current page with the newly received information. There are plenty resources on the subject that do a much better job of explaining the details than I could here, but I hope this gives you sufficient keywords :)
Web based radio players are usually SPAs (Single Page Applications) because reloading the page interrupts the radio player. That means the page loads only once, and all other content is loaded via AJAX requests that do not require reloading the whole page.
There are several libraries that you can use to achieve this architecture (like Angular.JS for example). Building such an architecture from the ground up with plain JS can easily get too difficult to maintain.
Here you can use ajax and then call your radio player which is not in form...
Find below example.
$("button").click(function(){
$.ajax({url: "demo_test.txt",
success: function(result){
$("#div1").html(result);
}
});
});
Hope this wil help.

How to make pages progress stepwise on a popup?

Can someone please explain how can I go about creating the following page and what techniques should I adopt:
The user should be able to click on a button which should result in a popup.
The popup should have a static page with instructions and button to click which takes the user to the next step in the same popup.
At the next step the functionality should run to take input from the user and save it to the server.
The user should see a confirmation finally and on clicking finish, the popup should hide.
From what I understand, I should try the following:
use javascript onclick and fadeIn function to create the popup.
continue changing the same div using onclick and AJAX to create stepwise kind of a format and carry out the functionality.
use XMLHTTPRequest to upload data acquired and finally use fadeOut to hide the popup.
The reason why I am thinking in these lines is because I have had very little exposure to web designing and hence would love to get some expert views on if this is the right approach and if not then what should be a better way to do it. Is there is some existing literature/method which talks about it?
Any help would be much appreciated.
For first step
Use javascript onclick function. But before this keep your static content ready and than use jQuery UI to appear it as good Dialog Box. For example see this
For second step
The user will never know that you have changed the dialog. Just you can load new dialog with new content in it. When you click button on first page, make that first dialog box is closed.
For third step
Instead of static content make the response set to dialog, here you may use Ajax/post call.
Las step
Its not compulsion to use XMLHTTPRequest. You can even submit form in jQuery post/ajax. Than you can reload the page with confirmation message send in response from server or you may use jQuery to make the confirmation message appear.

How To Display List of Sites One At A Time

I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.

Unobtrisuvely ask user for details

I am trying to figure out the best way to acompish "unobtrusive" forms for a user (within a web app).
The purpose: keep user on the site by not asking to fill unnecessary form in. Ask for the details as only when such are needed.
The requrements are:
User should provide additional details only when it is required (email to receive notifications, login required for account page, save credit card details when checking out).
User should not leave the current page providing the additional details.
The implementation would be fairly easy if all requests would be AJAX ones. It would be easy to analyse the response (401 or so) and show the appropriate lightbox-form.
I do not see how it can be done "the right way" with plain anchors and form submits as in both cases the user actually leaves the page (by following the link or submitting a form) and there is no way to analyse the response on the client side.
Converting all links and forms to AJAX ones would be just silly.
The closest analog to what I want to achieve is the default Basic Authentication dialog in most of the browser. But obviously that just doesn't fit my requirements.
Any creative suggestions how to do that for non-AJAX requests?
Regards,
Dmytrii.
In a page sense, where "page" refers to what the user sees and not what the URL is, I only can think of following ways to update independent parts in a page with JavaScript (and thus Ajax) switched off:
Frames
Iframes
Using held-open connections there are two more ways to update a page, however these do not work reliably in all cases:
Animated GIF
CSS DIV tags with absolute positioning.
Note that this needs that your Server can keep open a session for each person looking at the page, which can be thousands. If this does not work the only possible workaround is with FRAMEs and automatic refresh, which is somewhat clumsy.
As I think that you do not want to use Frames and you do not want to render animated GIFs, I explain the CSS DIV way:
When you load the page you do not finish loading it. Instead the connection is kept open by the web server and the script handling the connection waits for additional information to arrive. When there is additional data, this is sent to the browser by encapsulating it into additional DIV tags which can overwrite other parts of the page.
Using "style" in the DIV tag and CSS position:absolute these can overwrite other information on the page like a new layer. However you need either position:absolute or must add this data to the end of the page.
How does this work with forms?
Forms usually have a known size so you can put them into IFRAMEs. These IFRAMEs get submitted to the webserver. The script there notifies the other script that new data must be output, so the waiting script renders the response and displays it in the page while the script which took the submit redisplays the form with fresh values only.
How does this work with 404 and anchors?
I don't really know because this must be tested, but here is a hint how I would try to implement this:
We have 2 issues here.
First the URL must not point to other pages but back to a server script again, so the href is under control. This script then notifies the waiting script to update the page accordingly, for example by retrieving the page and sending it to your browser. The script can check for 404 as well.
Second you must hinder the browser to switch the page when clicking on the anchor. This probably involves some clever tricks using CSS, target and server side status codes (like "gone" or redirect to the current page, whatever) to keep the browser from switching the page. I am not completely sure if that works, but if you remember download pages, these show URLs which do not switch the page but have an effect (downloading the file). That's where to start to try to hack browsers not leaving the current page without using JavaScript.
One idea not followed here is not keeping the connection of the page open but the CSS file and send new css information to the browser which then "fills in empty stubs" using the CSS way. But I doubt that this works very well, most browsers probably will parse the CSS only after loading finished, but perhaps I am wrong.
Also note that keeping a connection open never finishes the page loading, so you will see the busy-logo spinning all the time, which is unavoidable with this technique.
Having said this all I doubt you get around JavaScript.
What I wrote here is very difficult to do and therefor usually is not used because it scales badly. And it is a lot more difficult than using JavaScript alone (that's why I explained it).
With proper AJAX it is much more easy to reach your goal. Also note that you do not need to change your page source much, all you need is to add a script which augments the page content such, that for example forms suddenly use AJAX instead of a direct POST with re-rendering the page. Things which cannot be detected easily then need some hints in the tags such that the tag scanner knows how to handle the tag. The good thing then is, that with JavaScript switched off your page still works - however it then "leaves the page".
Normal HTML just was not designed to create application-like web pages like we want to see today. This all was added using JavaScript.
About popup forms
The Basic-Auth-Handler reloads the page after the user enters something into this dialog, only if cancel is hit the current page is displayed.
But there are two ways to present additional query-popups in a page using JavaScript:
The first one is the javascript "prompt", like in following example:
http://de.selfhtml.org/javascript/objekte/anzeige/window_prompt_vor.htm
(Click on the "Hier").
The second one is "JavaScript forms" which are like popups within an HTML-page.
However I consider popups to be far too intrusive and bad design.
Ajax and JavaScript is the easiest way
Unfortunately using JavaScript is never easy, but if you think JavaScript is improper or too difficult, there is no other technique which is easier, that's why JavaScript is used everywhere.
For example your page onload-Script can cycle through all Anchor-Tags and modify them such, that clicking on them invokes a function. This function then must do something clever.
Same is true for Forms. Fields which can be modified (like the user's eMail address) then have two views, on is visible, the other one hidden. The hidden one is a form. Clicking on the eMail address then switches the view (disables the first div and enables the second), such that suddenly instead of the eMail address a text form field is there containing the eMail address. If you click on the "OK" button the button changes the look into a spinner until the data is submitted, then the view switches back to the normal one.
That's the usual way to do it using JavaScript and Ajax. And this involves a lot of programming until it works well.
Sorry for not shortening this post and missing code snippets, I am currently lacking time ;)
Hidden iframe.
Set target attribute of the form to the name of the iframe. use the onload event of the iframe to determine what is the response.
Or, if you really dont like any javascript, don't hide the iframe and instead present it in a creative manner.
CSS to hide an element
#myiframe { position:absolute; left: -999em; display: none; visibility: hidden; }
But normally, display: none is enough. This is just an overkill.

Categories