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
Related
I want to put Thumbs up/Thumbs down buttons on my website.
There will be quite a few of them displayed at once, so I don't want to have to do a POST and reload the page every time the user clicks on one.
I thought of using re-skinned radio buttons to choose Thumbs up/Thumbs down, but that would require the user to click a submit button.
So how do I do this? I am open to using JavaScript or some other form of Client-Side scripting, so long as it is built in to most/all web browsers.
Thanks!
YM
I would take a look at using jQuery, http://jquery.com/ It is a WIDELY used library and there is tons of support for it both here and # jQuery's website.
You could easily assign all those thumbs to do an ajax post to a save page with the correct id and the user would not know the difference
You're definitely going to need to use JavaScript on this. Well, there are other client-side languages that could technically do the job (ActionScript, for example), but JavaScript is definitely the best way to go.
Look into AJAX (Asynchronous JavaScript And XML). This is just a buzzwordy way of saying use the XMLHttpRequest() object to make page requests with JavaScript without reloading the page. Here's a good tutorial: http://www.w3schools.com/ajax/default.asp . Note that, despite the word "XML" being in the title, you don't have to use XML at all, and in many cases you won't.
What you'll basically do is this:
Have your thumbs-up and thumbs-down buttons linked to a JavaScript function (passing in whether it's a like or dislike via a function argument).
In that function, send a request to another page you create (a PHP script) which records the like/dislike. Optionally, you can have the PHP script echo out the new vote totals.
(optional) If you decided to have your PHP script output the new results, you can read that into JavaScript. You'll get the exact text of the PHP script's page output, so plan ahead according to that -- you can have the PHP script output the new vote totals in a user-friendly way and then just have your JavaScript replace a particular div with that output, for example.
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 search page on my site. The search pulls from a couple (eventually a few) API from external sources. Sometimes a search can take up to 5 seconds.
Because of this, I would like to load my search page at least with a loading gif, and let AJAX begin to pull the data, showing a bit at a time. (similar to http://gamespot.com although this is a bad example since the search doesn't work with JS disabled)
Of course I have to consider the users who have turned Javascript off, so for them I'd just let PHP do the search and they'll have to bear with the wait.
What is the best way to implement this? If I use <noscript>, then all users still have to wait for the 5 second PHP portion to load anyways.
Would I just have the search form send the user to different pages depending on their JS status?
Perhaps have the noscript part define an iframe that loads the results from the long-duration PHP query?
Would I just have the search form send the user to different pages depending on their JS status?
If you have the users coming to your page, and then sending the form, that's absolutely the best way to go. E.g.:
HTML:
<form id='theForm' action='long_search.php'>
....
JavaScript:
hookEvent(document.getElementById('theForm'), 'submit', function(event) {
event.preventDefault();
loadAjaxSearchResults();
return false;
});
...where hookEvent is a function that uses addEventListener or attachEvent (on IE).
Off-topic: The hookEvent thing, like a lot of this stuff, is easier if you use a library like jQuery, Prototype, YUI, Closure, or any of several others. For instance, with jQuery:
$("#theForm").submit(function() {
$("#resultsTarget").load("ajaxsearch.php", $(this).serialize());
return false;
});
Without JavaScript, you will need to post the data to the server and perform a full postback (refresh) on the page. Just like the good ol' days. ;)
no you apply your js code (autocomplete if i understoof right?) up to an input field. Think of Javascript like an extender. If js is disabled, no autocomplete is extended on the input field. You may put some text, where you say, dude, turn on js otherwise this will be a long search. And if js is on, hide the text
Progressive enhancement:
Build it so the PHP version works, first and foremost. This is accessible to all. Then, add javascript so that, if available, it performs ajax requests behind the scenes to grab the content and update the current page.
See this book as a simple, great read on the subject:
Bullet Proof Ajax
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();
What is the best way to refresh the content of a var that is included? For example, I have this code:
<marquee>
<?php
include('note.php');
?>
</marquee>
This is great, as I can show on the page the contents of note.php. Say I change note.php but I don't want users refreshing to see the changes...is there any way to refresh the included file every 3 minutes for example?
To refresh only a portion of a page, you'll have to use some kind of Ajax Request : once the page has been sent to the browser, the server has done it's job, and cannot modify is anymore : the request of fetching a new portion of the page as to come from the browser.
You could do some Ajax requesting "by hand", it's not that hard ; but I'd rather suggest that you take a look at some of the great javascript frameworks that exists out there -- that might be helpful in the future, when adding more functionnalities to your application.
For instance :
With prototype, you can use Ajax.PeriodicalUpdater
Or, with jQuery, you could use something based on $.load
Only by using an ajax like call.. take a look at prototype or jquery for decent JS libraries to help with this..
Unless you just want to put some javascript in to refresh the page every three minutes, you'll need to look into another technology, namely AJAX. As far as I know, PHP can not do this alone.