Español
Română
РусскийCome implementare un dialog modale jQuery UI in un plugin WordPress?
Ho creato un plugin WordPress che genera un menu principale personalizzato e sottomenu correttamente. Il sottomenu chiama il form PHP BranchMaintenance (vedi codice sotto), che mostra le filiali in una tabella, recuperate dal database (usando $wpdb).
Il problema è far comparire correttamente il form modale jQuery UI. Probabilmente il mio codice è la causa, soprattutto per aspetti come le funzioni senza nome a livello globale come nel codice (es. $(function() {).
Sto cercando di gestire gli script necessari per: a) nascondere inizialmente il form dialog (attualmente appare sopra la tabella dei dati) b) visualizzarlo quando richiamato (questo parte è ancora come nel codice demo originale)
<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<!-- Questo era posizionato nell'head di un normale form HTML nel Demo 'http://jqueryui.com/demos/dialog/modal-form.html'...la validazione dei campi è stata rimossa per ora -->
<script>
$(function() {
// una soluzione alternativa per un difetto nel sistema demo (http://dev.jqueryui.com/ticket/4375), ignorare!
//$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Crea un account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
//Aggiunge i dati catturati alla tabella nella pagina principale
//$( "#users tbody" ).append( "<tr>" +
// "<td>" + txtBrname.val() + "</td>" +
// "<td>" + txtStrAddress.val() + "</td>" +
// "<td>" + txtManager.val() + "</td>" +
//"</tr>" );
$( this ).dialog( "close" );
}
},
Annulla: 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-> ecc ecc ; //elimina questa filiale (tramite Id) dal database
}
?>
<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 per aggiungere il form Dialog SPERANDO
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' ); //Deregistra la versione di WP
}
function myplugin_admin_scripts(){
// sintassi wp_enqueue_script( $handle,$src,$deps,$ver,$in_footer );
// $src = l'URL dove sono memorizzati gli script
// $in_footer Normalmente gli script sono posizionati nella sezione <head>, quindi il default è 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="Modifica Filiale">
<p class="validateTips">Tutti i campi del form sono obbligatori.</p>
<form>
<fieldset>
<label for="BrName">Nome Filiale</label>
<input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
<label for="Tel">Telefono</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>Nome Filiale</th>
<th>Express?</th>
<th>Indirizzo</th>
<th>Area</th>
<th>Manager</th>
<th>Proprietario</th>
<th>Tel</th>
<th>Cell</th>
<th>Email</th>
<th>Modifica</th>
<th>Elimina</th>
</tr>";
global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");
// ciclo attraverso i risultati della query del database, mostrandoli nella tabella
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>";
}
// chiude la tabella
echo "</table>";
?>
<button id="create-branch(' 0 ')" >Crea nuova filiale</button>
</div>
Grazie, ho praticamente fatto così ora... ci ho messo un po' a mettere insieme i pezzi. Ho il mio plugin Admin TopLevel funzionante con i suoi sottomenu, uno dei quali gestisce il form BranchMaint menzionato,... che dovrebbe avere il popup / dialog per gestire le modifiche e/o l'inserimento di un nuovo Branch, e usare $wpdb per inserire o aggiornare di conseguenza. Tuttavia la funzionalità del popup ancora non funziona. Ho aggiornato il mio codice sopra, con gli action hook verso my-functions, se può essere d'aiuto.
Neal
Sto esaminando il tuo suggerimento (Shane), ricercando tag ecc. 2 settimane di php e wpress. (11 anni di c# Asp.net). sto anche ricercando l'auto-aggiornamento del form genitore.
Neal
Vedi la mia seconda modifica - Inoltre, assicurati di controllare il sorgente sulla pagina renderizzata per vedere se gli script sono chiamati, e qualsiasi plugin come Firebug per Firefox può aiutare con gli errori javascript.
Shane
Il tuo file del plugin è esattamente come il codice sopra? Potrebbe essere utile se potessi mostrarmi il tuo file del plugin.
Shane
Già, errore mio,...dovrebbe essere una chiamata a una funzione php.
Neal