• Resolved edowney

    (@edowney)


    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.

    (@clorith)

    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

    (@edowney)

    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.

    (@clorith)

    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

    (@edowney)

    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.