WordPress.org

Ready to get started?Download WordPress

Forums

jQuery UI Widgets
Solved - How to get this stuff working (9 posts)

  1. Androliyah
    Member
    Posted 1 year ago #

    Figured it out on my own as the author does not provide any clear documentation.

    1) Go to the Jquery website Here
    2) Choose a widget to demo
    3) View the source of the widget
    - Example: For Datepicker, the source is:

    <p>Date: <input id="datepicker" type="text"></p>

    4) Copy this HTML and paste it into your sidebar widget
    5) Change "id" to "class"

    Note: Whenever you add a new widget, be sure to change "id" to "class". This should get it working.

    http://wordpress.org/extend/plugins/jquery-ui-widgets/

  2. Dominor Novus
    Member
    Posted 1 year ago #

    Thanks for the step by step instructions Androliyah.

    Note: Changing the id to a class didn't apply in my case i.e. the source code requires the id to trigger the datepicker.

    The difference might be attributable to the fact that I'm adding the code directly to a custom template file rather than a widget.

  3. Dominor Novus
    Member
    Posted 1 year ago #

    Correction: I can confirm that Androliyah's steps work providing an additional step 6 is appended:

    1) Go to the jQuery website here.
    2) Choose a widget to demo e.g. datepicker
    3) View the source of the widget using the link provided on the demo page:

    <script>
    	$(function() {
    		$( "#datepicker" ).datepicker();
    	});
    	</script>
    
    <div class="demo">
    
    <p>Date: <input id="datepicker" type="text"></p>
    
    </div><!-- End demo -->
    
    <div style="display: none;" class="demo-description">
    <p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
    </div><!-- End demo-description -->

    4) Copy this HTML and paste it into your sidebar widget or your custom template file.

    5) Change "id" to "class" in the demo source code:

    i.e. Change this:

    id="datepicker"

    ...to this:

    class="datepicker"

    6) Change the jQuery selector in the demo source code:

    i.e. Change this:

    $( "#datepicker" ).datepicker();

    ...to this:

    $( ".datepicker" ).datepicker();

    Note: Steps 5 and 6 were only necessary for me because I'm using multiple datepickers per page. The datepicker can be triggered without applying steps 5 and 6 but only on a one datepicker per page basis.

  4. johnpaul_86
    Member
    Posted 1 year ago #

    this is also not working.. i tried it

  5. brs14ku
    Member
    Posted 1 year ago #

    These tricks don't work for me either. Not sure what the deal is. For datepicker it just displays the input label date with an input field...that's it.

  6. David Gwyer
    Member
    Plugin Author

    Posted 1 year ago #

    To get your jQuery code working in the latest version see my response here:

    http://wordpress.org/support/topic/after-update-doesnt-work-anymore

  7. Jim R
    Member
    Posted 1 year ago #

    Unless I'm missing something, using jQuery is easier than this plugin. I was hoping for something streamlined. Can someone show me I'm wrong? I'm not trying to be overly critical, but I'm not sure how this plugin works without actually using jQuery.

    There needs to be more instruction.

  8. johnpaul_86
    Member
    Posted 1 year ago #

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script>

    $(function() {
    $( "#todatepicker" ).datepicker();
    });
    </script>

    <input type="text" id="todatepicker" style="width:175px;" />
    </label></td>

  9. johnpaul_86
    Member
    Posted 1 year ago #

    this will work man.. send ur mail.. i will send fully zipped workng folder

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic