我有一个WordPress插件，可以创建自定义的顶级菜单和子菜单。子菜单调用这个（参见下面的代码）BranchMaintenance PHP表单，它在一个表中显示分支，例如数据库，（使用$wpdb).
问题在于如何弹出jQuery UI对话框模式表单。毫无疑问，我的代码是负责的。。。代码中的未知变量outer/toplevel函数，如。$(function() {
我正在尝试操作我需要的脚本a）最初隐藏对话框表单（它显示在我的分支数据表上方）。。可能是弄错了b）调用时显示它（仍然按照原始演示代码）
<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( \'% 7E\', \'~\', $_SERVER[\'REQUEST_URI\']); ?>">
//This was placed in the head of a normal HTML form in the Demo \'http://jqueryui.com/demos/dialog/modal- form.html\'...field validation is removed for now.
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
//$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
//Appnds the data captured to the table in the main page
//$( "#users tbody" ).append( "<tr>" +
// "<td>" + txtBrname.val() + "</td>" +
// "<td>" + txtStrAddress.val() + "</td>" +
// "<td>" + txtManager.val() + "</td>" +
//"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-branch" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
<?php
function fn_DeleteBranch(Id)
{
//$wpdb-> etc etc ; //deletes this branch (by Id) from the dbase
}
?>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table
{ margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th
{ border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<?php
// Hook for adding Dialog form HOPEFULLY
add_action(\'admin_init\', "#dialog-form" );
add_action( \'admin_init\', \'my_Deregister_scripts\' );
add_action( \'admin_enqueue_scripts-options_page-{page}\', \'myplugin_admin_scripts\' );
function my_Deregister_scripts() {
wp_deregister_script( \'jquery-ui\' ); //Deregister WP\'s version
}
function myplugin_admin_scripts(){
// syntax wp_enqueue_script( $handle,$src,$deps,$ver,$in_footer );
// $src = the url where the scripts are stored
// $in_footer Normally scripts are placed in the <head> section, so defaults to false
//wp_register_script( \'jquery-ui\', plugins_url( \'js/jquery-ui.js\', __FILE__ ), array( \'jquery\' ) );
wp_enqueue_script(\'jquery\');
wp_enqueue_script(\'jquery-ui-core\');
wp_enqueue_script(\'jquery-ui-dialog\');
wp_enqueue_script(\'jquery-ui-1.8.17.custom.min\' );
wp_enqueue_script(\'jquery-bgiframe-2.1.2\' );
wp_enqueue_script(\'jquery-ui-mouse\' );
wp_enqueue_script(\'jquery-ui-button\' );
wp_enqueue_script(\'jquery-ui-draggable\' );
wp_enqueue_script(\'jquery-ui-position\' );
wp_enqueue_script(\'jquery-ui-resizable\' );
wp_enqueue_script(\'jquery-effects-core\' );
wp_enqueue_script(\'jquery-ui-widget\' );
//jquery-ui-1.8.17.custom
wp_enqueue_style(\'jquery- style\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css\');
}
?>
<div id="dialog-form" title="Branch Editing">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="BrName">Branch Name</label>
<input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
<label for="Tel">Tel</label>
<input type="text" name="txtTel" id="txtTel" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<?php
echo "<table border=\'1\' cellpadding=\'0\' width=\'100%\'>";
echo "<tr>
<th>ID</th>
<th>Branch Name</th>
<th>Express?</th>
<th>Str.Address</th>
<th>Area</th>
<th>Manager</th>
<th>Owner</th>
<th>Tel</th>
<th>Cell</th>
<th>Email</th>
<th>Edit</th>
<th>delete</th>
</tr>";
global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");
// loop through results of database query, displaying them in the table
foreach ($myrows as $row) {
echo "<tr>";
echo \'<td style="border:none;">\' .$row->BrId. \'</td>\';
echo \'<td style="border:none;">\' .$row->BrName. \'</td>\';
echo \'<td style="border:none;">\' .$row->BrTel. \'</td>\';
echo \'<td style="border:none;"><button onclick="create-branch(\' . $row->Id. \')"></td>\';
echo \'<td style="border:none;"><button onclick="fn_DeleteBranch(\' . $row->Id. \')"></td>\';
echo "</tr>";
}
// close table>
echo "</table>";
?>
<button id="create-branch(\' 0 \')" >Create new branch</button>
</div>