JQuery对话框-autoOpen设置为false的div(在WP管理区域中)不起作用

Question

我已经写了一个小的Wordpress插件，它是用来维护aBiz的分支数据的。在自定义新的TopLevel菜单及其子菜单下的“管理”区域(下面的代码来自于该子菜单的表单)。插件激活并创建TopLevel菜单和子菜单。)

但是，我的分区(弹出)(<div id="dialog-form")立即显示。

我正在使用jQuery(document).ready(function(){，如果我在其中使用jQuery('#dialog-form').hide();，或者在obj变量上使用alert，它就在那里并且可以正常工作。

其余的如'autoOpen' : false,什么也不做

<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( '%   7E', '~', $_SERVER['REQUEST_URI']); ?>">

<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 
add_action('admin_init', 'register_jquery_ui');
function register_jquery_ui() {
//apparently all that is required is the dependancy 'jquery-ui-dialog' (wp auto includes all this in the admin section, ...but whether that or this I have the same problem)
 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-droppable’);
 wp_enqueue_script( ‘jquery-form’ );
 wp_enqueue_script('jquery-ui-position' );
 wp_enqueue_script('jquery-ui-resizable' );
 wp_enqueue_script('jquery-effects-core' );
 wp_enqueue_script('jquery-ui-widget' ); 
 wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); 
 // or A style available in WP 
 // wp_enqueue_style ('wp-jquery-ui-dialog');      

// admin_enqueue_script (  'my-modals-handle' ,'What bloody URL?' , array('jquery-ui-dialog')); // dependencies     

}
?>

<script>  
jQuery(document).ready(function(){ 
// jQuery('#dialog-form').hide();      //this works

var $info = jQuery("#dialog-form");   
// alert("$info = " + $info);           //this also works, shows we have the object, but the beneath does not.

//The rest is not working,...my div/dialog is visible immediately and not as a popup.(autoOpen is set to false....????)
 $info.dialog({ 
         'dialogClass'   : 'wp-dialog',
         'modal'         : true,
         'autoOpen'      : false,
         'closeOnEscape' : true,
         'buttons'       : {
         "Close": function() {
             jQuery(this).dialog('close');
         }
    }
 });
  $("#open-modal").click(function(event) {
     event.preventDefault();
     $info.dialog('open');
  }); 
}); 

</script>

<div id="dialog-form" title="Branch Editing" style="background-color:yellow;border:1px solid black;width:200px;height:200px;">
<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="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>Tel</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>

Answer 1

 wp_enqueue_script('jquery-ui-core');
 wp_enqueue_script('jquery-ui-dialog');
 wp_enqueue_script('jquery-ui-1.8.17.custom.min' );

你不觉得这太过分了吗？我非常确定jquery-ui-1.8.17.custom.min已经包含了jquery-ui-dialog和库的其他部分。