0

i am trying to use the jQuery-ui function: slider(): here's my code that i wrote inside the jQuery(document).ready...:

jQuery("#slider-wp").slider()

and in my functions.php file i wrote this code to call the jQuery library specific to slider():

function jquery_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-slider'); 
}

add_action( 'admin_enqueue_scripts', 'jquery_scripts');

when i loaded my page i recevied this error:

enter image description here

i tried to look into many ressources on the internet but without success.

here's the shortcode in my functions.php file where i want to add the slider:

function rangeSlider(){
ob_start();
include 'rangeSliderfct.php';
return ob_get_clean();
}
add_shortcode('tarifs_slider', 'rangeSlider');

and here's the included php file:

<input type="text" name="value">
<div id="slider-wp"></div>

thanks for the ideas...

4
  • You want the slider on an admin page?
    – vancoder
    Oct 12, 2021 at 20:42
  • 1
    how are you loading the file which calls jQuery("#slider-wp").slider()? does it have jQuery and the slider as dependencies? developer.wordpress.org/reference/functions/wp_enqueue_script
    – admcfajn
    Oct 12, 2021 at 20:58
  • @vancoder i am using on Front page on the site
    – OmarAc
    Oct 13, 2021 at 7:21
  • @admcfajn it is a php file that is called within a Shortcode, i will add the shortcode and the HTML code to the question
    – OmarAc
    Oct 13, 2021 at 7:22

1 Answer 1

1

The error message is clear; the function is not exist. It would help if you looked at your dependencies. You need jQuery Core, the jQuery UI library, and the jQuery Slider library. But no worries, you should use the dependency handling from WP API via wp_enqueue_script and his internal handles to load in the correct order.

wp_register_script(
    'your-jquery-slider',
    plugin_dir_url( __FILE__ ) . './js/your-jquery-slider.js',
    [
        'jquery-ui-core',
        'jquery-ui-slider',
    ]
);
wp_enqueue_script( 'your-jquery-slider' );

With these parameters, you make sure that the libraries are in place and right order. The handle jquery is not necessary, because the WP API define jQuery as dependency for jquery-ui-core, see this documentation table. The jQuery UI Effects are not included with the jquery-ui-core handle, so you need the handle for the slider jquery-ui-slider.

Note. Use the register function and then enqueue to give other plugins the chance to remove them, is clean, and have more control for everyone.

4
  • thank you, but i found the solution, i called the jquery-ui library directly from the url and it worked: function load_plugin_scripts() { wp_enqueue_script( 'jquery-ui-slider','https://code.jquery.com/ui/1.13.0/jquery-ui.js', array('jquery'), false, false); } add_action( 'wp_enqueue_scripts', 'load_plugin_scripts' );
    – OmarAc
    Oct 13, 2021 at 13:12
  • Actually, you fixed it by switching from admin_enqueue_scripts - which won't work on the site's home page - to wp_enqueue_scripts.
    – vancoder
    Oct 13, 2021 at 15:38
  • You should not enqueue the jQuery UI Library from external, because it is inside the WP Core and you risk, that you have no control about loading, multiple load of the same library.
    – bueltge
    Oct 14, 2021 at 5:30
  • @bueltge thank you for your insight, i will keep that in mind
    – OmarAc
    Oct 14, 2021 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.