Italiano
Español
РусскийCum implementez un dialog modal jQuery UI într-un plugin WordPress?
Am un plugin WordPress creat care adaugă un meniu principal personalizat și submeniuri. Submeniul apelează acest cod (vezi mai jos), formularul PHP BranchMaintenance, care afișează filiale într-un tabel din baza de date (folosind $wpdb).
Problema apare la afișarea corectă a formularului modal jQuery UI. Codul meu este probabil responsabil... sunt confuz în legătură cu aspecte precum variabilele fără nume sau funcțiile globale precum în codul de mai jos, de exemplu $(function() {
Încerc să încarc scripturile necesare pentru: a) ascunderea inițială a formularului dialog (apare deasupra tabelului cu datele filialelor)... probabil am greșit aici b) afișarea lui la apelare (aici încă folosesc codul original din demo)
<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( '% 7E', '~', $_SERVER['REQUEST_URI']); ?>">
<!-- Acest cod era plasat în head-ul unui formular HTML normal în Demo 'http://jqueryui.com/demos/dialog/modal-form.html'... validarea câmpurilor este eliminată momentan -->
<script>
$(function() {
// o soluție pentru o eroare în sistemul demo (http://dev.jqueryui.com/ticket/4375), ignoră!
//$( "#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 ) {
//Adaugă datele capturate în tabelul de pe pagina principală
//$( "#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 ; //șterge această filială (după Id) din baza de date
}
?>
<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 pentru adăugarea formularului dialog SPERÂM
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' ); //Anulează înregistrarea versiunii WP
}
function myplugin_admin_scripts(){
// sintaxa wp_enqueue_script( $handle,$src,$deps,$ver,$in_footer );
// $src = URL-ul unde sunt stocate scripturile
// $in_footer În mod normal scripturile sunt plasate în <head>, deci implicit este 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="Editare Filială">
<p class="validateTips">Toate câmpurile sunt obligatorii.</p>
<form>
<fieldset>
<label for="BrName">Nume Filială</label>
<input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
<label for="Tel">Telefon</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>Nume Filială</th>
<th>Express?</th>
<th>Adresă</th>
<th>Zonă</th>
<th>Manager</th>
<th>Proprietar</th>
<th>Telefon</th>
<th>Mobil</th>
<th>Email</th>
<th>Editare</th>
<th>Ștergere</th>
</tr>";
global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");
// parcurge rezultatele interogării bazei de date, afișându-le în tabel
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>";
}
// închide tabelul
echo "</table>";
?>
<button id="create-branch(' 0 ')" >Crează filială nouă</button>
</div>
Mulțumesc, am făcut cam asta acum... a durat ceva să pun piesele laolaltă. Am pluginul meu Admin TopLevel funcțional cu submeniurile sale, unul dintre acestea controlează formularul BranchMaint menționat,... care trebuie să aibă popup / dialog pentru a gestiona Editările și/sau Inserarea unei noi sucursale, și să folosească $wpdb pentru inserare sau actualizare în consecință. Totuși, funcționalitatea popup încă nu funcționează. Am actualizat codul meu mai sus, cu action hooks către my-functions, dacă asta ajută cu ceva.
Neal
Mă uit acum la sugestia ta (Shane), cercetând tag-uri etc. 2 săptămâni de php și wpress. (11 ani de c# Asp.net). De asemenea, cercetez actualizarea automată a formularului părinte.
Neal
Vezi și a doua mea Editare - De asemenea, verifică sursa pe pagina randată să vezi dacă scripturile sunt încărcate, și orice plugin precum Firebug pentru Firefox poate ajuta cu erorile de javascript.
Shane
Arată fișierul tău de plugin exact ca codul de mai sus? Ar putea fi util dacă mi-ai putea arăta fișierul tău de plugin.
Shane
Da, greșeala mea,...ar trebui să fie un apel către o funcție PHP.
Neal