Question

我有以下2个PHP脚本。 booking.php是动态创建的，它调用mysql数据库并将结果返回到表中。为了使它成为一个简单的例子，只显示几个字段......实际上，表中有54个字段。

这背后的想法是每张桌子都是客户订单。 openbutton或closebutton是表示订单状态的图像。如果关闭，则会显示关闭按钮图像。如果订单已打开，则会显示开启按钮图像。当我点击

一切正常（过程明智），但是，图像只允许我每个表单击一次，并要求我刷新页面再次单击它。

我们想要的是能够在桌面上单击开启按钮/关闭按钮图像多次，并在我单击它并且mysql表已经处理它之后显示正确的图像。

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";

?>

Answer 1

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

应该是：

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

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

和...

echo "$image;$status_change";

转到：

echo $image.";".$status_change.";";

Answer 2

make openbutton＆amp;关闭按钮在第一页中更改像这样

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

单击替换img scr，不需要页面刷新。 Ajax Jquery Javascript Php MySql

2 个答案: