Forums

[resolved] jquery-ui-core and sliders (12 posts)

  1. rsanchez112
    Member
    Posted 4 years 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. Samuel Wood (Otto)
    Tech Ninja
    Posted 4 years 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 4 years 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 4 years 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. Samuel Wood (Otto)
    Tech Ninja
    Posted 4 years 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 4 years ago #

    Ok, thanks anyway.

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

  8. rsanchez112
    Member
    Posted 4 years 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 4 years 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 4 years 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 4 years ago #

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

  12. tobykilroy
    Member
    Posted 3 years ago #

    Hi,

    I'm having the same problem.
    Getting :
    Error: jQuery(".scroll-bar").slider is not a function

    Can you tell me how you solved it?

    Many thanks

Topic Closed

This topic has been closed to new replies.

About this Topic