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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
leakim971PluritechnicianCommented:
What about your table schema ? Could you post it ?
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

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:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.