JavaScript not loaded on AJAX call at WooCommerce Cart page

Question

I'm using woocommerce_after_shipping_rate hook to add my codes, some PHP, some JS. On normal page load, all of my codes are loaded perfectly. But when I add/remove items from cart, or update my address at shipping calculator, which caused an update at the available shipping methods (using AJAX), my JS codes are not loaded.

Probably this is just a very basic thing I missed. Here's a simple version of my code:

function abc( $method, $index ) {

    echo "This loaded on AJAX just fine";

    echo "<script type='text/javascript'>";
    echo "var a = 'This is NOT loaded on AJAX call, along with the tags above and below this';";
    echo "</script>";

    echo "This also loaded on AJAX just fine";

}
add_action( 'woocommerce_after_shipping_rate', 'abc', 10, 2 );

In case anyone wondered, my JS code is to put some variables which my JS function at the page header needs. The variables are based on the available shipping method currently loaded.

What I hope can be achieved is for my JS code to also be loaded on AJAX.

Any help is appreciated. Thanks.

What do you mean by "This is NOT loaded on AJAX call"? Is the ` — jrswgtr, Mar 02 '20 at 15:38
@jrswgtr Yes, those 3 lines are not present when the AJAX finished loading. Starting from the . Above and below those 3 lines loaded just fine. And yes, I missed a }, thanks. — Dicko Mas Soebekti, Mar 02 '20 at 15:49
Maybe those lines are sent to the browser, but you can't see them because there are not added to the DOM, log the output to console, I'm almost sure that script tags will be there. — Triby, Mar 02 '20 at 15:54
@Triby Hey, you're right! I checked at the Response Payload at Network tab, the ` — Dicko Mas Soebekti, Mar 02 '20 at 16:12
Javascript can't be executed just adding tags from an AJAX call, you need to find another way. Maybe this could help: https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml — Triby, Mar 02 '20 at 16:22

score 0 · Accepted Answer · answered Mar 03 '20 at 19:36

Probably more of a "hack" instead of an answer.

Basically the problem was anything using <script> tag was not loaded to the DOM (but actually sent to the browser from the server). So I change <script> into <div style='display:none;'> and keep the content as is (still filled with JS).

function abc( $method, $index ) {

    echo "This loaded on AJAX just fine";

    echo "<div class='response-div' style='display:none;'>";
    echo "var a = 'This is where you echo all your JS';";
    echo "</div>";

    echo "This also loaded on AJAX just fine";

}
add_action( 'woocommerce_after_shipping_rate', 'abc', 10, 2 );

And then on window.load and document.ajaxComplete, I copy the innerHTML from the <div> and create a new <script> element to REPLACE the <div>, containing the same innerHTML.

This answer https://stackoverflow.com/a/20584396/10069015 has the replacement function, but for the whole page. I just had to modify it to adjust to my needs.

As stupid as this sound, it works. Mind you, my goal is only to write some global JS variables, not actually executing a JS function. So I don't know whether this method will work if you want to do that.

JavaScript not loaded on AJAX call at WooCommerce Cart page

1 Answers1