Onclick Favorite/Unfavorite with AJAX

[deepson2]

Hello,

 

I have been working on favorite blog on my site. I have done this with radio button. but i want to do this with AJAX. like it has on flikrs.com. if you click on favorite tag it will show the bright star or something. or if you again click on that star it ll become dull, like its no more of your favorite tag.

 

 

I have been searching on net. can anyone tell me how can i achieve this?or show me some link so i can probably get the idea.

 

Thanks in advance.

[xtopolis]

The javascript just switches the images based on the previous state of the button (star).

The ajax will communicate with the server adding or removing to your favorites at the onclick event.

 

Simple as that.

[deepson2]

Thanks for your reply xtopolis,

 

may be its simple for you. but i am pretty new with AJAX.

 

could you suggested me some like or tutorial so i can have look and try it by myself?

 

 

[xtopolis]

Uhh.. you can checkout: http://www.tizag.com/ajaxTutorial/

 

AJAX is mainly javascript, so you will need a firm understanding of javascript to do well I think.

 

The only Ajax really is setting/unsetting the server/database value indicating that it's a favorite or not.  The rest of it is just using javascript to manipulate the image, and then communicate with the server.

 

You will need a function to change the image between states (bright , dull), and a function as part of the ajax to change the server side variable.  That's pretty much it in a nutshell.

[deepson2]

 

 

here is my code.

 

blogprofile.php

PHP Code:

 

 

<div id="div"><span><a href="javascript:myfav();" title="My favorite">My Favorite</a></span></div> 

 

 

myfav.js

 

JavaScript Code:

 

function myfav(){
     
        var userid= encodeURI(document.getElementById('userid').value);
         
        var blogid = encodeURI(document.getElementById('blogid').value);
         
         nocache = Math.random();
         
         alert("hello");
   
         http.open('get', 'myfav.php?userid='+userid+'&blogid=' +blogid+'&nocache = '+nocache);
         http.onreadystatechange = insertReply;
         http.send(null);
    }

and then myfav.php

PHP Code:

 

 

<?php
ob_start();
ini_set( "display_errors", 0);

include("includes/config.php");
include("includes/functions.php");

$retpath        = retpath();
$blogdata  = $blog->personaldata();

usersess();
//$uid         = $userid;
$op = new amd;
$userid = $_REQUEST['userid'];
$blogid = $_REQUEST['blogid'];


$userid = $_GET['userid'];
$blogid = $_GET['blogid'];





echo  "INSERT INTO favourite(blogid,userid,favourite) VALUES ('".$blogid."', '".$user_id."', '".$favourite."')";
$addfavourite              = $op->insert("INSERT INTO favourite(blogid,userid,favourite) VALUES ('".$blogid."', '".$user_id."', '".$favourite."')");
        $lastid              = mysql_insert_id();
        if($addfavourite > 0){

                     echo "your favourite is added";
       }
       else{

                     echo "your favourite is not added";

}
  ?>

I know my JS code is improper. i have used this code for insert/delete record to database.

 

Now can anyone guide me.how can i do this?

 

please help me.

[corbin]

Aside from not checking the validity of $userid and $blogid, I don't see anything glaringly wrong with that.

 

 

By the way, why do you break out of OOP to do mysql_insert_id()?  What if you had more than one connection open?

 

 

Also, in JS, insertReply() exists, right?

 

 

AJAX is mainly javascript, so you will need a firm understanding of javascript to do well I think.

 

Technically I would probably say that AJAX is 100% JavaScript.  Yeah, the browser is what actually does all of the magic (but it does that with everything JS), but the AJAX API is always in JavaScript.  (I don't know if it would technically be called an API....  maybe just an 'interface' would be a better word.)