Italiano
Română
РусскийCómo implementar un diálogo modal de jQuery UI en un plugin de WordPress
Tengo un plugin de WordPress que crea un menú principal personalizado y submenús correctamente. El submenú llama a este formulario PHP de BranchMaintenance (ver código abajo), que muestra sucursales en una tabla desde la base de datos (usando $wpdb).
El problema es hacer que aparezca el formulario modal de jQuery UI. Probablemente mi código sea el responsable... no tengo claro cosas como funciones de nivel superior sin nombre como aparece en el código, por ejemplo $(function() {
Estoy intentando activar los scripts necesarios para: a) Ocultar inicialmente el formulario del diálogo (aparece encima de mi tabla de datos de sucursales)... probablemente lo hice mal b) Mostrarlo cuando sea llamado (esto sigue como en el código demo original)
<div class="wrap" id="main">
<form name="Mantenimiento de Sucursales Sandwich Baron" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<script>
$(function() {
// una solución para un fallo en el sistema demo (http://dev.jqueryui.com/ticket/4375), ¡ignorar!
//$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Crear una cuenta": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
//Añade los datos capturados a la tabla en la página principal
//$( "#users tbody" ).append( "<tr>" +
// "<td>" + txtBrname.val() + "</td>" +
// "<td>" + txtStrAddress.val() + "</td>" +
// "<td>" + txtManager.val() + "</td>" +
//"</tr>" );
$( this ).dialog( "close" );
}
},
Cancelar: 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 ; //elimina esta sucursal (por Id) de la base de datos
}
?>
<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 para añadir el formulario de diálogo (ESPERO)
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' ); //Desregistrar la versión de WP
}
function myplugin_admin_scripts(){
// sintaxis wp_enqueue_script( $handle,$src,$deps,$ver,$in_footer );
// $src = la URL donde se almacenan los scripts
// $in_footer Normalmente los scripts se colocan en la sección <head>, por defecto es false
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="Edición de Sucursal">
<p class="validateTips">Todos los campos del formulario son requeridos.</p>
<form>
<fieldset>
<label for="BrName">Nombre de Sucursal</label>
<input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
<label for="Tel">Teléfono</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>Nombre Sucursal</th>
<th>¿Express?</th>
<th>Dirección</th>
<th>Área</th>
<th>Gerente</th>
<th>Propietario</th>
<th>Teléfono</th>
<th>Celular</th>
<th>Email</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>";
global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");
// recorrer resultados de la consulta a la base de datos, mostrándolos en la tabla
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>";
}
// cerrar tabla
echo "</table>";
?>
<button id="create-branch(' 0 ')" >Crear nueva sucursal</button>
</div>
Gracias, ahora he hecho básicamente eso... me tomó un tiempo juntar todas las partes. Tengo mi plugin Admin TopLevel funcionando con sus submenús, uno de los cuales maneja el formulario BranchMaint mencionado... que debe tener el popup/dialog que debería manejar las Ediciones y/o Insertar NewBranch, y usar $wpdb para insertar o actualizar según corresponda. Sin embargo, la funcionalidad del popup todavía no funciona. He actualizado mi código anterior, con action hooks a my-functions, por si eso ayuda.
Neal
Estoy investigando tu sugerencia (Shane), buscando información sobre tags etc. 2 semanas de php y WordPress. (11 años de c# Asp.net). También investigando cómo actualizar automáticamente el formulario principal.
Neal
Mira mi segunda edición - También, asegúrate de revisar el código fuente en la página renderizada para ver si se llaman los scripts, y cualquier plugin como Firebug para Firefox puede ayudar con errores de javascript.
Shane
¿Tu archivo de plugin se ve exactamente como el código de arriba? Podría ser útil si me muestras tu archivo de plugin.
Shane
Sí, mi error... debería ser una llamada a una función de PHP.
Neal