Using jQuery/PHP/mySQL to update database and display new result

Question

Hi all I am fairly new to programming. I have been teaching myself php and css and is trying to combine that with some jQuery.

I have a site with a list of items that I want to allow the user to vote up. (www.blueskycouncil.com you can log in with stack/this)

currently I am updating the database by sending this:

<a href=\"idea_karma.php?pagetype=index&karmatype=ideaspace&id={$row['id']}&sort_id=$sort_id\">

to idea_karma.php, check if the user has already voted on it and if not update the database.

This works fine (noob code aside)

Now I want to do it with jQuery instead so that I only update the point rather than the entire page.

Two two of the variables are dynamic (id and sort_id), the specific value get's assigned in a loop.

My question is how to I approach this?

I have tried a couple of things but I can't seem to get them to work.

This is the sript

<script type="text/javascript"> 
function get() { 
$.get('idea_karma.php', {"pagetype": index, "karmatype": ideaspace, "id": id, "sort_id":   sortid},

function (output) {
    $('#karma').html(output).show();
    }};

}

This is where I do the call to the script

<div class=\"karma-btn\">
<a href=\"idea_karma.php?pagetype=index&karmatype=ideaspace&id= {$row['id']}&sort_id=$sort_id\" onClick=\"get();\">
<img src=\"images/btn_lrg_karma.png\" alt=\"Alternative text\">
<span class=\"voted\"><div id="karma">{$row['karma']</div>}</span></a>                                                      </div>

Answer 1

Take a look at the jQuery API for Ajax, Get, Post. If you need specific help with code you already wrote, I would recommend posting it and we can help you troubleshoot.

Answer 2

What you need to do is change that link so that it will call a javascript function with the proper parameters when it is clicked. The javascript function will do the AJAX, and look something like this:

function updateKarma(id, sortId){
  $.post("idea_karma.php", 
  {pagetype: "index", karmatype: "ideaspace", id: id, sort_id: sortId}, 
  function(){
    //in here you can do you stuff when the call returns
    alert("karma updated");
  });
}

Then, your link code will look like:

<a href=\"javascript:void(0);\" onclick=\"updateKarma('{$row['id']}', '$sort_id')\">

I think this is what you're after?

Answer 3

You can assign an onclick function to the anchor as below -

<a href="#nodo" onclick="update_vote('<?=$row['id']?>','<?=$sort_id?>')">vote</a>

Then you can write a function below in your js file -

function update_vote(id,sort_id){


//Now you can call the url you were calling through the of the jquery.

// You can update spection section in page in the `sucess` callback function of ajax.

}

Detailed documentation of ajax is available at - http://api.jquery.com/jQuery.ajax/

Answer 4

The following is the basic idea to get you going with ajax:

function doKarma(id, sort_id) {
    var keyValue = {
        'method' : 'doKarma',
        'pageType' : 'index',
        'karmaType' : 'ideaspace',
        'id' : id,
        'sort_id' : sort_id
    };    
    $.post('/idea_karma.php', keyValue, function(xml) {
        var stat = $(xml).find('rsp').attr('stat');
        // stat will represent whether your api call failed or was a success
        if (stat === 'ok') {
            // update your counter
            alert('success');
        }
        else {
            // user has already voted or something went wrong
            alert('failed');
        }
    },'xml');
}

This is an example of your idea_karma.php page

<?php

if ($_POST['method'] == 'doKarma') {
    //perform update of karma

    header("Content-type: text/xml");
    // if success
    echo '<rsp stat=\"ok\"></rsp>';
    // else echo '<rsp stat=\"error\"></rsp>';
}

?>