0

I have the following 2 php scripts. booking.php is created on the fly doing a call to a mysql database and returning results into the tables. To make this a somewhat simple example and only am showing a few fields...actually table has 54 fields in them.

The idea behind this is every table is a Customer order. The openbutton or closebutton is a image representing what status the order is in. If it is closed the closedbutton image appears. If the order is opened then the openbutton image appears. when I click on the

Everything work (process wise), however, the image only allows me to click it once per table and requires me to refresh the page to click on it again.

What is want is to be able to click the openbutton/closedbutton image on a table as many times as I want and have the correct image appear after I click it and the mysql table has processed it.

booking.php

<?php
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.status_button').click(function(){
var element = $(this);
var I = element.attr('id');
var id=$('#id'+I).val();
var sname = $(this).attr('title');

$.post('openclose.php', {id: id, sname: sname},
function(data){
var response = (data).split(';',2);
$('#messageA'+I).html(response[0]);
$('#messageA'+I).hide();
$('#messageA'+I).fadeIn(1500);
$('#messageB'+I).html(response[1]);
$('#messageB'+I).hide();
$('#messageB'+I).fadeIn(1500);
});
return false
;})
;});
</script>
<style type='text/css'>
table {border: 1px solid black}
td, tr {border: 0}
</style>
</head>

<body>
<table>
<th>Id</th>
<th>Year</th>
<th>First Name</th>
<th>Last Name</th>
<th>Actions</th>
<tr>
<td><input type='text' id='id1' size='3' readonly='readonly' value='1'></td>
<td><input type='text' id='year1' size='2' value='2013'></td>
<td><input type='text' id='fname1' size='10' value='Brian'></td>
<td><input type='text' id='lname1' size='15'value='Smith'></td>
<td><div id='messageB1'><a id='1', href='#' class = 'status_button' title='Close1'>           </div>
<div id='messageA1'><img src='images/openbutton.jpg', title='Order Status' border='0' height='24' width='24'></img></div></a></td>
</tr>
</table>
<table>
<th>Id</th>
<th>Year</th>
<th>First Name</th>
<th>Last Name</th>
<th>Actions</th>
<tr>
<td><input type='text' id='id2' size='3' readonly='readonly' value='2'></td>
<td><input type='text' id='year2' size='2' value='2014'></td>
<td><input type='text' id='fname2' size='10' value='Kurt'></td>
<td><input type='text' id='lname2' size='15'value='Jones'></td>
<td><div id='messageB2'><a id='2', href='#' class = 'status_button' title='Open2'>    </div>
<div id='messageA2'><img src='images/closebutton.jpg', title='Order Status' border='0' height='24' width='24'></img></div></a></td>
</tr>
</table>
<table>
<th>Id</th>
<th>Year</th>
<th>First Name</th>
<th>Last Name</th>
<th>Actions</th>
<tr>
<td><input type='text' id='id3' size='3' readonly='readonly' value='2'></td>
<td><input type='text' id='year3' size='2' value='2014'></td>
<td><input type='text' id='fname3' size='10' value='Ryan'></td>
<td><input type='text' id='lname3' size='15'value='Davis'></td>
<td><div id='messageB3'><a id='3', href='#' class = 'status_button' title='Open3'></div>
<div id='messageA3'><img src='images/openbutton.jpg', title='Order Status' border='0' height='24' width='24'></img></div></a></td>
</tr>
</table>
</body> 
?>

openclose.php

<?php
include('connection.php');
$id=$_POST['id'];
$sname=$_POST['sname'];

$rest = substr($sname, 0, -1);

if ($rest == "Open")
    $change="O";
else
    $change="C";    

$query = "UPDATE info SET status_ = '$change' WHERE id = $id";

$result = mysql_query($query) or die ( mysql_error ());

if ($change == "O")
    $image ="<img src='images/openbutton.jpg', title='Order Status' border='0' height='24' width='24'></img>";
else
    $image="<img src='images/closebutton.jpg', title='Order Status' border='0' height='24' width='24'></img>"; 

if ($rest == "Close")
    $status_change ="<a id='$id', href='#' class = 'status_button' title='Open'>";
else
    $status_change= "<a id='$id', href='#' class = 'status_button' title='Close'>"; 

echo "$image;$status_change";

?>
4

2 回答 2

0 
$('.status_button').click(function(){

应该：

$(document).on('click', '.status_button', function(){

http://api.jquery.com/on/

和...

echo "$image;$status_change";

去：

echo $image.";".$status_change.";";
于 2013-10-08T22:31:01.547 回答
0

像这样在第一页中进行 openbutton 和 closebutton 更改

<div id='message'><img src='images/closebutton.jpg' id='message' title='Order Status' border='0' height='24' width='24'></img></div>
<script>
    $('img#message').click(function(){
        var messageimage;
        messageimage = $('img#message').attr();
        if(messageimage == 'images/closebutton.jpg'){
            $('img#message').attr('src','images/openbutton.jpg');
        }else{
           $('img#message').attr('src','images/closebutton.jpg'); 
        }
    });
</script>
于 2013-10-08T23:35:35.513 回答