Javascript link, ajax, jquery, cursor is a text editor not a hand/finger and even though the code has worked it always returns the error result.

Question

This is getting really confusing now... Updating a mysql database without leaving the page.... I have 3 bits of code. The javascript in the head tags, the action button in the body and the code to be performed on another page. Here are the three sections:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">

function addItemToUsersList(itemId)
{
  $.ajax({
      'url': 'member-bucketadd-exec.php', 
       'type': 'GET',
      'dataType': 'json', 
      'data': {itemid: itemId}, 
       'success': function(data) 
       {
           if(data.status)
           {
               if(data.added)
                {
                        $("span#success"+itemId).attr("innerHTML","Item added to your personal list");
                        alert("Item added to your list!");

                 }
                 else
                 {
                        $("span#success"+itemId).attr("innerHTML","This item is already on your list");
                        alert("This item is already on your list!");

                }
            }
       },
       beforeSend: function() 
         {
               $("span#success"+itemId).attr("innerHTML","Adding item to your bucketlist...");

         }
          ,'error': function(data) 
          {
          // what happens if the request fails.
            $("span#success"+itemId).attr("innerHTML","An error occureed");
            alert("On your list!");
        }
});
                  }
     </script>

The action button ...

   <a onclick="addItemToUsersList(<?php echo $itemid ; ?>)">Add<img src='images/plus-green.png' /> </a>

And the code that is run on the other url...

<?php 

ini_set('display_errors', 'On');
error_reporting(E_ALL);


 $bucketlist=MYSQL_QUERY( "SELECT * FROM membersbuckets where userid = $userid AND bucketid = $bucketid")
 or die(mysql_error());  

          $bucketlist=mysql_fetch_array($bucketlist) ;

if($bucketlist < 1) 
 {
    mysql_query("INSERT INTO membersbuckets (memberbucketid, userid, bucketid, complete)
    VALUES ('', '$userid', '$bucketid', '0')");
        return json_encode(array("status" => true, "added" => true));
 }
 else
 {
        return json_encode(array("status" => true, "added" => false));
 }


?>

It doesn't matter if the item is already on the list (like it is supposed to check bucket<1), or not on the list I always get the alert("On your list!"); , and also the link / the activation button bit, when I hove over it I don't get the hand/finger i just get a text cursor!!

I have never used jquery, or ajax before this little project so have no idea what to look for to see what is out of place. I have downloaded firebug and tested it with that but I can't see any problem/s. Can anyone help?

Thank you anyone and everyone in advance! hope you can help.

Answer 1

check php manual for mysql_fetch_array your code in

   $bucketlist = mysql_fetch_array($bucketlist) 

will be FALSE with no rows.

Answer 2

The hand/finger does not appear
because it is not defined to appear by default for anchors without the href attribute. Just add href="#" to your anchor or else assign cursor: pointer style to your anchor and it will point.

Returning error result
Like Thau has pointed out, in your ajax request processing code code, in the query you are using two variables $_GET['userid'] and $_GET['itemid'] but you are passing only itemid in the request. Is that the reason of the error? Did you find out?

Answer 3

a) Check your .ajax request:

    <script type="text/javascript" src="./jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

    function addItemToUsersList(itemId) { 
      $.ajax({ 
           'url': 'http://localhost/test/add_member.php',  /*test6ed in my PC*/
           'type': 'GET',   'dataType': 'json',  
           'data': {itemid: itemid, userid: 1},            /*Added itemid, userid */

            /*Params in 'success function*/
           'success': function(data, textStatus, XMLHttpRequest){ 
            if(data.status) { 
              if(data.added) $("#success").attr("innerHTML","Item added"); 
              else $("#success").attr("innerHTML","Already on your list"); 
            } 
           }, 
           beforeSend: function(XMLHttpRequest){ 
               $("#success").attr("innerHTML","Adding item ..."); 
         },
         'error': function(XMLHttpRequest, textStatus, errorThrown) { 
                $("#success").attr("innerHTML","An error occureed"); 
                alert("On your list!"); 
            } 
    }); 
} 
     </script>

    <a href="javascript:addItemToUsersList(1)">Add</a>
    <span id="success"></span>

2) Your PHP server-side code must receive same params in your .ajax request and returning echoing instead a return sentence

$userid   = $_GET['userid' ] ? $_GET['userid']: 0 ;
$bucketid = $_GET['itemid']  ? $_GET['itemid']: 0 ;

if(!$bucketid || !$userid ) 
     echo json_encode( array("status" => false, "added" => false)); 

$sql =  "SELECT * FROM membersbuckets where userid = $userid AND bucketid = $bucketid";
$bucketlist = mysql_query( $sql ) or die(mysql_error());   

$bucketlist = mysql_fetch_array($bucketlist) ; //return FALSE in no rows 

if($bucketlist){ 
    $insert_sql = "INSERT INTO 
                        membersbuckets 
                                 (memberbucketid, userid, bucketid, complete) 
                          VALUES ('', '$userid', '$bucketid', '0')"  ;

    mysql_query($insert_sql);

    //return with an echo 
    echo json_encode(array("status" => true, "added" => true));
 }else { 
    echo json_encode(array("status" => true, "added" => false)); 
 }