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.com/demos/dialog/modal-        form.html'...field validation is removed for now.
$(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" )
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );



function fn_DeleteBranch(Id)
   //$wpdb->   etc etc ; //deletes this branch (by Id) from the dbase

 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; } 


// 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-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="Branch Editing">
<p class="validateTips">All form fields are required.</p>

    <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" />


<div id="users-contain" class="ui-widget">
    echo "<table border='1' cellpadding='0' width='100%'>"; 
    echo "<tr> 
    <th>Branch Name</th> 

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>

Although 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.


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' );


EDIT: Dialog Example

Heres a simple modal dialog example that opens a form :

           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.


Also, I think customizing your own jQuery UI script on the jQuery UI website will give you less files to enqueue.


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.

  • Thanks, I have done pretty much that now..took a while to put the bits together. I do have my Admin TopLevel plugin working with it's submenus, one of which drives the mentioned BranchMaint form,..which is to have the popup / dialog which should handle the Edits and/or Insert NewBranch, and use $wpdb to insert or uppdate accordingly. However The popup functionality is still not working. I have updated my code above, with action hooks to my-functions, if that is of any help. – Neal Jan 19 '12 at 11:01
  • I am looking into your (Shane) suggestion, researching tags etc. 2 weeks of php and wpress. (11 years of c# Asp.net). also researching auto updating the parent form. – Neal Jan 19 '12 at 13:40
  • See my second Edit - Also, be sure to check the source on the rendered page to see if the scripts are called, and anything plugin like Firebug for Firefox can help with javascript errors. – Shane Jan 19 '12 at 13:50
  • Does your plugin file look exactly like the code above? It could be helpful if you could show me your plugin file. – Shane Jan 19 '12 at 14:18
  • Yep, my mistake,...it should be a call to a pho function. – Neal Jan 20 '12 at 7:31

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.