I am developing production scheduling application in php for my company. Here is the prototype with little notes:
http://www.wholesalesignsuperstore.com/jetquote/system/
WHAT I WANT: to have a table similar to Table 2 on the above link where I want to be able to have this toggle button/link with image, where if you click it once, image switches to another image (Stage 1), you press it again it switches to another image (Stage 2), you press it again it will start all over. Basically, toggle switch with 4 images and 4 corresponding values (SEE TABLE 4). But every time when I change the status of the job (click on the image), it should asynchronously (AJAX) save the stage value in MySQL DB.
Here is the code of the page: http://www.wholesalesignsuperstore.com/jetquote/system/
HTML Code:<!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=iso-8859-1" /> <title>System</title> <script type="text/javascript"> // this script allows image toggling var tggle='1'; var obj; window.onload=function() { obj=document.getElementById('playPause') document.getElementById('mylink').onclick=function() { toggle(); return false; } } function toggle(){ if(tggle=='1'){ obj.src="box_1.gif"; tggle='2'; } else if(tggle=='2'){ obj.src="box_2.gif"; tggle='3'; } else if(tggle=='3'){ obj.src="box_3.gif"; tggle='4'; } else { obj.src="box_4.gif"; tggle='1'; } } </script> </head> <body> <!-- PHP CODE GOES HERE --> <br /><br /> <strong>TABLE 3:</strong> JOB STATUS IMAGES AND VALUES ATTACHED TO STATUSES <table cellpadding="2" cellspacing="0" border="1"> <tr align="center"> <td><strong>IMAGE</strong></td> <td><strong>VALUE</strong></td> </tr> <tr align="center"> <td><img src="images/toggle/box_1.gif" alt="1" /></td> <td>1</td> </tr> <tr align="center"> <td><img src="images/toggle/box_2.gif" alt="2" /></td> <td>2</td> </tr> <tr align="center"> <td><img src="images/toggle/box_3.gif" alt="3" /></td> <td>3</td> </tr> <tr align="center"> <td><img src="images/toggle/box_4.gif" alt="4" /></td> <td>4</td> </tr> </table> <BR /> <strong>TABLE 4:</strong> TOGGLE IMAGE SCRIPT (keep clicking on the image below) <div> <a id="mylink" href="index.php"><img id="playPause" src="box_1.gif" alt="" border="0"/></a> </div> </body> </html>Pls HELP WITH AJAX part so I can save it in the DB. Thank you.PHP Code:<?php
include 'init.inc.php';
function get_contents() {
//get stuff in the cart and return in indexed array
$q1 = "SELECT * FROM system WHERE hidden='0' ORDER BY `jobID` DESC";
$incart_r = mysql_query($q1) or die(mysql_error());
$contents = array();
while($incart = mysql_fetch_array($incart_r)){
//build array of info
$item = array(
$incart['jobID'],
$incart['materials'],
$incart['pattern']);
array_push($contents,$item);
}
return $contents ;
}
// Begin Table 1 Display /////////////////////////
echo "<strong>TABLE 1:</strong> Shows the values for statuses of materials and pattern" ;
$c = get_contents();
$table = "
<!-- Begin Cart Display -->
<table summary='Your box' id='table' cellspacing='0' cellpadding='2' border='1'>
<tr>
<th>job ID</th>
<th><img src='images/jobs/materials.gif' alt='Materials' title='Materials'/></th>
<th><img src='images/jobs/pattern.gif' alt='Pattern' title='Pattern'/></th>
</tr>";
if(count($c) <= 0){ //nothing in cart
$table .= "
<tr>
<td class='items' colspan='3'>Empty</td>
</tr>";
}else{ //stuff in the cart so show it
for($i=0; $i < count($c); $i++){
if($i % 2) { //this means if there is a remainder
$table .= "<tr bgcolor=\"#CCCCCC\">";
} else { //if there isn't a remainder we will do the else
$table .= "<tr bgcolor=\"white\">";
}
$table .= "
<td class='items'>" . $c[$i][0] . "</td>
<td class='items'>" . $c[$i][1] . "</td>
<td class='items'>" . $c[$i][2] . "</td>
</tr>";
}
}
$table .= "
</table>
<!-- End Cart Display -->\n\n\n";
/////////////////////////////////////////////////
echo $table;
echo "<br>" ;
// Begin Table 2 Display /////////////////////////
echo "<strong>TABLE 2:</strong> Shows the images for statuses of materials and pattern. Images should be clickable like in Table 4" ;
$c = get_contents();
$table = "
<!-- Begin Cart Display -->
<table summary='Your box' id='table' cellspacing='0' cellpadding='2' border='1'>
<tr>
<th>job ID</th>
<th><img src='images/jobs/materials.gif' alt='Materials' title='Materials'/></th>
<th><img src='images/jobs/pattern.gif' alt='Pattern' title='Pattern'/></th>
</tr>";
if(count($c) <= 0){ //nothing in cart
$table .= "
<tr>
<td class='items' colspan='3'>Empty</td>
</tr>";
}else{ //stuff in the cart so show it
for($i=0; $i < count($c); $i++){
if($i % 2) { //this means if there is a remainder
$table .= "<tr bgcolor=\"#CCCCCC\">";
} else { //if there isn't a remainder we will do the else
$table .= "<tr bgcolor=\"white\">";
}
switch($c[$i][1]){
case "1":
$material = "<img src='images/toggle/box_1.gif'>" ;
break;
case "2":
$material = "<img src='images/toggle/box_2.gif'>" ;
break;
case "3":
$material = "<img src='images/toggle/box_3.gif'>" ;
break;
case "4":
$material = "<img src='images/toggle/box_4.gif'>" ;
break;
}
switch($c[$i][2]){
case "1":
$pattern = "<img src='images/toggle/box_1.gif'>" ;
break;
case "2":
$pattern = "<img src='images/toggle/box_2.gif'>" ;
break;
case "3":
$pattern = "<img src='images/toggle/box_3.gif'>" ;
break;
case "4":
$pattern = "<img src='images/toggle/box_4.gif'>" ;
break;
}
$table .= "
<td class='items'>" . $c[$i][0] . "</td>
<td class='items'>" . $material . "</td>
<td class='items'>" . $pattern . "</td>
</tr>";
}
}
$table .= "
</table>
<!-- End Cart Display -->\n\n\n";
/////////////////////////////////////////////////
echo $table;
?>
Bookmarks