¿Cómo implemento el modo de diálogo JQueryUI en un complemento WP?

2

Tengo un complemento para Wordpress que creé que crea un menú de nivel superior personalizado y un submenú fino. El Submenú llama a esto, (código completo debajo) del formulario php de BranchMaintenance, que muestra las ramas en una tabla, desde la base de datos, (usando $ Wpdb).

Está obteniendo el formulario modal de diálogo JQueryUI para que aparezca el problema. sin duda mi código es responsable, ... despistado re cosas como ninguna variable de nombre external / toplevel funciones según el código      p.ej.     $ (function () {
así que cualquier ayuda ideas adicionales .... Thx

Estoy intentando accionar los scripts que necesito     a) ocultar el formulario de diálogo inicialmente (aparece sobre mi tabla de datos de rama) .. probablemente se equivocó de esta manera     b) mostrarlo cuando se le llama (esto sigue según el código de demostración original)

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>
    
pregunta Neal 18.01.2012 - 13:00

2 respuestas

3

Aunque no tengo claro qué exactamente necesita, tal vez pueda ofrecer algunos consejos.

En primer lugar, la documentación de los distintos sitios tiene todo lo que necesita, por lo que debe visitar el WordPress Codex y jQuery UI ejemplos .

Hook

admin_init: Puede anular el registro / registrar scripts aquí. Si pretende utilizar un script de interfaz de usuario jquery personalizado, por ejemplo:

 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: agrega tu página de complementos, también engancha una página específica para tus scripts

 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

EDITAR: Ejemplo de diálogo

Aquí se muestra un ejemplo de diálogo modal simple que abre un formulario:

 $(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
      });
 });

El código anterior asume que tienes u otra etiqueta con el ID de 'form-wrap'. Dentro de usted coloque su formulario.

Estructura de carpetas

Podría estar equivocado, pero no creo que esto importe mucho, simplemente coloco mis archivos .js en una carpeta / js, css en una carpeta / css, etc ...

Use plugins_url () al poner en cola los archivos de su directorio de complementos.

La página del Diálogo de UI de jQuery debe tener todos los ejemplos que necesita.

Cuando uso esos cuadros de diálogo, generalmente genero html en la página (mostrar: ninguno) y lo uso para la ventana emergente del cuadro de diálogo.

Espero que algo de esto haya ayudado.

EDIT

Además, creo que personalizar tu propio script de jQuery UI en el sitio web de jQuery UI te dará menos archivos para poner en cola.

EDIT 2

Tienes errores en tus add_actions si el código anterior es lo que estás usando.

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

El segundo argumento debe ser una función de PHP, que se parece al ID de tu div HTML.

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

Estoy bastante seguro de que se supone que {page} debe ser reemplazada por la página específica a la que desea llamar los scripts.

Si jQuery es su principal problema, le sugiero que lo haga funcionar en una página html simple que no esté asociada con su sitio hasta que lo tenga funcionando, y luego haga los ganchos correctos.

    
respondido por el Shane 18.01.2012 - 17:36
1

Deberías hacer esto:

add_action( 'admin_enqueue_scripts',     'admin_scripts' ); 
function admin_scripts(){
    wp_enqueue_script( 'jquery-ui-dialog' ); 
    wp_enqueue_style( 'wp-jquery-ui-dialog' );
}

entonces deberías usar:

jQuery('<div> Hii! <div>');   // $ is not defined in backend by default
    
respondido por el T.Todua 15.01.2018 - 13:20

Lea otras preguntas en las etiquetas