I have a website that I'm working on. I'm using jquery to animate and display content. This content is stored in vars. I need to know how to load the content before displaying it.
For clarification, you click a link, a "loading..." window fades in, and once it loads everything, it fades out and fades in the loaded content that is stored in vars.
Thank you
Are you looking for how to request HTML content via AJAX, know when it is finished, and then insert it into the DOM? If so, jQuery's load method may be what you're after.
Steve
AJAX event will not tell you how many percent was loaded, in fact, in most cases, it has no idea how long is the response will be. But it will inform you when the response is completed, or error occured.
Take a look at the official reference AJAX of JQuery. My original answer was wrong, coz I suppose you already have the data. A simplified use case for your ajax request would be:
> Initiate the Request, and set the handler for ajax complete (thru something like $.Ajax)
> Hide the content pane and show the loader
> When ajax complete, you display your content, and hide the loader
Following is the original answer.
I think you are talking about something that's already in the client computer's memory, but you want to display all immediately once it's completed loading. Sounds like those "double buffering" in offline media.
What you can do, is:
// Display the loading screen, you can put any animation
$("#loader").fadeIn();
$("#contentPlaceHolder").hide();
// attach the DOM of the contents to placeholder.
$("#contentPlaceHolder").append(CONTENTS);
// .... similar statements follows.
// and finally..
$("#contentPlaceHolder").show();
$("#loader").fadeOut();
Related
I'm working on a website and use Ajax to update the body by id name ('mbody'). The website is working as intended but then I realized, I was returning entire page data in the responseText and updating 'mbody' with this response.
Keep in mind, the responseText does include an 'mbody' id name of its own for body.
What I don't understand is, why wasn't the website messed up? I was sticking a copy of the entire page inside an already copy of the page that's in DOM. I have since changed the Ajax update from 'mbody'.innerHTML, to an HTML tag update, since I was returning the whole page.
In case you're wondering if it's necessary to return the whole page, the answer is yes, because things change on the page from top to bottom, from screen to screen so I prefer to just return entire HTML.
So, did Ajax realize I had an 'mbody' inside the responseText and automatically just updated that part with current DOM 'mbody', or did it really place a new html page source in 'mbody' that was already in DOM?
I just want to understand the behavior of Ajax in that situation. Again, my website was perfect even when I was returning entire html source for just the body part.
// the response is returning an html page, while mbody is the current
//DOM body tag's ID
mbody.innerHTML = this.responseText;
//i later set the response to update the entire html; pseudo example
htmltag.innerHTML = this.responseText;
The website function was perfect either way, but sticking a whole page update in the body of the current, I just don't see how that didn't cause issues or destroy the layout or something.
I'm working on a website and use Ajax to update the body by id name
('mbody'). The website is working as intended but then I realized, I
was returning entire page data in the responseText and updating
'mbody' with this response.
It will be easier to debug later (and also less network traffic) if your server side code returned only the values to be updated. Using JSON could also provide less headache because it has it's own format that can easily be accessed by the Javascript without any additional work on a format protocol.
In terms of this part:
In case you're wondering if it's necessary to return the whole page,
the answer is yes, because things change on the page from top to
bottom, from screen to screen so I prefer to just return entire HTML.
You can save the "scroll y position" of the page, before the ajax call, and then after the re-rendering restore that scroll y. But none of this is necessary if you simply only change those parts of the dom that need changing, as opposed to all of it.
As you Know new images may be loaded after page load completed using event . for example i can fire a JQuery click event to run foo function that adds an image to a Div, and then that image will be loaded without needing to use Ajax . so what's going on?
whats the difference between using Ajax and just add that image to page using an event?
image will be loaded without needing to use Ajax . so what's going on?
This is your browser doing it's magic. The moment you add a url to an image source, your browser sends the request (to where ever the image is located ) and handles the response automatically.
whats the difference between using Ajax and just add that image to
page using an event?
Well it's straight forward. Ajax is not meant to "get" images. You could eventually use AJAX to get an image url or a list of image url's and apply them to img element(s)... but the browser still automatically sends the request and handles the response.
Taken from the comments, you should read this to fully understand how AJAX works.
How does AJAX work?
Anytime I click on a link/button anywhere on my site that performs/calls a GET or POST (Ajax and non-Ajax), if it takes more then a few seconds I would like to display a loading gif. I know how to do this on an individual basis, but I would like to know if it is possible to create a function that will do this automatically and then hide the gif when finished (assuming it does not redirect to a new page).
I found this but this does not work with the post method for spring security for example.
It may be a case where it is not possible or requires more effort than it's worth. I would just like to know if it is possible and if so how might it be approached.
The only constraint is that any methods calling the post or get should not need to be aware of this so called "listener".
This is tagged jQuery so I'm giving a jQuery answer for simplicity. This is also solvable in a relatively simple manner without it.
Hooking on every request:
Let's say your method is called myMethod.
GET/POST requests may be triggered the following ways:
Form submits, in which case you can select the form $("#formID").submit(myMethod); . Note that if myMethod returns false it will cause your form to not submit
AJAX in which case you can use $.ajaxStart with $.ajaxStart(myMethod)
"a" tag clicks, and other click handlers, in which case you can perform $("a[href]").click(myMethod) , note that this selects all a tags with an href attribute, you might want to change the selector to suit your needs
Image loads which you can handle like explained in this question.
Script loads which you can detect like explained in this question.
Stylesheet/Link loads, which is explained in this blog post. You can add a hidden element to the CSS and check if the style was applied in an interval, and when it does call myMethod
What you can't do:
If your page has a plugin like Flash, or in general anything your JavaScript does not have access to, you can't hook on requests it makes.
The case of displaying a 'loading' gif.
From what you're asking it seems like you only care about image requests, and AJAX requests (correct me if I'm wrong), since external pages that take a long time to load NOT in an AJAX requests can (should) implement that .gif logic on the new page. This could be handled as I explained above.
Although you can hook every case, I would not do so. I would create a method that loads the 'loading' gif into a place and accepts a url. If that url is an image (for example, by file extension if that's ok with your mapping) use the logic in the image load detect linked question, if it's AJAX load the loading gif to where the data will be loaded, and replace it with the data on a .done() handler.
Here is a question about how to do this for an image, here is how to do it for AJAX . The two can be easily combined into a method which is what I believe you should use.
I am having a backbone.js application that I am writing.
When user press a "Search" button, I show a loading.gif image (by making it block), while I let the javascript code to continue. Once the javascript code is complete, I unhide the loading image (changing the display to none).
I am able to see it working in Firefox. In safari/and chrome, the change of CSS don't get applied until the javascript code is completed, and thus user don't see the loading image when the search is being performed.
Any way to fix this?
Thanks
A couple of things strike me as odd.. but to answer your question first:
Most DOM/css changes do not get applied until the executing Javascript returns. To get around this you can make your DOM change and then set a timeout to execute the rest of your Javascript code.
ex:
// make your image visible
function continuation() {
// Put the javascript task that you need to execute here
}
// setTimeout will release execution control back to the browser so your CSS/DOM updates
// can be applied. Once those updates are applied, continuation will be called
// by the browser and your remaining javascript can run.
setTimeout(continuation, 0);
Now it seems odd that you would have any javascript that would take so long to run that you'd have time to even see a loading gif. It would make sense to see a loading image if your are firing an XHR (ajax) request but if you are doing that then you shouldn't be having the issue you are describing. What exactly is this javascript task of yours doing?
I had a similar issue with a loading image which turned out to be because the image hadn't been loaded into the browser and for whatever reason it didn't display until something else completed. I believe in my case an XHR was somehow blocking the loading or display of the image. From memory, this only happened the first time the loading image was displayed, after that it was fine. I ended up adding an element to the page html to load the loading image and then hid it with javascript. This solved the problem..
How can I show and hide a spinner (using the spin.js) when the page loads, and when the user does an AJAX request? I was thinking of the onload message for starting the spinner, but that event means that the content has been loaded so probably a bad place to place it. How would I do this?
You should read a lot more about AJAX. Mentioning the onLoad event while talking about AJAX requests is a bit weird, for me.
Just a hint: Start showing the spinner on starting the AJAX request, and stop it after your request returned what you wanted to / is complete.
Ajax fast and easy
w3schools ajax
Ajax example
a list of tutorials
Maybe also interesting: jQuery (for absolute beginners)
In AJAX request better to start spinner before AJAX call and hide at success response.
When the page loads you can add <script> tag where you load spinner after <body> tag, and when onload event is fired hide that spinner.