2012-01-23 4 views
0

a 비즈의 데이터를 관리하기위한 약간의 Wordpress 플러그인을 작성했습니다. 'Admin'영역에서 사용자 정의 새 TopLevel 메뉴 아래에있는 하위 메뉴 (해당 하위 메뉴의 양식 아래에있는 코드는 활성화되어 TopLevel 메뉴와 하위 메뉴를 활성화합니다.)'autoOpen'이 false로 설정된 JQuery dialog-div (WP 관리 영역에서)

하지만 Div (팝업) (<div id="dialog-form")이 즉시 표시됩니다.

jQuery(document).ready(function(){ 을 사용하고 있는데 jQuery('#dialog-form').hide();을 사용하거나 obj var에 경고를 표시하면 정상적으로 작동합니다.

나머지 예 : '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> 
+0

코드 줄이 너무 많습니다. css + javascript 문제를 디버깅 할 때 한 줄 또는 두 줄만 있으면됩니다. 너무 복잡하지는 마십시오. – Rufus

+0

누군가가 도움이된다고 생각했습니다. 문제는이 $ info.dialog ({ 'dialogClass': 'wp-dialog'등, –

답변

0
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 및 기타 라이브러리가 포함되어 있습니다.

+0

wp_enqueue_script ('jquery-ui-dialog'))의 어딘가에 있습니다. 실제로 관리자 쪽에서 필요한 모든 것입니다. 물론 분명히 .. .. –

+0

작동하지만 일부 재생 Rnd 등 (맹세) 나는 yellowish 대화가 위로 있습니다.하지만 나머지는 작동하지 않습니다 var $ info = jQuery ("# dialog-form"); $ info.dialog ({ 'dialogClass': 'WP-대화', '모달'거짓, '에 AutoOpen'거짓, 'closeOnEscape': 사실, '버튼': { "닫기"기능() { $ (this) .dialog ('close'); } } }); –

관련 문제