Simple Javascript not working in Wordpress / WooCommerce plugin

Question

The code below is for a simple plugin that adds a new tab to the wooCommerce product page (frontend), and then adds a button to that tab. What I want it to do is popup an alert when the button is clicked. This is super simple, I know, but I created it to try and figure out why a more complicated script wasn't working.

So far, the tab exists, and the button exists, but when I click on the button nothing happens. I have checked to make sure the script is actually being loaded, and I have confirmed that it is indeed present in the source code of the page. If I load the javascript filepath from the source code directly in my browser it displays the correct code.

Further, if I make a simple html file with the javascript code and the button (so none of the wordpress stuff) it works perfectly well.

Further, I have added a simple alert command directly to the html output in the php file, and this also works fine.

This has led me to believe the issue relates to the IDs, but I don't know what to do differently.

Here is the php file (minus the plugin header for clarity):

<?php

//runs addScripts
add_action( 'wp_enqueue_scripts', 'addScripts' );

// enqueues jquery and test1.js files. Inspecting html shows these are loaded.test1.js is loaded in footer.
function addScripts(){
    wp_enqueue_script( 'jquery', plugins_url( 'jquery.js', __FILE__ ));
    wp_enqueue_script( 'test1', plugins_url( 'test1.js', __FILE__ ),array('jquery'),1,true);
}

// creates new tab in woocommerce
add_filter( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab' );

// function defining test_tab   
function woocommerce_product_custom_tab($tabs) {
    $tabs['test_tab'] = array(
        'title' => __( 'New Product Tab', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'woo_new_product_tab_content'
    );
    return $tabs;
}

// content of new tab, and where the javascript is supposed to work.        
function woo_new_product_tab_content() {

echo <<<END

<button id="mybutton" type="button">Click Me</button>

<script type="text/javascript" src="test1.js"></script>

<script type="text/javascript">
<!--test1();//--></script>

<script type="text/javascript"> alert('ALERT!') </script>
END;
}
?>

And here is the test1.js containing the javascript function:

function test1(){
    $( "#mybutton" ).click(function( event ) {
        alert ('Hello')
    });
}

Is it possible that #mybutton in test1.js isn't leading the function to the 'mybutton' button in the php/html?

Thanks for your help!

Update: I now have a functioning button using the following in the php echo:

<script type="text/javascript"> 
jQuery(document).ready(function($) {
$( "#mybutton" ).click(function( event ) {
alert ('Hello')});
 });
 </script>

But the following doesn't work:

<script type="text/javascript"> 
jQuery(document).ready(function($) {
test1(); });
 </script>

With test1.js as it was before.

update 2

So whilst the answer below finally got the code working, the more complex stuff that this was a trial for was failing. I finally got it working (and this is probably not the most elegant solution) by doing the following:

add_action('wp_head', 'DPG_execute_script');

function DPG_execute_script()  {

?>

<script type="text/javascript">
jQuery(document).ready(function($) {

// javascript goes here.

}); 
</script>
<?php

 }

I couldn't get it to work with echo <<

Fex del Sollo · Accepted Answer · 2013-12-11 19:03:04Z

2

If you are using a jQuery function in wordpress you will have to use it in one of the following ways:

If you want your code to be executed after the document has been loaded:

jQuery(document).ready(function($) {
     // Code here will be executed on document ready. Use $ as normal.
});

If your code is to be executed in an anonymous function, make sure you pass jQuery as an argument:
```
(function($) {
    // Your jQuery code goes here. Use $ as normal.
})(jQuery);
```

EDIT: This is how I would implement the code:

<button id="mybutton" type="button">Click Me</button>

<script type="text/javascript"> 
    jQuery("#mybutton").click(function() {
        alert ('Hello')
        });
</script>

Important: The script has to be called after the button!

edited Dec 11, 2013 at 19:03

answered Dec 11, 2013 at 15:24

Fex del Sollo

3863 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3091466 Over a year ago

I haven't had any success with this. Are you inserting this in between script tags in the php's echo output or are you putting the .js function in the middle and calling it from the php?

Fex del Sollo Over a year ago

It shouldn't matter if your function is within a .js or directly in the php echo. This is how it should look like witihn your echo:

<script type="text/javascript">   jQuery(document).ready(function($) {      // Code here will be executed on document ready. Use $ as normal.   });  </script>

user3091466 Over a year ago

edit: I added this at the top because the formating here looks horrible. OK, well it works when I put the code straight into the echo, but not when I reference the function 'test1'. So: <script type="text/javascript"> jQuery(document).ready(function($) { $( "#mybutton" ).click(function( event ) { alert ('Hello')}); }); </script> works, but: <script type="text/javascript"> jQuery(document).ready(function($) { test1(); }); </script> doesn't. Any ideas? Thanks for your help.

Fex del Sollo Over a year ago

I have edited my answer, it works fine on any of my wordpress installations.

Roatha Chann · Accepted Answer · 2013-12-11 15:08:10Z

1

Simply use this code (make sure you call jquery first) :

<button id="mybutton" type="button">Click Me</button>

<script>    
$( "#mybutton" ).click(function( event ) {
alert ('Hello');
});
</script>

Successful test : http://jsfiddle.net/k664U/

answered Dec 11, 2013 at 15:08

Roatha Chann

4457 silver badges22 bronze badges

1 Comment

user3091466 Over a year ago

Yes this works in its own html or php (as echo) file if jquery is called. But within woocommerce/wordpress it is still non functioning.

Collectives™ on Stack Overflow

Simple Javascript not working in Wordpress / WooCommerce plugin

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related