update database without refreshing the page using a hyperlink

Question

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.

Answer 1

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:-

1. Use JavaScript own functions to fire AJAX.
2. 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.

Answer 2

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

Answer 3

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.

Answer 4

http://infrequently.org/07/OSCON/sample_code.pdf

http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/

Some code sample