Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a Wordpress plugin I created which creates custom top level menu and submenu fine. The Submenu calls this, (entire code beneath) the BranchMaintenance php form, which shows branches in a table, ex the dbase, (using $Wpdb).

It's getting the JQueryUI 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() {
so any help extra ideas ....Thx

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)

Thx Neal

<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>
share|improve this question
add comment

1 Answer

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.

share|improve this answer
    
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
show 8 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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