Im using ajax to call php which gets results from a mysql db.
Reason im using ajax is so that the page wont reload. (RETURN FALSE)
All works fine, but since the browser doesnt reload, there is no "back".
Example: Users enter something to search for, and hits "search button" and ajax returns the search without reloading page, BUT if the user wants to click the back button to get to the previous search, they cant...
If you think it would be better to actually reload the page then tell me because this is fully possible for me, only reason I dont reload page is because it looks better this way...
Or what do you guys think of iframes?
Thanks!
Take a look at this tutorial entitled "Fixing the Back Button and Enabling Bookmarking for AJAX Apps".
In conjunction with the answer to your question here, you could store their searches in an array. In the unload event, you could just do the previous search.
You can use jquery history plugin for this:
Try this simple & lightweight PathJS lib. It allows to bind listeners directly to anchors.
Usage example:
Path.map("#/page1").to(function(){
...
});
Path.map("#/page2").to(function(){
...
});
Path.root("#/mainpage");
Path.listen();
Related
I don't have the means to test this right now but I am curious. Using AJAX, can you open the same file that the AJAX call was on? My goal is to pretty much reload the page, with a new POST parameter, without refreshing and using only one file.
Yes you can.
I just ask you, why don't, instead of reloading the page, you reload/rebuild/destroy and create the elements you need based on the response to that ajax call ? depending on your desired outcome you might want to do it better like that. More work in the user side, but a nicer 'web 2.0' experience.
How can i create something similar to the Facebook LIKE hyperlink which allows me to update mysql database without refreshing the page?
In other words , I need this hyperlink to update the database once i click it and display how many likes is stored in DB without page refresh.
Thanks in advace.
In plain simple words, you will need to use AJAX, which will get fired when you click the hyperlink, using JavaScript.
There are these options to use AJAX:-
Use JavaScript own functions to fire AJAX.
Use JavaScript libraries, like jQuery, Prototype, and some more.
By far, jQuery will suit every novice to its best & you can have a look in here for more details on AJAX.
Hope it helps.
in even simpler words than my predecessor;
this is what you have
//html
a href='somewhereOverTheRainbow'>LikeThis...
this is what you should have
//javascript
var likeIt=function(myAnchorElem){
//send info to ajax via Zepto, jQuery, Mootools, Dojo, ExtJS - you name it - or a standalone ajax lib
jQuery.get("somewhere.overtherainbow.com/like.php?url="+myAnchorElem.url);
//prevent the default
return false;
}
//html
a href='somewhereOverTheRainbow' onclick='return likeIt(this)'>LikeThis...
#javascriptWizards; I know, he should use addEventListener instead to then get a real event on which he can call preventDefault and more.
next to the ajax way, you could use json-p, an img or an iframe or even by using websockets. But for simplicity and ease, stick with the ajax way!
in general; making a feature such as the facebook like or google "+1" seams very trivial. The truth is far from it; it is one of the harder things to do in the web! The Frontend for it is easy like cake. But the Backend... wanting your website to scale and demanding/needing normal database respond times will bring you on to your knees
I'd suggest the AJAX approach but just to mention it, the effect could be achieved without AJAX by placing the button in an iframe, this iframe could then follow the the link without the page having to refresh.
http://infrequently.org/07/OSCON/sample_code.pdf
http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/
Some code sample
refreshing a top bar just like facebook where the no of messages are getting updated when the new messages comes just like facebook or gmail without refreshing the whole page . i can do this if that top bar is located externally i can refresh that bar with either meta tag set timeout or with refresh tag , but not getting how to refresh when it is part of main page.how to do this without reloading whole page and without any external file as the full code of the inbox and alert is located in main.php so i cant take it out and call these function externally.
maybe you can try to set a timer to pick new messages with ajax method and use js to change dom element's performance.
You need to use a partial page refresh using an AJAX callback. A good place to start learning AJAX is the Google Code University and the jQuery JavaScript framework.
Not sure what you want, but try this one: http://www.brightcherry.co.uk/scribbles/2009/02/26/jquery-auto-refresh-div-every-x-seconds/
Sujit, you definetly need to use AJAX. I think you have not explained yourself very clearly, but you are saying you want all the code on the same page, that's a bad programming practice. You need to use AJAX and have "code separation" (separate HTML from JS from PHP).
Maybe you are afraid of using AJAX, I recommend and easy library for managing AJAX, it's called SACK. You can see a nice an easy tutorial here.
Hope that works for you.
What about this then
setInterval(function(){
SomeAjaxFunction();
}, 1000);
I have a MySQL database with and id and a text string, I want to be able to display it, and with the click of a button display another random phrase without having to refresh the whole page.
I have look quite thoroughly and have no found no answer for this concrete question.
Is it possible to do it with PHP?
First try it WITH refresh.
You'll need to select a random text from your database (hint, use RAND() in your mysql request).
Once you know how to do that, learn how to make Javascript talk to your php page so you no longer need refresh. It's called AJAX, you can look at JQuery ( http://jquery.com/ ) for a library that will help you with it and specifically this page :
http://api.jquery.com/jQuery.ajax/
Your javascript will do a Ajax call to your php page, will get some data back and then will be able to display it in your page.
Look at the example, you should be able to do it from there.
But first do it with refresh, it's a first step.
If i were you i would use http://api.jquery.com/jQuery.get/
Create a page where you do the mysql query and then write a few lines of jquery to get the information from that specific page. You won't have to refresh the page and there are plenty of neat ways to change between the data you get from the database, with jquery
something like:
$.get("the_separate_page.php", function(data){
console.log('Your quote is : ' + data);
//check your log
});
Is it possible to detect when the user clicks on the browser's back button?
I have an Ajax application and if I can detect when the user clicks on the back button I can display the appropriate data back
Any solution using PHP, JavaScript is preferable. Hell a solution in any language is fine, just need something that I can translate to PHP/JavaScript
Edit: Cut and paste from below:
Wow, all excellent answers. I'd like to use Yahoo but I already use Prototype and Scriptaculous libraries and don't want to add more ajax libraries. But it uses iFrames which gives me a good pointer to write my own code.
One of my favorite frameworks for doing this is Yahoo!'s Browser History Manager. You register events and it calls you back when the user returns Back to that state. And if you want to learn how it works, here's a fun blog entry about the decisions Yahoo! made when designing it.
There are multiple ways of doing it, though some will only work in certain browsers. One that I know off the top of my head is to embed a tiny near-invisible iframe on the page. When the user hits the back button the iframe is navigated back which you can detect and then update your page. Here is another solution.
You might also want to go view source on something like gmail and see how they do it.
Here's a library for the sort of thing you're looking for by the way
There's no way to tell when a user clicks the back button of presses the backspace key to go back in the browser, however there are other events that happen in a certain order which are detectable. This example javascript has a reasonably good method for detecting back commands:
The traditional way, however, is to track user movement through your site using cookies or referrer pages. When the user goes to page A, then page B, then appears at page A again (especially when there's no link on B to A) then you know they went back - A can detect this and redirect them or otherwise.
The Yahoo User Interface Library, my personal favorite client-side JS library, has an excellent Browser History Manager that does exactly what you're asking for.
The simplest way to check if you came back to a cached version of your page, which needs to be refreshed, is to add a hidden input element that will be cached, and you can check if it still has its default value.
Just place the following inside your body tag. I place mine right before the end tag.
<input type="hidden" id="needs-refresh" value="no">
<script>
onload=function(){
var e = document.getElementById("needs-refresh");
if (e.value === "yes")
location.reload();
e.value = "yes";
}
</script>
I set a variable $wasPosted in $_SESSION with value false.
All my posts go via the same php file, and set $wasPosted to true.
All header(location:) requests are preceded by setting $wasPosted to true.
If $wasPosted is false then the page was loaded after use of the backward or forward buttons.
The dojo toolkit has functionality to deal with this in javascript. I don't think there is any good way to handle it in pure PHP.
Here is the docs page they have: http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/back-button-undo