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>

Bear in mind that using JavaScript to show the actions will still require a php (or other server-side) intermediary to effect the changes. — David Thomas
– David Thomas, Commented Oct 27, 2010 at 17:24
there are a few problems... for one, the variables id and sortid do not exist in your get() function. Also, index and ideaspace are strings, you the need quotes. See my example below... — Andy Groff
– Andy Groff, Commented Oct 27, 2010 at 17:31

Andy Groff · Accepted Answer · 2010-10-27 17:26:11Z

4

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?

answered Oct 27, 2010 at 17:26

Andy Groff

2,6701 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alpesh Over a year ago

I became late in providing same solution as yours. :)

Andy Groff Over a year ago

The slashes are because he had slashes in the example... I'm assuming that link is inside a php string enclosed with double quotes... so the literal double quotes need to be escaped.

Jonathan Mayhak Over a year ago

@Alpesh it's amazing how quickly answers happen on SO. I saw this question with zero responses and thought I could answer it...while I'm typing my answer 3 other answers appear and the question is marked as solved before I finish typing. Amazing.

Alpesh Over a year ago

@Jonathan Mayhak: so true. But this is the actual advantage of stack overflow.

Alpesh · Accepted Answer · 2010-10-27 17:28:24Z

2

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/

answered Oct 27, 2010 at 17:28

Alpesh

5,4152 gold badges23 silver badges19 bronze badges

Comments

Jonathan Mayhak · Accepted Answer · 2010-10-27 17:36:06Z

2

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>';
}

?>

answered Oct 27, 2010 at 17:36

Jonathan Mayhak

12.5k3 gold badges23 silver badges17 bronze badges

1 Comment

ThomPete Over a year ago

thnx. Someone beat you to the "correct" answer but all answers are much appreciated.

Bot · Accepted Answer · 2010-10-27 17:19:50Z

0

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.

answered Oct 27, 2010 at 17:19

Bot

11.9k11 gold badges78 silver badges134 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related