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 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>
share|improve this question
    
You script isn't inside script tags for starters, and you need a no-conflict wrapper for that jQuery.. (you can find info on both those things with a quick google).. –  Mark Duncan Jan 20 '12 at 10:03
add comment

2 Answers

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/

share|improve this answer
add comment

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

share|improve this answer
add comment

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.