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

Question

I have the following 2 php scripts. 我有以下2个php脚本。 booking.php is created on the fly doing a call to a mysql database and returning results into the tables. booking.php是动态创建的，它调用mysql数据库并将结果返回到表中。 To make this a somewhat simple example and only am showing a few fields...actually table has 54 fields in them. 为了使这个例子有些简单，只显示几个字段...实际上，表中有54个字段。

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. 所希望的是能够多次单击表上的openbutton / closedbutton图像，并在单击它并mysql表对其进行处理后显示正确的图像。

booking.php 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 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(){

should be: 应该：

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

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

And... 和...

echo "$image;$status_change";

go to: 去：

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

Answer 2

make openbutton & closebutton changes in the first page like this 像这样在第一页中更改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>

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

问题描述

2 个解决方案

解决方案1
0 2013-10-08 22:31:01

解决方案2
0 2013-10-08 23:35:35

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

问题描述

2 个解决方案

解决方案1 0 2013-10-08 22:31:01

解决方案2 0 2013-10-08 23:35:35

解决方案1
0 2013-10-08 22:31:01

解决方案2
0 2013-10-08 23:35:35