Italiano
Español
RomânăКак реализовать модальное окно jQuery UI Dialog в плагине WordPress?
Я создал плагин для WordPress, который успешно создает кастомное верхнее меню и подменю. Подменю вызывает эту форму (см. код ниже) BranchMaintenance PHP, которая отображает филиалы в таблице из базы данных (используя $wpdb).
Проблема в том, чтобы заставить модальное окно jQuery UI Dialog появляться. Вероятно, проблема в моем коде... не понимаю такие вещи, как отсутствие именованных внешних/верхнеуровневых функций в коде, например $(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']); ?>">
<!-- Этот скрипт был размещен в head обычной HTML формы в демо 'http://jqueryui.com/demos/dialog/modal-form.html'...валидация полей временно удалена -->
<script>
$(function() {
// обходной путь для бага в демо-системе (http://dev.jqueryui.com/ticket/4375), можно игнорировать!
//$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Создать аккаунт": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
// Добавляем захваченные данные в таблицу на главной странице
//$( "#users tbody" ).append( "<tr>" +
// "<td>" + txtBrname.val() + "</td>" +
// "<td>" + txtStrAddress.val() + "</td>" +
// "<td>" + txtManager.val() + "</td>" +
//"</tr>" );
$( this ).dialog( "close" );
}
},
Отмена: 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-> и т.д. ; //удаляет этот филиал (по Id) из базы данных
}
?>
<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', "#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' ); //Отменяем регистрацию версии WP
}
function myplugin_admin_scripts(){
// синтаксис wp_enqueue_script( $handle,$src,$deps,$ver,$in_footer );
// $src = URL где хранятся скрипты
// $in_footer Обычно скрипты помещаются в <head>, поэтому по умолчанию 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' );
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="Редактирование филиала">
<p class="validateTips">Все поля формы обязательны для заполнения.</p>
<form>
<fieldset>
<label for="BrName">Название филиала</label>
<input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
<label for="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>Название филиала</th>
<th>Экспресс?</th>
<th>Адрес</th>
<th>Район</th>
<th>Менеджер</th>
<th>Владелец</th>
<th>Телефон</th>
<th>Мобильный</th>
<th>Email</th>
<th>Редактировать</th>
<th>Удалить</th>
</tr>";
global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");
// перебираем результаты запроса к БД, отображая их в таблице
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>";
}
// закрываем таблицу
echo "</table>";
?>
<button id="create-branch(' 0 ')" >Создать новый филиал</button>
</div>
Спасибо, сейчас я в основном сделал это... потребовалось время, чтобы собрать все части воедино. У меня работает мой плагин Admin TopLevel с подменю, одно из которых управляет упомянутой формой BranchMaint... которая должна иметь всплывающее окно / диалог для обработки редактирования и/или добавления новой ветки, используя $wpdb для вставки или обновления данных. Однако функциональность всплывающего окна до сих пор не работает. Я обновил свой код выше, добавив хуки действий в my-functions, если это поможет.
Neal
Я изучаю ваше предложение (Shane), исследую теги и т.д. 2 недели работы с php и WordPress. (11 лет опыта с c# Asp.net). Также изучаю автоматическое обновление родительской формы.
Neal
Смотрите мою вторую правку - Также обязательно проверьте исходный код на отображаемой странице, чтобы убедиться, что скрипты вызываются, а такие инструменты, как Firebug для Firefox, могут помочь с ошибками javascript.
Shane
Ваш файл плагина выглядит в точности как код выше? Было бы полезно, если бы вы могли показать мне ваш файл плагина.
Shane
Да, моя ошибка,... это должен быть вызов php-функции.
Neal