有人知道怎么做吗？每次我尝试过它只需刷新页面并阻止ui关闭！我已经包含了块ui样本以启动事物。
提前感谢你！
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
...
<input id="test" type="submit" value="Show Dialog" />
...
<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
这是我用来比较它的冗长代码：
<?php require_once('Connections/rent.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
$colname_driver = "-1";
if (isset($_GET['id'])) {
$colname_driver = $_GET['id'];
}
mysql_select_db($database_rent, $rent);
$query_driver = sprintf("SELECT * FROM rent WHERE id = %s", GetSQLValueString($colname_driver, "int"));
$driver = mysql_query($query_driver, $rent) or die(mysql_error());
$row_driver = mysql_fetch_assoc($driver);
$totalRows_driver = mysql_num_rows($driver);
$user = $_GET['user'];
?>
<!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" />
<link rel="stylesheet" href="resources/css_02.css">
<style type="text/css">
@import "resources/jquery.keypad.css";
</style>
<link rel="shortcut icon" href="resources/favicon.ico">
<script src="resources/jquery.js"></script>
<script src="resources/jquery.keypad.js"></script>
<script src="resources/blockui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#pay").click(function() {
$.blockUI({ message: $('#question'), css: { width: '1024px' } });
return false; //stop the <form> from submitting, refreshing the page
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
<script type="text/javascript">
$(function () {
$('#rentPaid').keypad();
$('#driver').keypad();
$('#previousRent').keypad();
});
</script>
<script>
$(document).ready(function(){
$('#previousRent').change(function(){
calcResult();
});
$('#rentPaid').change(function(){
calcResult();
});
});
function calcResult() {
$('#result').val( parseFloat($('#previousRent').val() - $('#rentPaid').val()) );
}
</script>
<script type="text/javascript">
<!-- This function just gets the value of the text box 'name1' and assigned to the hidden for text box 'name2'... -->
function valuepassing()
{
var a = document.show.status.value;
var b = document.show.pRent.value;
var c = document.show.rentPaid.value;
var d = document.show.pDate.value;
var e = document.show.result.value;
document.hiddenform.status2.value = a;
document.hiddenform.pRent2.value = b;
document.hiddenform.rentPaid2.value = c;
document.hiddenform.pDate2.value = d;
document.hiddenform.result2.value = e;
<!-- This command submits the hidden form... Nothing but what you have done previously with submit button directly... Now you can get the value from 'name2' text box of hidden form through $_POST method and you can populate the datas as usual.....
document.hiddenform.submit();
}
</script>
<title>Speedy CMS</title>
</head>
<body style="text-align: left;">
<!-- div -->
<div id="question" style="display: none; cursor: default; padding: 20px;">
<span style="font-size: 24px; font-weight: bold;">Would you like to save all the changes and print the receipt?</span>
<p>
<div style="border: 1px black solid; padding: 20px; width: 175px; margin-left: auto; margin-right: auto;">
<img src="resources/speedline.png" width="161" height="58" />
<p>
DRIVER <?php echo $_GET['id']; ?> RECEIPT
<br /><span style="font-size:11px">
<?php
$oBeginDate = new DateTime('last wednesday');
$oEndDate = new DateTime('next wednesday');
echo $oBeginDate->format('d/m/Y') . ' to ' . $oEndDate->format('d/m/Y');
?>
</span>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 12px;">
<tr>
<td align="left">TOTAL RENT</td>
<td align="left">£<?php echo $_POST['pRent2']; ?></td>
</tr>
<tr>
<td align="left">RENT PAID</td>
<td align="left">£<?php echo $_POST['rentPaid2']; ?></td>
</tr>
<tr>
<td align="left"> </td>
<td></td>
</tr>
<tr>
<td align="left">REMAINING</td>
<td align="left">£<?php echo $_POST['result2']; ?></td>
</tr>
</table><br />
<span style="font-size:9px">THANK YOU FOR YOUR PAYMENT. PLEASE KEEP THIS RECEIPT FOR FUTURE REFERENCE. YOU WILL BE ASKED TO PRESENT IT AS EVIDENCE OF PAYMENT MADE.<p>RECEIVED ON <?php echo date("d/m/y H:i a"); ?><p></span>
</div>
</p>
<input type="button" id="yes" value="Save/Print" style="width: 150px; height: 100px;"/>
<input type="button" id="no" value="Cancel" style="width: 150px; height: 100px;"/>
</div>
<!-- heading -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="68%"><img src="resources/speedline.png" /></td>
<td width="32%" align="right"><span style="font-size: 12px;"><a href="main.php?user=<?php echo $_GET['user']; ?>" class='login2' style="font-size: 20px;">VIEW SUMMARY</a></span><img src='resources/spacer.gif' alt="" width='50px' height='1px'/><a href="index.php" class='login2' style="font-size: 20px;">LOG OFF</a></td>
</tr>
</table>
<p>
<span style="font-size: 12px;"><?php echo date("l F d, Y, G:i A") ?><br>
<img src='resources/spacer.gif' width='1px' height='10px'/>
<p style="font-size: 20px;">RENT PAYMENT (<?php echo $_GET['user']; ?> for DRIVER <?php echo $_GET['id']; ?>)
- <?php
$oBeginDate = new DateTime('last wednesday');
$oEndDate = new DateTime('next wednesday');
echo $oBeginDate->format('d/m/Y') . ' to ' . $oEndDate->format('d/m/Y');
?>
<!-- hidden form -->
<form action=" " name="hiddenform" method="post">
<input type="hidden" name="status2" />
<input type="hidden" name="pRent2" />
<input type="hidden" name="rentPaid2" />
<input type="hidden" name="result2" />
<input type="hidden" name="pDate2" value="<?php echo date("l F d, Y, G:i A") ?>" />
</form>
<!-- keypad form -->
<form name="show">
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%">Status</td>
<td width="33%">Total Rent (£)</td>
<td width="33%">Rent Paid (£)</td>
</tr>
<tr>
<td><select name="status" style="width: 320px; font-size: 56px;" size="5">
<option value="vacant" <?php if (!(strcmp("vacant", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>vacant</option>
<option value="clear" <?php if (!(strcmp("clear", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>clear</option>
<option value="awaiting" <?php if (!(strcmp("awaiting", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>awaiting</option>
<option value="paid" <?php if (!(strcmp("paid", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>paid</option>
<option value="not working" <?php if (!(strcmp("not working", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>not working</option>
</select></td>
<td valign="top"><input name="pRent" type="text" id="previousRent" style="height: 60px; width: 200px; font-size: 56px;" value="<?php if ( $row_driver['pRent'] == 0 ) { echo ""; } else { echo $row_driver['pRent']; } ?>"/></td>
<td valign="top"><input type="text" id="rentPaid" name="rentPaid" style="height: 60px; width: 200px; font-size: 56px;"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Last Paid On</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" id="pDate" name="pDate" style="border: #FFF; height: 60px; width: 400px; font-size: 46px;" readonly="readonly" value="<?php if ( $row_driver['pDate'] == 0 ) { echo "N/A"; } else { echo $row_driver['pDate']; } ?>"/>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Remaining (£)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td valign="top"><input type="text" id="result" name="result" style="border: #FFF; height: 60px; width: 200px; font-size: 56px;" readonly="readonly"/></td>
<td colspan="2" align="center"><input type="button" name="pay" id="pay" value="Pay" style="width: 150px; height: 100px;" onclick="return valuepassing()"/>
<img src="resources/spacer.gif" width="25px" height="1px" />
<input type="reset" name="reset" id="reset" value="Reset" style="width: 150px; height: 100px;"/> </td>
</tr>
<tr>
<td><img src="resources/spacer.gif" width="1" height="50px" /></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<!-- footer -->
<img src='resources/spacer.gif' width='1px' height='10px'/><img src='resources/spacer.gif' width='1px' height='10px'/><br />
<span class="bottom">© <?php echo date("Y"); ?> Speedline</span>
<?php
mysql_free_result($driver);
?>
答案 0 :(得分：2)
默认行为是提交页面，您需要使用event.preventDefault()（或return false禁用此功能，但这样做太过分了IMO），如下所示：
$('#test').click(function(e) {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
e.preventDefault(); //stop the <form> from submitting, refreshing the page
});