Looking for syntax guidance on implementing AJAX project

Question

I am taking on my first AJAX project and conceptually have everything mapped out for the most part but am being held back due to my lack of knowledge syntactically. I think I also might be off the mark slightly with my structure/function logic.

I am looking for some guidance, albeit reference to tutorials or any corrections of what I am missing or overlooking.

profile.php: this is the page that has the actual thumb icon to click and the $.post function:

Here is the thumb structure.

When thumb is clicked, I need to send the id of the comment? I know I need to calculate the fact that it was clicked somehow and send it to the $. Post area at the bottom of this page, I also need to put some sort of php variable in thumb counter div to increment numbers when the $. Post confirms it was clicked.

<div id="thumb_holder">
    <div id="thumb_report">
        <a href="mailto:info@cysticlife.org">
            report
        </a>
    </div>
    <div id="thumb_counter">
        +1
    </div>
    <div id="thumb_thumb">

        <?php $comment_id = $result['id'];?>
        <a class="myButtonLink" href="<?php echo $comment_id; ?>"></a>

    </div>
</div>

Here is the $.post function

This should be sent the id of the comment? But most certainly should be sent a record of the thumb link being clicked and somehow send it to my php page that talks to the db.

<script>
$.ajax({
 type: 'POST',
 url:" http://www.cysticlife.org/thumbs.php,"
 data: <?php echo $comment_id; ?>,
 success: success
 dataType: dataType
});
</script>

thumbs.php: is the page that the request to increment is sent when the thumb is clicked and then in turn tells the db to store a clikc, I don't really have anything on this page yet. But I assume that its going to be passed a record of the click from via $.post function from the other page which syntactically I have no clue on how that would work and then via insert query will shoot that record to the db.

Here is what the table in the db has

I have three rows: a id that auto incrments. a comment_id so it knows which comment is being "liked" and finally a likes to keep track on the number of thumbs up.

Answer 1

At least you've made a good start, there are still some mistakes. First of all there are some basic principles you might want to get used to:

1) How to create a click event

First of all the button, I inserted '2' as the href.

<a class="myButtonLink" href="2">Vote Up!</a>

EDIT: Just in case JS in disabled, this would be a better option:

<a class="myButtonLink" href="voteup.php?id=2" id="2">Vote Up!</a>

Then the JS:

$('.myButtonLink').click(function(e) {
  e.preventDefault();
  alert('the button has been clicked!');
});

The e represents the event, so the first thing we do after the submit is to cancel the default action (redirecting to '2'). Then we're alerting that the button was clicked. If this works, we can go to the next step.

2) Getting the ID value from the clicked link.

Inside the click function, we can use $(this), it's a representation of the element clicked. jQuery provides us with a set of functions to get attributes from a given element, this is exactly what we need.

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');
  alert('We are upvoting comment with ID ' + comment_id);
});

When everything goes well, this should alert 'We are upvoting comment with ID 2'. So, on to the next step!

3) Sending the Request

This might be the harders step if you're just getting started with ajax/jquery. What you must know is that the data you send along can be a url string (param=foo&bar=test) or a javascript array. In most cases you'll be working with an url string because you are requesting a file. Also be sure that you use relative links ('ajax/upVote.php' and not 'http://www.mysite.com/ajax/upVote.php'). So here's a little test code:

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(msg) { alert(msg); }
});

the dataType is detected automatically, you can for instance choose between a JSON response (which can be an array with a status and message response) or just plain text. Let's keep it simple and take plain text to start of with.

What this script does is calling thumbs.php and sending a $_POST value ($_POST['comment_id'] = 2) along with this request. On thumbs.php you can now do the PHP part which is:

1) checking if the comment_id is valid
2) upvoting the comment
3) print the current amount of votes back to the screen (in thumbs.php)

If you print the number of votes back to the screen, the last script I gave you will alert a messagebox containing the number of votes.

4) Returning an array of data with JSON

In order to get a proper response on your screen you might consider sending back an array like:

$arr = array(
  'result' => 'success', // or 'error'
  'msg' => 'Error messag' // or: the amount of votes
)

Then you can encode this using the php function json_encode($arr). Then you would be able to get a more decent response with your script by using this:

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(data) {
      if(data.result == "error") {
        alert(data.msg);
      } else {
        alert('Your vote has been counted');
        $('#numvotes').html(data.msg);
      }
    }
});

As you can see we're using (data) instead of (msg) since we're sending back a dataset. The array in PHP ($arr['result']) can be read as data.result. At first we're checking to see what the result is (error or success), if it's an error we alert the message sent along (wrong DB connection, wrong comment ID, unable to count vote, etc. etc.) of the result is success we alert that the vote has been counted and put the (updated) number of votes inside a div/span/other element with the ID 'numvotes'.

Hopefully this was helpfull ;-)

//edit: I noticed some mistakes with the code tags. Fixed the first part of the 'manual'.