How do I use jQuery and AJAX to add ( or remove ) rows to a pick list?

I have table displaying data.  The last column of which I'd like to be a toggle between picked and not ( picked ).  I'd like the indicator to be an image.  The selected rows have an ID which would be stored in a MySQL table.
I'd like to use jQuery and AJAX to achieve this effect.
LVL 1
radarhillAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
The HTML page :

ajax call to : myajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$(".construction_data_id").bind('click', function() {
			$.ajax({
			   type: "POST",
			   url: "myajax.php",
			   data: "data_id=" + this.id.replace("construction_data_id_",""),
			   success: function(msg){
				 // we change the picture only if the insert is good (id is returned)
				 if( msg != 0 ) {
					 $("#construction_data_id_" + msg).attr("src", "images/arrow-down.gif");
				 }
			   }
			 });
		});
	});
</script>
</head>
<body>
<div id="dt_id_table">
 <table cellpadding="0" cellspacing="0" border="0" class="dt_display" id="dt_display" summary="DT Sample">
      <caption>DT Sample</caption>
      <thead>
            <tr>
                  <th>District</th>
                  <th>Address</th>
                  <th>Type</th>
                  <th>Action</th>
            </tr>
      </thead>
      <tfoot>
            <tr>
                  <td><input type="text" name="search_district" value="District" class="search_init" /></td>
                  <td><input type="text" name="search_address" value="Address" class="search_init" /></td>
                  <td><input type="text" name="search_type" value="Type" class="search_init" /></td>
                  <td>Action</td>
            </tr>
      </tfoot>
      <tbody>
            <tr>
                  <td>CRD - Gulf Islands</td>
                  <td>156 Alexander Blvd, SSI</td>
                  <td>Accessory Buildings</td>
                  <td><img class="construction_data_id" id="construction_data_id_47222" src="images/arrow-up.gif" /></td>
            </tr>
            <tr class="detail_tag">
                  <td>CRD - Gulf Islands</td>
                  <td>152 Park Dr, SSI</td>
                  <td>Accessory Buildings</td>
                  <td><img class="construction_data_id" id="construction_data_id_47221" src="images/arrow-up.gif" /></td>
            </tr>
      </tbody>
 </table>
</div>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Do you have the table ? The php code that will update the table ? Please post them.
0
 
radarhillAuthor Commented:
What I am trying to use jQuery and AJAX for is to add an ID to a MySQL table for each chose the user makes.  They would make their choice by clicking on the image within the Action column.  The images would change to an alternate indicating the ID was selected.  The following table is the display:
<div id="dt_id_table">
 <table cellpadding="0" cellspacing="0" border="0" class="dt_display" id="dt_display" summary="DT Sample">
      <caption>DT Sample</caption>
      <thead>
            <tr>
                  <th>District</th>
                  <th>Address</th>
                  <th>Type</th>
                  <th>Action</th>
            </tr>
      </thead>
      <tfoot>
            <tr>
                  <td><input type="text" name="search_district" value="District" class="search_init" /></td>
                  <td><input type="text" name="search_address" value="Address" class="search_init" /></td>
                  <td><input type="text" name="search_type" value="Type" class="search_init" /></td>
                  <td>Action</td>
            </tr>
      </tfoot>
      <tbody>
            <tr>
                  <td>CRD - Gulf Islands</td>
                  <td>156 Alexander Blvd, SSI</td>
                  <td>Accessory Buildings</td>
                  <td><img class="construction_data_id" id="construction_data_id_47222" src="images/arrow-up.gif" /></td>
            </tr>
            <tr class="detail_tag">
                  <td>CRD - Gulf Islands</td>
                  <td>152 Park Dr, SSI</td>
                  <td>Accessory Buildings</td>
                  <td><img class="construction_data_id" id="construction_data_id_47221" src="images/arrow-up.gif" /></td>
            </tr>
      </tbody>
 </table>
</div>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
leakim971PluritechnicianCommented:
What about your table schema ? Could you post it ?
0
 
radarhillAuthor Commented:
This would be the table where the ID relating to the data ( 47221 and 47222 ) and client ID is stored.

CREATE TABLE `tracker` (
`tracker_id` INT( 15 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`data_id` INT( 15 ) NOT NULL ,
`client_id` INT( 15 ) NOT NULL
)
0
 
leakim971PluritechnicianCommented:
So th user click on the image (i.e : 47222) and you insert a row in the mysql table : INSERT INTO tracker (data_id, client_id) VALUES (47222, the client id here)

Where do we get client_id value ? (<< the client id here >>)
0
 
radarhillAuthor Commented:
The client ID is stored as a $_SESSION value.  This is determined after a successful log-in.
0
 
leakim971PluritechnicianCommented:
OK the php ajax which do the INSERT :

(of course, replace localhost, mysql_user/password and database_name with your own values)
<?PHP
	$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
	if(!$link) die('Could not connect: ' . mysql_error());
	if(!mysql_select_db('database_name'))die('Could not select database: ' . mysql_error());
 
        $query = "INSERT INTO tracker (data_id, client_id) VALUES (" . $_POST["data_id"] . "," . $_SESSION['client_id'] . ")";
	$result = mysql_query($query);

	if(!$result) 
           echo "bad";
        else
  	   echo "good";
	mysql_close($link);
?>

Open in new window

0
 
radarhillAuthor Commented:
Thanks.  I get that part.  What I cannot 'get' is the jQuery and AJAX script to:  run this script and switch the images between picked and not picked.
0
 
leakim971PluritechnicianCommented:
Replace :

        if(!$result)
           echo "bad";
        else
           echo "good";

by :


if(!$result) 
           echo "0";
        else
           echo $_POST["data_id"];

Open in new window

0
 
leakim971PluritechnicianCommented:
You should have this picture : arrow-down.gif
under your images folder
0
All Courses

From novice to tech pro — start learning today.