Question

我写了一个小的WORDPRESS插件，用于维护aBiz的分支数据..在aDMIN区域undera自定义新的TopLevel菜单及其子菜单（下面的代码来自该子菜单的形式。该插件可以激活并创建TopLevel菜单和子菜单。

但是，我的Div（弹出窗口）（

THX 尼尔

<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

您正在对尚未在DOM中的元素调用jQuery方法。您的HTML在对话框调用之下。将您的<script></script> 置于 HTML下方，然后重试。

wordpress 3.3.1插件管理页面上的JQueryUI模式对话框表单不会弹出＆＃39;

1 个答案: