galfaro galfaro - 8 months ago 66
jQuery Question

jQuery and Wordpress Plugins

So I'm working on a plugin, but I'm having difficulties adding a jQuery function to it. I read other post and searched everywhere, but nothing seems to work. I see the jQuery in the header so I know that it's loading, but when I try to call the function nothing happens.

Here's what I have

function OneEightyView($atts = array(), $content = null, $tag){
shortcode_atts(array(
'img1' => 'default var1',
'img2' => false,
'img3' => false,
'img4' => false,
'img5' => false
), $atts);

$img1 = $atts['img1'];
$img2 = $atts['img2'];
$img3 = $atts['img3'];
$img4 = $atts['img4'];
$img5 = $atts['img5'];

?>

<script type="text/javascript">
$(function(){
$('#oeContianer').serce();
});
</script>

<div id ="oeContianer" >
<img src="<?php echo $img3; ?>" data-images="<?php echo $img1 . ',' . $img2 . ',' . $img3 . ',' . $img4 . ',' . $img5 ?>" alt=""/>
</div>
<?php
}

function oneeighty_enqueue_script() {
wp_enqueue_script( 'selector_oneeighty_jquery_script', plugin_dir_url( __FILE__ ) . 'lib/jquery-2.1.3.js', array( 'jquery' ), '4.8.1', true );
wp_enqueue_script( 'selector_oneeighty_script', plugin_dir_url( __FILE__ ) . 'jquery.serce.min.js', array( 'jquery' ), '4.8.1', true );
}
add_action('wp_enqueue_scripts', 'oneeighty_enqueue_script');

/**** Add Shortcode ****/
add_shortcode('one-eighty-wiew', 'OneEightyView');


One can replace those image "$atts" with any image url to see it in live action.

Can someone point me in the right direction.

Thank you!

Answer Source

So I was able to solve the problem which was cause by an extra jQuery file and not having the correct method of handling the functions. It was basically a jQuery conflict.

So what I did was switch "$" to jQuery and removed this line

wp_enqueue_script( 'selector_oneeighty_script', plugin_dir_url(__FILE__ ) . 'jquery.serce.min.js', array( 'jquery' ), '4.8.1', true );

My new snippets look like this

<script type="text/javascript">
    jQuery(function(){
        jQuery('#oeContianer').serce();
    });
</script>
<?php
function oneeighty_enqueue_script() {
    wp_enqueue_script( 'selector_oneeighty_script', plugin_dir_url(__FILE__ ) . 'jquery.serce.min.js', array( 'jquery' ), '4.8.1', true );
}
add_action('wp_enqueue_scripts', 'oneeighty_enqueue_script');
?>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download