Title: Newbie question about java scripts in plugins
Last modified: August 22, 2016

---

# Newbie question about java scripts in plugins

 *  Resolved [edowney](https://wordpress.org/support/users/edowney/)
 * (@edowney)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/newbie-question-about-java-scripts-in-plugins/)
 * So I just started learning to develop wordpress plugins (I have over 10 years
   experience with ASP.Net & c# and am a user of wordpress) this week and have made
   some decent progress. I’m to the point where I need to start creating some admin
   pages (which I figured out how to do).
 * The problem I seem to be running into is that I have a datetimepicker component
   I purchased as a suite of javascript controls. The demo works fine on my desktop
   but when I try to implement it in wordpress (which is also installed locally)
   the javascript doesn’t want to run for the picker. To make sure I was actually
   loading the js file I put an alert at the start of the file and it got picked
   up when I refreshed the wordpress admin page. I used wp_enqueue_script on the
   admin_enqueue_scripts action. Any suggestions or tutorials would be greatly appreciated–
   thanx!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Moderator [Marius L. J.](https://wordpress.org/support/users/clorith/)
 * (@clorith)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/newbie-question-about-java-scripts-in-plugins/#post-5440473)
 * Hi,
 * Could you perhaps show us the code you are using when trying to initiate your
   code?
 * I’m suspecting this is a jQuery extension which is merely being initiated the
   wrong way and not using noConflict.
 *  Thread Starter [edowney](https://wordpress.org/support/users/edowney/)
 * (@edowney)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/newbie-question-about-java-scripts-in-plugins/#post-5440494)
 * Sure! Here’s my initial plugin file that registers the css and js files. It’s
   still very preliminary.
 *     ```
       function sdCalendar_menu_settings()
       {
           add_options_page('SD Admin Calendar Configuration', 'SD Calendar Config', 'manage_options', 'sd-admin-calendar-configuration', 'SDCalendarConfig');
       }
   
       function my_enqueue($hook) {
       /*    if ( 'sdAddEditEvent.php' != $hook ) {
               return;
           }*/
   
           wp_register_style( 'custom_wp_admin_css1', plugin_dir_url( __FILE__ ) . 'kendo.common.min.css', false, '1.0.0' );
           wp_enqueue_style( 'custom_wp_admin_css1' );
   
           wp_register_style( 'custom_wp_admin_css12', plugin_dir_url( __FILE__ ) . 'kendo.rtl.min.css', false, '1.0.0' );
   
           wp_enqueue_style( 'custom_wp_admin_css2' );
   
           wp_register_style( 'custom_wp_admin_css3', plugin_dir_url( __FILE__ ) . 'kendo.default.min.css', false, '1.0.0' );
           wp_enqueue_style( 'custom_wp_admin_css3' );
   
           wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'kendo.web.min.js' );
       }
   
       include_once dirname( __FILE__ ) . '/sdCalendarDefaultOptions.php';
       include_once dirname( __FILE__ ) . '/sdAddEditEvent.php';
   
       register_activation_hook(__FILE__, 'sdCalendarDefaultOptions');
   
       add_action( 'admin_menu', 'sdCalendar_menu_settings');
   
       add_action( 'admin_enqueue_scripts', 'my_enqueue' );
       ```
   
 * And here’s the code in the admin config file. Right now I’m just trying to get
   the first input called datetimepicker to fire off – thanx!
 *     ```
       function SDCalendarConfig()
       {
           $options = get_option( 'sdCalendar_options' );
   
           ?>
           <div class="wrap">
               <h2>Smith & Dow Calendar v<?php echo $options[ 'version' ] ?> Configuration</h2>
               <h3>Add/Edit an Event</h3>
               <form>
                   <table>
                       <tr>
                           <td>
                               Start date/time
                           </td>
                           <td>
                               <div id="example" class="k-content">
                                   <div id="to-do">
                                       <input id="datetimepicker" >
                                   </div>
                               </div>
                           </td>
                       </tr>
                       <tr>
                           <td>
                               End date/time
                           </td>
                           <td></td>
                       </tr>
                       <tr>
                           <td>
                               Is all day?
                           </td>
                           <td></td>
                       </tr>
                       <tr>
                           <td>
                               Location
                           </td>
                           <td></td>
                       </tr>
                       <tr>
                           <td>
                               Category
                           </td>
                           <td></td>
                       </tr>
                       <tr>
                           <td>
                               Description
                           </td>
                           <td></td>
                       </tr>
                       <tr>
                           <td>
                               Holiday?
                           </td>
                           <td></td>
                       </tr>
                       <tr>
                           <td>
                               Cancel on holidays?
                           </td>
                           <td></td>
                       </tr>
                   </table>
               </form>
           </div>
           <script>
               $(document).ready(function () {
                   // create DateTimePicker from input HTML element
                   $("#datetimepicker").kendoDateTimePicker({
                       value:new Date()
                   });
               });
           </script>
           <style scoped>
               #to-do {
                   height: 52px;
                   width: 221px;
                   margin: 30px auto;
                   padding: 91px 0 0 188px;
                   background: url('todo.png') transparent no-repeat 0 0;
               }
           </style>
       ```
   
 *  Moderator [Marius L. J.](https://wordpress.org/support/users/clorith/)
 * (@clorith)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/newbie-question-about-java-scripts-in-plugins/#post-5440498)
 * Excellent, so what you want to do is adjust your script block there a little 
   bit, you are using $(document), which normally would be perfectly fine, but in
   the case of WordPress (and a few other CMS solutions) we use noConflict since
   many libraries have started usign the dollar sign trigger.
 * What you want to do is replace
    `$(document).ready(function () {` with `jQuery(
   document).ready(function ($) {`
 * This will allow you to keep using the dollar sign for all your actual code while
   in noConflict mode.
 *  Thread Starter [edowney](https://wordpress.org/support/users/edowney/)
 * (@edowney)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/newbie-question-about-java-scripts-in-plugins/#post-5440502)
 * Wow, that did it! Thanks – you’re the best!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Newbie question about java scripts in plugins’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 4 replies
 * 2 participants
 * Last reply from: [edowney](https://wordpress.org/support/users/edowney/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/newbie-question-about-java-scripts-in-plugins/#post-5440502)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics