0

I am creating a custom page template that would include this jQuery multi-selector on it, but I cannot seem to make it work no matter what I do.

Both CSS and JS files seem to get added to the theme header file but this is what I keep seeing when I paste the selector code:

http://i.stack.imgur.com/slgW0.png

My template file code:

<select id='pre-selected-options' multiple='multiple'>
    <option value='elem_1' selected>elem 1</option>
    <option value='elem_2'>elem 2</option>
    <option value='elem_3'>elem 3</option>
    <option value='elem_4' selected>elem 4</option>
    <option value='elem_100'>elem 100</option>
 </select>

My functions.php file:

function wptuts_scripts_load_cdn()
{
    wp_register_script( 'multi-select', 'https://www.mywebsite.com/selector/js/jquery.multi-select.js', array(), null, false );

    wp_register_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, false );

}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot()
{
    // Register the style like this for a theme:
    wp_register_style( 'custom-style', 'https://www.mywebsite.com/selector/css/multi-select.css', array(), '20120208', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

I'm using Avada theme if that matters.

What might be the problem here?

  • Where are you initializing jQuery Multiselect? E.g.: $('#pre-selected-options').multiSelect(); I see that you're including the main library, but you need to load the JS (and specify dependencies, 'jquery' and 'multi-select' ) that attaches the Multiselect library to your select element. BTW, the 'multi-select' script should specify jquery as a dependency. – Dave Romsey Sep 26 '16 at 23:04
  • I initialized Multiselect in the template file. I know it's not idea, but considering my [lack of] Javascript knowledge, this is the only option that didn't give me console errors. I tried everything, and nothing seems to be working. Can you please explain how to specify dependencies in this case? – ignite-me Sep 26 '16 at 23:14
  • Take a look at the docs for wp_enqueue_script, particularly the $deps argument. Also, replace the use of wp_register_script with wp_enqueue_script and use wp_enqueue_style instead of wp_register_style. Registering a script or stylesheet does not actually enqueue it. – Dave Romsey Sep 26 '16 at 23:20
0

Here's a tweaked version of the original code. get_template_directory_uri() is used instead of hard coding the URLs, the scripts and styles are enqueud rather than just being registered, and the dependencies are specified.

<?php
function wptuts_scripts_load_cdn() {
    wp_enqueue_script( 'multi-select', get_template_directory_uri() . '/selector/js/jquery.multi-select.js', array( 'jquery' ), null, false );

    // JavaScript for theme. Presumably where you'd want to initialize the multi-select element.
    //wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/js/theme-scripts.js', array( 'jquery', 'multi-select' ), null, false );

    wp_enqueue_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, false );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot() {
    // Enqueue the style like this for a theme:
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/selector/css/multi-select.css', array(), '20120208' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );
| improve this answer | |

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.