javascript - How to integrate a JS fiddle?

Dear StackExchange community,

My goal is to add a second horizontal scrollbar on a very wide HTML table.

I have downloaded a JS file recently that I wanted to use it on my website: /

I uploaded it on my child-theme directory under /js/ subfolder.

In my functions.php file, I added the following lines:

// Ajout du script pour la double scrollbar
function dsb_adding_scripts() {
    wp_register_script('doubleScroll', get_stylesheet_directory_uri() . '/js/jquery.doubleScroll.js', array('jquery'),'0.3', true);
    wp_enqueue_script('doubleScroll');
}
add_action( 'wp_enqueue_scripts', 'dsb_adding_scripts' ); 

And also

function my_custom_js() {
    echo '<script type="text/javascript">jQuery(document).ready(function($){jQuery("#double-scroll").doubleScroll();});</script>';
}
add_action('wp_head', 'my_custom_js');

I had to comment out this function since it makes the whole website go blank.

Here is what my shortcode looks like:

// Shortcode for ARE
function display_ARE( $atts ) {
    // Attributes
    extract( shortcode_atts(
        array(
            'id' => '',
        ), $atts )
    );

    // Initialisation de la table de droite
    $echo .= '<div class="table_ARE" id="double-scroll"><table id="very-wide-element">';

    // VERY HUGE HTML TABLE PARSED AS A $echo VARIABLE

    // Conclusion de la table
    $echo .= '</table></div>';  

    // Affichage du résultat
    return $echo;
}
add_shortcode( 'ARE', 'display_ARE' );

In the console, I end-up with the following error:

Uncaught TypeError: $.widget is not a function

Dear StackExchange community,

My goal is to add a second horizontal scrollbar on a very wide HTML table.

I have downloaded a JS file recently that I wanted to use it on my website: https://github/sniku/jQuery-doubleScroll/

I uploaded it on my child-theme directory under /js/ subfolder.

In my functions.php file, I added the following lines:

// Ajout du script pour la double scrollbar
function dsb_adding_scripts() {
    wp_register_script('doubleScroll', get_stylesheet_directory_uri() . '/js/jquery.doubleScroll.js', array('jquery'),'0.3', true);
    wp_enqueue_script('doubleScroll');
}
add_action( 'wp_enqueue_scripts', 'dsb_adding_scripts' ); 

And also

function my_custom_js() {
    echo '<script type="text/javascript">jQuery(document).ready(function($){jQuery("#double-scroll").doubleScroll();});</script>';
}
add_action('wp_head', 'my_custom_js');

I had to comment out this function since it makes the whole website go blank.

Here is what my shortcode looks like:

// Shortcode for ARE
function display_ARE( $atts ) {
    // Attributes
    extract( shortcode_atts(
        array(
            'id' => '',
        ), $atts )
    );

    // Initialisation de la table de droite
    $echo .= '<div class="table_ARE" id="double-scroll"><table id="very-wide-element">';

    // VERY HUGE HTML TABLE PARSED AS A $echo VARIABLE

    // Conclusion de la table
    $echo .= '</table></div>';  

    // Affichage du résultat
    return $echo;
}
add_shortcode( 'ARE', 'display_ARE' );

In the console, I end-up with the following error:

Uncaught TypeError: $.widget is not a function

• javascript

Share Improve this question asked Feb 15, 2016 at 16:13 Grégoire LlorcaGrégoire Llorca 5711 silver badge1010 bronze badges 2

• Looks like $echo was never initialized before you started adding to it. Can you add '$echo = "";' before you start using 'echo .=' – jgraup Commented Feb 15, 2016 at 22:26
• Dear Jgraup, thank you for your help. Actually, I have reduced the code so that it is easier to read. Here is the full function : codepad/UEKcxchQ – Grégoire Llorca Commented Feb 16, 2016 at 11:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You're passing true as the $in_footer argument to wp_register_script(), but my_custom_js() is loading in the header. So doubleScroll is loading after the custom js.

I would put my_custom_js() in a separate javascript file so you can control the dependencies.

Create my_custom_js.js in the same place you have the double scroll script:

jQuery(document).ready(function($) {
    $("#double-scroll").doubleScroll();
}

Then in your functions.php use:

function dsb_adding_scripts() {
    wp_enqueue_script(
        'doubleScroll',
        get_template_directory_uri().'/js/jquery.doubleScroll.js',
        array('jquery')
    );

    wp_enqueue_script(
        'my_custom_js',
        get_template_directory_uri().'/js/my_custom_js.js', 
        array('jquery', 'doubleScroll')
    );
}

add_action('wp_enqueue_scripts', 'dsb_adding_scripts');