Как реализовать JQueryUI-диалог в плагине WP?

У меня есть плагин WordPress, который я создал, который создает настраиваемое меню верхнего уровня и подменю в порядке. Подменю называет это (весь код ниже) формой BranchMaintenance php, которая показывает ветви в таблице, ex dbase, (используя $ Wpdb).

Это вызывает появление модальной формы диалога JQueryUI, что является проблемой. без сомнения, мой код отвечает, … clueless re такие вещи, как никакие переменные имени / внешние функции в соответствии с кодом, например $ (function () {
так что любая помощь дополнительных идей …. Thx

Я пытаюсь выполнить скрипты, которые мне нужны: a) сначала скрыть форму диалога (она появляется над моей таблицей данных ветвей) .. Вероятно, так неправильно, b) отобразить ее при вызове (это по-прежнему в соответствии с исходным демо-кодом)

Thx Neal

<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> 

Хотя я не понимаю, что именно вам нужно, может быть, я мог бы предложить несколько указателей.

Во-первых, в документации на разных сайтах есть все, что вам нужно, поэтому вы должны посетить примеры WordPress Codex и jQuery .

Крючки

admin_init: Здесь вы можете отменить регистрацию / регистрацию скриптов. Если вы собираетесь использовать собственный jQuery-скрипт ui, например:

  function my_register_scripts() { wp_deregister_script( 'jquery-ui' ); //Deregister WP's version wp_register_script( 'jquery-ui', plugins_url( 'js/jquery-ui.js', __FILE__ ), array( 'jquery' ) ); //Register your own } add_action( 'admin_init', 'my_register_scripts' ); 

admin_menu: добавьте свою страницу плагина, заклейте конкретную страницу для своих скриптов

  function my_menu() { $admin_page = add_menu_page(/*Look at the codex for the args, link below*/); //Add your page //use the $admin_page variable for targeted script loading add_action( 'admin_print_styles-' . $admin_page, 'function_that_enqueues_css_here' ); add_action( 'admin_print_scripts-' . $admin_page, 'function_that_enqueues_js_here' ); } add_action( 'admin_menu', 'my_menu' ); 

add_menu_page

EDIT: пример диалога

Вот простой пример модального диалога, который открывает форму:

  $(document).ready(function(){ $('#form-wrap').dialog({ autoOpen: true, //FALSE if you open the dialog with, for example, a button click title: 'My Form', modal: true }); }); 

В приведенном выше коде предполагается, что у вас есть или другой тег с идентификатором «form-wrap». Внутри вы размещаете свою форму.

Структура папок

Я мог ошибаться, но я не думаю, что это имеет большое значение, я просто помещал свои .js-файлы в папку / js, css в папку / css и т. Д. …

Используйте plugins_url () при размещении файлов в вашем каталоге плагинов.

На странице диалога JQuery UI Dialog должны быть все необходимые примеры.

Когда я использую эти диалоги, я обычно генерирую html на странице (display: none) и использую это для всплывающего окна диалога.

Надеюсь, что это помогло.

РЕДАКТИРОВАТЬ

Кроме того, я думаю, что настройка собственного скрипта пользовательского интерфейса jQuery на веб-сайте jQuery UI даст вам меньше файлов для размещения в очереди.

EDIT 2

У вас есть ошибки в ваших add_actions, если приведенный выше код – это то, что вы используете.

  add_action('admin_init', "#dialog-form" ); 

Второй аргумент должен быть функцией PHP, которая выглядит как идентификатор вашего HTML-div.

  add_action( 'admin_enqueue_scripts-options_page-{page}', 'myplugin_admin_scripts' ); 

Я уверен, что {page} предполагается заменить на конкретную страницу, на которую вы хотите вызвать скрипты.

Если jQuery является вашей основной проблемой, я предлагаю, возможно, заставить его работать с простой html-страницей, отсоединенной от вашего сайта, до тех пор, пока вы ее не заработаете, а затем правильно закрепите крючки.