WordPress.org

1. rsanchez112
   Member
   Posted 9 months ago #

   I want to use jquery sliders in my plugin. In the main php file, I have the lines:

   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-ui-core');

   before I enqueue my javascript. The javascript works and uses jQuery, but the slider does not. One of the sliders I want to make is:

   <div id='height-slider' />

   with the javascript:

   jQuery("#height-slider").slider({
   range: "min",
   value: widgetHeight,
   min: 150,
   max: 1000,
   slide: function(event, ui) {
   document.getElementById('widgetHeight').value = ui.value;
   }
   });

   where widgetHeight is a text input element, and widgetHeight is a variable already set. The problem is that the slider is never rendered. What am I doing wrong? Any help is appreciated.

2. Otto42
   Moderator
   Posted 9 months ago #

   It's easier for people to debug things when you give a link to the live site, where people can see it not working.

3. rsanchez112
   Member
   Posted 9 months ago #

   Sorry it's not live yet. I'm still developing the plugin and only have it on my machine. Basically, instead of seeing a slider, you see nothing.

4. rsanchez112
   Member
   Posted 9 months ago #

   After messing around with it some more, I found the problem might be having this in a document.onload = function() {}. Changing this to window.onload revealed what might be the problem. The error console gave me:

   jQuery("#width-slider").slider is not a function

   In the jQuery documentation it gives $("#element-id").slider, but since you can't use that notation in wordpress plugins, I assumed substituting $ with jQuery would be just fine, which does work for other jQuery functions, but apparently not for jQuery UI functions. So how do I tell jQuery to add the slider?

   Again, sorry for not having a live version yet. I'm still developing the plugin and don't want to upload it to the live site, to avoid problems the plugin might cause.

5. Otto42
   Moderator
   Posted 9 months ago #

   If you don't have it on a site where others can see it, then it's highly unlikely anybody can help you. If I can't see it, then I can't run it, I can't debug it, I can't do anything at all.

   So my advice would be to try a jQuery forum, where they know that sort of thing better.

6. rsanchez112
   Member
   Posted 9 months ago #

   Ok, thanks anyway.

7. johnjamesjacoby
   Member
   Posted 9 months ago #

   It is my experience that wp_enqueue_script('jquery-ui-core'); doesn't work at all actually.

8. rsanchez112
   Member
   Posted 9 months ago #

   That's interesting. How would you enqueue the javascript needed for jquery-ui-slider? I looked in my wp-includes/js/jquery directory, and the file in there was named ui.core.js, so I tried ui.core and ui-core instead of jquery-ui-core and still no dough. Then I noticed that I have ui.dialog, ui.resizable, ui.sortable, ui.tabs, and ui.draggable, but no ui.slider. Would ui.slider be in ui.core anyway? Or did I get a download with a missing file? Or is slider just not packaged with wordpress?

9. rsanchez112
   Member
   Posted 9 months ago #

   Excuse the double post. I just want an answer from johnjamesjacoby on what would work to use jQuery sliders in any plugin, since his experience is that wp_enqueue_script('jquery-ui-core') doesn't work at all.

10. amummey
    Member
    Posted 8 months ago #

    I am not sure what you mean by wp_enqueue_script doesn't work at all? I use a slider in my plugin, unfortunately WP doesn't include the slider code so I have to include it myself from my plugin directory. Just make sure you have the correct JS dependencies:
    

    if (function_exists('wp_enqueue_script')) {
              wp_enqueue_script('cSpritesCheckbox', trailingslashit(CSPRITE_JS_URL_DIR).'jquery.checkbox.js', array('jquery'), '1.0');
              wp_enqueue_script('jquery-slider', trailingslashit(CSPRITE_JS_URL_DIR).'ui.slider.js', array('jquery', 'jquery-ui-core'), '1.0');
              wp_enqueue_script('cSpriteInit', trailingslashit(CSPRITE_JS_URL_DIR).'csprites.js', array('jquery-slider'), '1.0');
            }

11. rsanchez112
    Member
    Posted 8 months ago #

    Thanks for the tip amummey. After looking at your plugin, I modified my own plugin and got the slider to work.

Reply

You must log in to post.