How do I implement a jQuery UI dialog modal in a WP plugin? in WordPress

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

Post Views: 1

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.

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.

2 comments

Anonymous says:

March 12, 2023 at 8:17 pm
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.

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.
Log in to Reply

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?

Leave a Reply Cancel reply

2 comments

Social Network

Related posts

Leave a Reply Cancel reply

2 comments

Social Network