Question

The question is fairly simple. Whenever user clicks on “like” I want to use javascript to update the mysql database through ajax. I have tried all means bit have found nothing helpful. I know I will also need a server side script but the ajax is the main issue.

Here is the counter code I set up.

 document.observe("dom:loaded", function()
{
  $("likeForumLink").onclick=processForumLike;

});


function processForumLike(event)
{

  var numberOfLikes=parseInt($("hiddenLikes").value); 

   numberOfLikes+=1;

  $("hiddenLikes").value=numberOfLikes+""; 

   this.innerHTML="You liked this"; 

  if(numberOfLikes==1)
  {
   $("numberOfLikes").innerHTML="("+numberOfLikes+" like)";

  }          
 else
 {
 $("numberOfLikes").innerHTML="("+numberOfLikes+" likes)";
 }

var likes=$("hiddenLikes").value;

new Ajax.Request("seeForum.php?id=$("subjectId").value", {

  method:'get', 
  parameters:{hiddenLikes:likes},      
  onSuccess: ????  //Don't know
  onComplete:???   //Don't know
  on Failure:????  //Don't know

 });
}

And then I can use my server side script as follows.
P.S. It lies in the same page "seeForum.php?subjectId=$("subjectId").value"

  <?php if(isset($_GET["hiddenLikes"]))
    {

     $updateQuery="UPDATE `subject table` SET  `likes`='".$_GET["hiddenLikes"]."' where `subjectId`='".$_REQUEST['subjectId']."' ";

     $result=mysql_query($updateQuery);

     checkConnect($result,"query of $updateQuery");


 ?> 

Please help. All my work has come to a halt.

Answer 1

First of all, you shouldn’t be using a GET request to update data, that should be a POST. And this:

"seeForum.php?id=$("subjectId").value"

doesn’t do what you probably think it does. What it does do is cause a syntax error because it looks like "x" x "x" to the JavaScript interpreter and that’s not JavaScript. I’m not sure which JavaScript library you’re using (Prototype perhaps?) but I think you probably want to put all your parameters into parameters to avoid having to worry about URL encoding and things like. Furthermore, there’s no reason to tell the server how many “likes” you already have and there is a good reason not to: someone might have “liked” the page while you’re looking at some the number of likes you currently have will be wrong; so hiddenLikes isn’t needed at all.

Something like this would be better on the JavaScript side:

new Ajax.Request("likeIt.php", {
  method:     'post', 
  parameters: { id: $('subjectId').value },
  onSuccess:  function(transport) {
      // Update the "likes" label with something like this,
      // I'm not that familiar with Prototype though so I'm
      // guessing.
      $('likes_label').update(transport.responseText);
  },
  onComplete: ????  // The function to call when it has finished.
  onFailure:  ????  // The function to call when it doesn't work.
});

And then, in the PHP, just send a simple UPDATE to the database to increment the number of likes in likeIt.php, something like this:

<?php
# Perform whatever authentication you need...
if(isset($_POST["id"])) {
    # Set up your database connection and then...
    $result = mysql_query("UPDATE `subject_table` SET `likes` = `likes` + 1 WHERE `subjectId` = '" . mysql_real_escape_string($_POST["id"]) . "'");
    # Check $result and send some data back to the client (if desired), if
    # you send something back then the onComplete, onFailure, and onSuccess
    # JavaScript functions would be responsible for doing something with it.
}
# Send back the updated number of "likes" as text/plain.
?>