我使用jQueryUI的对话框与模态窗体选项打开一个弹出窗体。当用户单击按钮时,它将其输入提交到数据库,然后关闭对话框。一切都在工作,除非关闭对话框。 (手动关闭按钮的工作原理;它从PHP数据库脚本返回后不会自动关闭,这是脚本代码(我试图加粗不行的行,显然你不能嵌入代码标签中的粗体) ,但线条被双星号包围,使其脱颖而出,这些不是实际代码的一部分!)
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375),ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
var name = $( "#name" ),email = $( "#email" ),company = $( "#company" ),plate = $( "#plate"),allFields = $( [] ).add( name ).add( email ).add( company ).add( plate ),tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight",1500 );
},500 );
}
function checkLength( o,n,min,max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o,regexp,n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,height: 390,width: 350,position: 'top',modal: true,zIndex: 3000,buttons: {
"Submit your plate": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( plate,"plate code",1,7 );
bValid = bValid && checkLength( email,"email",6,80 );
bValid = bValid && checkLength( company,"company",100);
bValid = bValid && checkRegexp( email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ismi@instoremarketer.org" );
if ( bValid ) {
var nameStr = name.val();
var emailStr = email.val();
var companyStr = company.val();
var plateStr = plate.val();
var string = 'name='+ nameStr+'&email='+emailStr+'&company='+companyStr+'&plate='+plateStr;
//alert('string: '+string);
$.ajax({
type: "POST",url: "submit_plate.PHP",data: string,dataType: 'json',cache: false,success: function(returnData){
alert(returnData.msg);
if(returnData.error === false) {
**$( this ).dialog( "close" );**
}
else {
alert("Error: "+returnData.msg);
}
}
});
}
},Cancel: function() {
$( this ).dialog( "close" );
}
},close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#submit-plate" )
//.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
有任何想法吗?
EDITED添加PHP代码
include('../cfg/ez_sql.PHP');
include('../cfg/db_setup.PHP');
$err = false;
if (isset($_REQUEST['plate'])) {
$raw = "INSERT INTO dot_plate_submissions (plate_code,plate_name,plate_company,plate_email) VALUES ('%s','%s','%s')";
$clean = sprintf($raw,MysqL_real_escape_string($_REQUEST['plate']),MysqL_real_escape_string($_REQUEST['name']),MysqL_real_escape_string($_REQUEST['company']),MysqL_real_escape_string($_REQUEST['email']));
//error_log("cleaned query: $clean");
$db->query($clean);
}
else {
$err = true;
}
if($err) {
$return['error'] = true;
$return['msg'] = "There was an error submitting your plate";
}
else {
$return['error'] = false;
$return['msg'] = "made it to PHP";
}
echo json_encode($return);
?>
所以即使错误是错误的,ajax调用仍然会收回两个数据。