Troubles with inserting JS in scripts.php

1

Hi everyone,

I am quite new to Roots and I am facing an issue about importing custom js scripts.

Basically I want to use the draggable function of jquery on my newspage to make featured posts images draggable, but it does not work.

The concerned part of scripts.php looks like this:

 wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-2.6.2.min.js', false, null, false);


wp_register_script('roots_scripts', get_template_directory_uri() . '/assets/js/scripts.min.js', false, '2a3e700c4c6e3d70a95b00241a845695', true);



 wp_register_script('jquery', get_template_directory_uri(). '/assets/js/vendor/jquery.min.js', false, null, false);
  wp_register_script('jquery-ui', get_template_directory_uri().'/assets/js/vendor/jquery-ui.min.js', false, null, false);
  wp_register_script('jquery.ui.touch-punch', get_template_directory_uri().'/assets/js/jquery.ui.touch-punch.min.js', false, null,false);
  wp_enqueue_script('modernizr');
  wp_enqueue_script('jquery');
  wp_enqueue_script( 'jquery-ui');
  wp_enqueue_script('jquery.ui.touch-punch');
  wp_enqueue_script('roots_scripts');

As you can see, I added my own jquery.min.js, jquery-ui.min.js and jquery.ui.touch-punch.min.js
in the js assets directory.

Then in Head.php I put this:

$(function() {
  $( ".draggable" ).draggable();
});
```

My content.php looks like that:

    <article <?php post_class(); ?>> 	
 	<div class="thumbs">
  		<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>" class="draggable"><?php the_post_thumbnail( 'homepage-thumb'); ?> 
  	</div>
</article>


All my featured images contain the .draggable so I really don't know why it won't work...
It remains telling me 'Uncaught TypeError: Property '$' of object [object Object] is not a function' when I inspect the posts. 

If anyone has a little idea about it I would be so grateful!

Thanks for your time
2

Roots already includes jQuery so if you want to include a different version you can either change the version it is pulling form the Google CDN or follow how it deregisters the default WP jQuery before registering that one.

I can’t see what is in your head.php (possibly a bug with discourse) but I assume you’re doing something like

$('.draggable').draggable();

WP defaults to loading jQuery in no-conflict mode so you have to either wrap all of your $ calls or instead use jQuery. So try one of the two below

jQuery(document).ready(function($) {
   $('.draggable').draggable();
});

//or

jQuery('.draggable').draggable();

It’s probably best to place this in _main.js and compile it with Grunt

3

Hi, thanks for the quick reply!

Indeed, it is exactly set up as:

$(function() {
$( ".draggable" ).draggable();});

I am going to try it your way, thanks!

4

It doesn’t work neither. I tried instead to hardcode in head.php this

    <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/maomao-responsive/assets/js/vendor/modernizr-2.6.2.min.js"></script>
          <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/maomao-responsive/assets/js/vendor/jquery.min.js"></script>
          <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/maomao-responsive/assets/js/vendor/jquery-ui.min.js"></script>
          <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/maomao-responsive/assets/js/vendor/jquery.ui.touch-punch.min.js"></script>
          <script type="text/javascript">
          $(function() {
            $( ".draggable" ).draggable();
            });
          </script>
```

I removed in scripts.php all the register and enqueue except for the roots ones so it now looks like this:

    <?php
    /**
     * Enqueue scripts and stylesheets
     *
     * Enqueue stylesheets in the following order:
     * 1. /theme/assets/css/main.min.css
     *
     * Enqueue scripts in the following order:
     * 1. jquery-1.10.2.min.js via Google CDN
     * 2. /theme/assets/js/vendor/modernizr-2.6.2.min.js
     * 3. /theme/assets/js/main.min.js (in footer)
     */
    function roots_scripts() {
      wp_enqueue_style('roots_main', get_template_directory_uri() . '/assets/css/main.min.css', false, '9a2dd99b82ca338b034e8730b94139d2');
    
      // jQuery is loaded using the same method from HTML5 Boilerplate:
      // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
      // It's kept in the header instead of footer to avoid conflicts with plugins.
      
      if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
      }
    
      wp_register_script('roots_scripts', get_template_directory_uri() . '/assets/js/scripts.min.js', false, '2a3e700c4c6e3d70a95b00241a845695', true);
      
      wp_enqueue_script('roots_scripts');
    }
    add_action('wp_enqueue_scripts', 'roots_scripts', 100);
    
    // http://wordpress.stackexchange.com/a/12450

It DOES work, except that there is a huge latency when dragging around the images, It is not fluent at all... How could I prevent this latency?
5

Glad you got it working. (Although I again can’t see what you placed in head.php)

The latency issue is something you have to talk to the plugin developer about.