StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSimple Javascript not working in Wordpress / WooCommerce plugin
text
Body
copied!<p>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. </p> <p>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.</p> <p>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.</p> <p>Further, I have added a simple alert command directly to the html output in the php file, and this also works fine.</p> <p>This has led me to believe the issue relates to the IDs, but I don't know what to do differently.</p> <p>Here is the php file (minus the plugin header for clarity):</p> <pre><code><?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"> </script> <script type="text/javascript"> alert('ALERT!') </script> END; } ?> </code></pre> <p>And here is the test1.js containing the javascript function:</p> <pre><code>function test1(){ $( "#mybutton" ).click(function( event ) { alert ('Hello') }); } </code></pre> <p>Is it possible that #mybutton in test1.js isn't leading the function to the 'mybutton' button in the php/html?</p> <p>Thanks for your help! </p> <hr> <p>Update: I now have a functioning button using the following in the php echo:</p> <pre><code><script type="text/javascript"> jQuery(document).ready(function($) { $( "#mybutton" ).click(function( event ) { alert ('Hello')}); }); </script> </code></pre> <p>But the following doesn't work:</p> <pre><code><script type="text/javascript"> jQuery(document).ready(function($) { test1(); }); </script> </code></pre> <p>With test1.js as it was before. </p> <hr> <p>update 2</p> <p>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:</p> <pre><code>add_action('wp_head', 'DPG_execute_script'); function DPG_execute_script() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { // javascript goes here. }); </script> <?php } </code></pre> <p>I couldn't get it to work with echo <<

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload