My app currently changes data quite frequently and requires the user to switch back and forth between pages.
I often find that when a page is loaded through AJAX, and then you return to said page either through the backbutton, or by clicking a link...the information isn't always refreshed.
Is there a way to force this refresh?
This is due to the fact that when you link pages through AJAX navigation in Jquery mobile they are automatically loaded into the DOM according to the documentation.
Try adding a data-dom-cache="false" to your "page" as one of the attributes.
Related
Eg. I have a div that is there inside all my views but still I have to reload it everytime thereby slowing down the page loading rate. So is there a way to not reload the part of the page?
you should consider using Ajax...
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
check this page, it's an easy step by step to learn the very basics : http://www.w3schools.com/ajax/default.asp
You can go with Ajax and only reload those parts of the page you need.
My web application utilizes page reloads in places where the page structure changes.
For content changes initiated by the user it is all handled by Ajax.
However I'm planning on removing all the page reloads and replacing them with ajax calls that simply update the page using innerHTML for the body and head tags.
To do this I know have to manually call functions that are normally called by the onload event.
When I am done I will have a complete ajax application. My question is, is this standard practice now....I see a lot of applications where you do something and the whole page reloads, where even common elements are reloaded.
For example go to Apple.com and hit on the first button you see "Store"...you will see the whole page reload even the menu bar that does not change is reloaded wasting bandwidth..
Because I don't see other people using complete ajax solutions...I wonder if I am headed down a wrong path.
My question?
Is a complete ajax based web application best practice? (of course file uploads aren't supported, omitting this, is it best practice).
If so why do big sites not do it? I see few sites that actually employ ajax instead of page reloads.
There are a number of reasons not to go fully ajax. A few are:
If the user refreshes the page they'd be sent back to the home page;
if they pressed the back button, they'd go back to the previous site
they visited.
Search engines won't be able to index anything past the home page.
Anyone without javascript enabled or on IE 6 (or it's equivalent) wouldn't be able to use the site.
Lastly, it can be hell to debug a problem -- I went full ajax on a project a while ago and ended up regretting it.
If none of the above are important to your project, and you're looking to do something different, then by all means -- the real question you need to ask is "does the added complexity justify the savings in bandwidth?".
The concept of ajax is reload certain content of the page when you don't need to change all the content.
Your example of apple.com: it isn't a best practice to use ajax in navigation, because the history of browser don't handle this (use the back button of the browser and the navigation will not respond if you use ajax, keep that in mind).
If you have a box with testimonials and want them to change from time to time, so it's a good place to use ajax, avoiding the whole page to reload.
You can also have a static page with all testimonials to let search mecanisms to index that content.
Example of big sites? The search of google. When you type only the box of results is reloaded to view one preview.
So you have to choose when use and when not use ajax.
Let's say we have a page written in PHP. This page loads by it self a template with header, body and footer and print this out. Now let's say that in the body of this page we would like to start a loop and load some posts (messages taken from a database).
We also need the page to load new posts every 10 seconds, if any, without refreshing the page (classic AJAX). This ajax call will use JSON and AJAX and micro templates.
Now i'm just wondering:
Do we really need PHP to load posts the first time the page is loaded? Can't we just start that Ajax call and load posts with Ajax instead? (Notice that the existing ajax call would be kept as it is, since it loads posts starting from the latest loaded (in case of no posts, that would mean all posts).
If you did not understand my question don't hesitate to let me know.
In this situation I think the simpler approach is the let AJAX handle it, if you do let php load the initial messages, you'll have two places in code, that you'll need to maintain to perform identical jobs.
I think you are asking how you should load the posts the first time the page is accessed. If so: When the page firsts loads, have some PHP that prints out the existing posts. Then, add some JavaScript to update the page with new posts every 10 seconds. This is a matter of preference. You might want there to be no posts when the page first loads, and then use Ajax to get the existing posts once your page has loaded.
Edit:
I agree with jondavidjohn that you might be better off using pure Ajax. However, you could always isolate the code that fetches the pages into a separate function. That way, the script that generates the page calls the same function as the script that is called via Ajax.
The drawback with that technique is that it doesn't downgrade gracefully. So people with javascript disabled will not see any posts.
I'd recommend outputting some data with php - AJAX requires JavaScript which many people don't have activated.
Why not, instead of having the browser poll the server for new posts, have the browser push new content to the browser when it is available using the likes of node.js?
I designed my site with AJAX exclusively, and it works perfectly except for one rather major issue: Using AJAX requires JS to be enabled. Of course, if users trust your site, this is not a problem, but if they don't, then an AJAX solution won't work unless you put the entire page in a noscript tag.
I've got a simple website using plain HTML/CSS to display and PHP/MySQL for data storage.
Now I'd like to add a toggle button similar to facebooks "like" button.
How can I act on the user pressing the button (add database record for this item, change button text) without leaving the page?
I thought this question would have been asked and diskussied to no end, but all solutions I found require some other frameworks than plain PHP as background.
You'll need to do it with javascript. Read up on "AJAX form posting".
A high level view:
user clicks on button
you capture the click via an onclick handler in javascript, and use it to call a javascript function
said function does a remote url request via XmlHttpRequest to a target page
that target page takes in the parameters passed via POST or GET and performs actions with them (eg add database record), and prints out any response required
the javascript function reads the response and acts accordingly (eg change button text)
and all this happens without refreshing the page.
You can do all this with pure low level javascript code, but plenty of libraries already abstract it while solving various issues with browser compatibilities. I'd suggest the jQuery javascript library. It provides an easy way to do exactly what you require, and good documentation.
There is an annoying bug in Firefox where navigation in a dynamically created iframe, which is then removed via Javascript, results in the inability to go back using the Firefox back button (you have to use the drop down and navigate back a further couple of pages).
I am using a form in an iframe which validates and submits data. On form submit/data validation the page in the iframe gets refreshed. This breaks the Firefox back button as above.
I need a solution to try and solve this issue and I've currently tried a few different things without much success:
Storing each iframe page refresh in a session variable (PHP) and then using history.go(-{session var}) in my jQuery code to navigate back. However this only seems to work when navigating back to the page BEFORE the iframe loaded, not the page where the iframe is loaded (in the later, it still breaks the back button)
Hiding the iframe rather than removing it - semi-works but requires multiple back button clicks and brings up the 'do you want to resubmit this data?' message
Reloading the iframe when the user has closed it. No advantage doing this as if you go back you have to still go through all the previous iframe gubbins.
Any suggestions appreciated - but please note: I want to use an iframe, do not really want to use ajax and would love a solution that is cross-browser compatible (ha!).
If you're interested, steps to reproduce this problem:
In Firefox try the iframe example which loads Google on the fancybox
homepage: http://fancybox.net/home
Search for something, i.e. load a new page in the iframe
Close fancybox frame
Try and go back without resorting to the back dropdown list
Incidentally, IE handles this scenario more gracefully than either Chrome or Firefox!
I've given up on this as have tried everything under the sun. Resorting to posting data via jQuery's AJAX methods which won't add a history item.