admin管理员组文章数量:1384426
I have a WordPress plugin I created that creates custom top level menu and submenu fine. The submenu calls this, (see code beneath) the BranchMaintenance PHP form, which shows branches in a table, ex the dbase, (using $wpdb).
It's getting the jQuery UI dialog modal form to popup which is the problem. Doubtless my code is responsible,
...clueless re things like no name variable outer/toplevel functions as per in the code
e.g. $(function() {
I am trying to action the scripts I need to a) hide the dialog form initially (it appears above my table of branch data)..probably got this way wrong b) display it when called (this still as per the original demo code)
<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 ' form.html'...field validation is removed for now.
<script>
$(function() {
// a workaround for a flaw in the demo system (), 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', '.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>
I have a WordPress plugin I created that creates custom top level menu and submenu fine. The submenu calls this, (see code beneath) the BranchMaintenance PHP form, which shows branches in a table, ex the dbase, (using $wpdb).
It's getting the jQuery UI dialog modal form to popup which is the problem. Doubtless my code is responsible,
...clueless re things like no name variable outer/toplevel functions as per in the code
e.g. $(function() {
I am trying to action the scripts I need to a) hide the dialog form initially (it appears above my table of branch data)..probably got this way wrong b) display it when called (this still as per the original demo code)
<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/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/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/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>
2 Answers
Reset to default 4Although I'm not clear on what exactly you need, maybe I could offer a few pointers.
First off, the documentation on the various sites have everything you need, so you should visit the WordPress Codex, and jQuery UI examples.
Hooks
admin_init : You can deregister/register scripts here. If you intend on using a custom jquery ui script for example :
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: add your plugin page, hook specific page for your scripts also
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
EDIT: Dialog Example
Heres a simple modal dialog example that opens a form :
$(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
});
});
The code above assumes you have or other tag with the id of 'form-wrap'. Inside you place your form.
Folder Structure
I could be wrong, but I don't think this matters much, I just put my .js files in a /js folder, css in a /css folder, etc...
Use plugins_url() when enqueueing files from your plugin directory.
The jQuery UI Dialog's page should have all the examples you need.
When I use those dialogs, I generally generate html on the page (display:none), and use that for the dialog popup.
Hope some of this helped.
EDIT
Also, I think customizing your own jQuery UI script on the jQuery UI website will give you less files to enqueue.
EDIT 2
You have errors in your add_actions if the code above is what you're using.
add_action('admin_init', "#dialog-form" );
The second argument should be a PHP function, that looks like the ID of your HTML div.
add_action( 'admin_enqueue_scripts-options_page-{page}', 'myplugin_admin_scripts' );
I'm pretty sure {page} is supposed to be replaced by the specific page you want to call the scripts on.
If jQuery is your main issue, I suggest maybe getting it working on a simple html page disassociated from your site until you have it working, then get the hooks right.
You should do these:
add_action( 'admin_enqueue_scripts', 'admin_scripts' );
function admin_scripts(){
wp_enqueue_script( 'jquery-ui-dialog' );
wp_enqueue_style( 'wp-jquery-ui-dialog' );
}
then you should use:
jQuery('<div> Hii! <div>').dialog({ modal:true, width:600 });
本文标签： How do I implement a jQuery UI dialog modal in a WP plugin
版权声明：本文标题：How do I implement a jQuery UI dialog modal in a WP plugin? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744536066a2611323.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论