1st time ajax user

[hwoarang69]

i have never used ajax before so i want to make sure iam doing this right.

this php code work fine. i didnt add it bc it was long code. but all it does it add one or sub one from database.

<?php
    //if user hit like link add one from database
    //if user hit dislike link sub one from database
?>

i am building a raiting system. i have two buttons here

<a href='index.php' id='like'>thumb up</a>
<a href='index.php' id='dislike'>thumb down</a>

than i am displaying how many liks or dislike user have. info i am getting from database. so when user hit like button i am add one t database and here i am getting the infomation. this also work fine.

...
$like_db -- $dislike_db

the problem is the page reload every time user hit like or dislike links. i want it to do same thing but no reload.
so here what iam think so far:

   $(document).ready(function(){
    $("#like").click(function(){
         //get information from database. 
          //display information here? -- $like_db
      }});

    $("#dislike").click(function(){
         //get information from database. 
          //display information here? -- $dislike_db
      }});
    });
    });

[fobos]

This is a really good website that i learned from.

W3Schools

[hwoarang69]

thanks, i think iam missing some thing but not sure what. when i run this nothing is being printed in div_1. also it not runing js file.

if user hit button i want to run ajax.js file which runs add.php. and it will add inside div
index.php

<button type='submit' onClick='ajax_1('div_1', 'test.php');'>
<div id='div_1'></div>     

ajax.js

function ajax_1(div, file)
{
    //some broser use xmlhttpreqest other use micro...
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXOject('Microsoft.XMLHTTP');
    }

    //when state is change  
    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readState == 4 && xmlhttp.status == 200)
        {
            //every thing is ok. start coding here
            //change the html of div
            document.getElementById(div).innerHTML = xmlhttp.reponseText;

        }
    }
    xmlhttp.open('GET', file, true);
    xmlhttp.send();
}

add.php

<?php

$item_query = mysql_query("SELECT * FROM item WHERE item_id = $item_id_g");  
    $row = mysql_fetch_assoc($item_query);
        $sold_db = $row['sold'];
        $thumb_up_db = $row['thumb_up'];
        $thumb_down_db = $row['thumb_down'];

echo"test";
echo"$thumb_up_db";

?>

[fobos]

First off you are trying to pass test.php, and you show your add.php, so nothing is going to happen there. Second, in your add.php, you need a connection and an id that gets passed from the ajax function. I would suggest that you get the example from w3shools so you get a basic idea. Its a learning process, but you will get it.

[hwoarang69]

cool got it to working :)

thanks.

[hwoarang69]

is there a way to send php variable to js click function? so soon as user click the button than $num should go to js.

i was thinking making a hidden text field and store the $num in there. than in js i can get the val of hidden text by:

var n = hiddenfield.val();

but is there a better way to do this?

<?php
$num = 3;

echo"<button type='submit' id='like_button' class='button' name='like_button'>Like</button>";
?>


$('#like_button').click(function()
{
    //here i want to get the value of $num

});