nested JS Scripts are not included on wordpress page (using wp_enqueue_scripts)

Thanks for your replys.

@welcher : I am using WordPress 5.8 (the newest version) and it is included in a theme, not a function.

@mkarimzada : Yes the scripts are included properly. But the ajax is not working anymore. It looks like WordPress is not registering the ajax script correctly.

The second version throws this error when I try to send a request to the admin-ajax.php file
XHR POST domain.com/wp-admin/admin-ajax.php 400 Bad Request

Thanks

• This reply was modified 2 years, 7 months ago by flaschenzug22.

Okay, so I can’t fire an event when it is already fired. That explains why the first version is not working.

For my second version it doesn’t really make sense.
I only use one add_action hook.

functions.php

...
//in the functions.php I require 
require("assets/shortcodes/custom-shortcodes.php");
...

custom-shortcodes.php

function load_custom_shortcode_scripts(){
    if(is_single(208)){

        wp_register_script( "gamescript_stroop", get_stylesheet_directory_uri() . '/assets/shortcodes/stroop/stroop.js', array('js-jquery') );
        wp_enqueue_script( 'gamescript_stroop' );
        wp_localize_script( 'gamescript_stroop', 'ajaxLoad', array( 'ajaxUrl' => admin_url( 'admin-ajax.php' )));
        
       require("files-208/script-208.php");
    }
    // others might follow
}

add_action( 'wp_enqueue_scripts', 'load_custom_shortcode_scripts');

script-208.php
//just some random php code

it should be “jquery”.

I added my own new version of js-query and removed the original jquery.
So jquery doesn’t cause the trouble :-).

Without seeing the script that makes the Ajax call (or the code that adds the Ajax handler callback), it’s hard to say what the problem is, but usually a bad request error is due to either the wrong “action” value was passed, or the Ajax handler was hooked to the wrong action hook, whose handle is in part composed from the passed “action” value.

Ajax was working without any problems before adding the “function load_custom_shortcode_scripts()” in the custom-shortcodes.php file.

So any other ideas why there might be a problem?

Or is there maybe another / a better option to include a php-file / some scripts only for specific posts?

Thanks a lot

Thanks a lot @bcworkz . Regarding all the suggestions and comments here, I updated the script a litte and changed some things in the code.

I changed js-jquery to jquery, so wordpress could fall back to jquery if needed (even if i try to get rid of jquery, but for the moment it works).

While I was changing things I tested one thing:

custom-shortcodes.php

function load_custom_shortcode_scripts(){
    if (is_admin()){
        return;
    }
    if(is_single(208)){
        wp_register_script( "gamescript_stroop", get_stylesheet_directory_uri() . '/assets/shortcodes/stroop/stroop.js', array('jquery') );
        wp_enqueue_script( 'gamescript_stroop' );
        wp_localize_script( 'gamescript_stroop', 'ajaxLoad', array( 'ajaxUrl' => admin_url( 'admin-ajax.php' )));
    }
}
add_action( 'wp_enqueue_scripts', 'load_custom_shortcode_scripts');

// if moved the require part out of the wp_enqueue_scripts
require("stroop/stroop.php");

After placing the require(“”); outside of the wp_enqueue_scripts, the whole thing is running again.

But that means: The whole stroop.php file is going to be loaded on every single page.

There must be a simple solution, to just add the files to the specific page/post…?

FYI, the latest recommendation is to avoid using localize script to pass simple values to JS. It should only be used to actually localize JS to a locale. To pass simple values use wp_add_inline_script() to add a script block that sets your vars.

Good to know. Am I passing values already? -> [array( ‘ajaxUrl’ => admin_url( ‘admin-ajax.php’ ))]
I don’t really get the whole concept of localizing scripts for wordpress yet.

@mkarimzada I tried to use your code but the stroop.js file is not included on post 208.

I added an echo after and get a result.
if (is_single(208)) { echo “test”; … }

And (to make it a bit more complicated) in the stroop.php I have the following setup:

// START AJAX CALLS //
function testscript_stroop() {
     // do something and return something if needed
     die();
}

add_action("wp_ajax_gamescript_stroop", "testscript_stroop");
add_action("wp_ajax_nopriv_gamescript_stroop", "testscript_stroop");
// END AJAX CALLS //

function shortcode_stroop_test() {
    // code for the shortcode
    return $theCodeForTheShortcode;
}
add_shortcode('load::stroop-test', 'shortcode_stroop_test');

And the shortcode within the post is not replaced. Before that it was also working. I guess this is related to the “after_setup_theme” ?