How does one include the JQuery UI plugin to wordpress and enque it correctly in a plugin form?

Question

I have a basic admin top-level plugin I wrote which has a submenu driving a php form with a grid table populated from wp_dbase (from a custom table 'Branches' in it).

My installation is a clean WP 3.3.1 on WAMPServer. Only changes are including the before the wp_head function in the , in the header file for both 2010 and 2011 themes.

My attempt at using JQuery 'Document.ready' does nothing. So I assume I have a Jquery setup problem. Any pointers / help would be much appreciated. (I have tried using JQueryUI dialog - modal - form as well, but zilch, nada,... Also the 'pop-up div' shows in the page, and does not 'popup'.

My form and Jquery function beneath.

<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">

$(document).ready(function(){
   alert("We're in Jquery world");

   $('#form-wrap').dialog({ 
       autoOpen: false, //FALSE if you open the dialog with, for example, a button    click            
        title: 'My Form',
        modal: true      
  });
}); 

and here the #form-wrap div it references

<div id="form-wrap " 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>

Answer 1

It is important, that you include your script with wp_enqueue_script() and defined the scripts, there are use your script. WP control the scripts. Your example has the problem, that your div and js inlcude this load before load jquiry and ui. Also it is possible, that WP load al scripts in Footer and then have you also the same problem. Hint: http://wpengineer.com/2028/small-tips-using-wordpress-and-jquery/

Answer 2

here is the code

function my_admin_init() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');//enables UI
        //wp_enqueue_script('jquery-ui-datepicker', $pluginfolder . '/jquery.ui.datepicker.min.js', array('jquery', 'jquery-ui-core') );
        wp_enqueue_style('jquery.ui.theme', '/wp-content/themes/<themename>/js/jquery-ui-1.8.9.custom.css');
    }
    add_action('admin_init', 'my_admin_init');

but make sure to include the css file and all the associated images (like any jQuery UI instalation).

Cheers.Bo