Ajaxing in functions.php

by

To ajax filtered posts, I needed to put most of my index.php template into the functions.php file (followed this tutorial) and do from there.

But now javascript won’t work – basically the accordion style listings won’t open and close like they did before, trailers won’t embed, etc. Click on a tag to demo here.

Is there something wrong with how I’m calling js / do I need to wp_localize_script to get it working? Sorry I’m very new to this and Google hasn’t helped because I think I’m out of my depth.

How I’m calling JS scripts: 

function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style.css', get_stylesheet_uri() ); 

wp_register_script('jquery_script', get_template_directory_uri() . '/js/jquery-3.1.0.min.js');
wp_enqueue_script('jquery_script');

wp_register_script('my_script', get_template_directory_uri() . '/js/script.js');
wp_enqueue_script('my_script');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

What is in script.js

$(document).ready(function() {

// Open and close screelistings
$('.sl').find('.sl_closed').click(function(){

//Expand or collapse this panel
$(this).next().slideToggle('fast');

//Hide the other panels
$(".sl_open").not($(this).next()).slideUp('fast');          
});

//Added class for opened and closed screenlistings

$(".sl").click(function(e) {
var isActive = $(this).hasClass('sl_active');
$('.sl_active').removeClass('sl_active');
$('.active').removeClass('active');
if (!isActive) {
  $(this).addClass('sl_active');
  $(this).find('.sl_closed').addClass('active');
}
});

// Replace feature image with trailer 

$('img').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>'; 
$(this).replaceWith(video);
});

});

1 Answer
1

Try to replace $(document).ready(function() { with jQuery(document).ready(function($) {
It should work for you.

Leave a Comment