Search code examples
phphtmldirectorysubdirectory

Directory structure issue when calling a JS file and Ajax


I can not seem to make the call to the proper JS file location despite trying everything that I can think of. Below is the way that it should be from everything I know to find that "myjsfile.js" (name replaced for stackoverflow)

function my_scripts() {   
 wp_enqueue_script( 'myscript', get_theme_file_uri( '/assets/js/myjsfile.js' ), array('jquery'), null, true );
 wp_localize_script('myscript', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_scripts');

My file I am trying to call is located in:

https://mywebsite.com/wp-content/themes/"mytheme"/assets/js

The above PHP script is located in:

https://mywebsite.com/wp-content/themes/"mytheme"

I have tried:

'/assets/js/myjsfile.js'
'../assets/js/myjsfile.js'
'../../assets/js/myjsfile.js'
'"mytheme"/assets/js/myjsfile.js'
'themes/"mytheme"/assets/js/myjsfile.js'
'../themes/"mytheme"/assets/js/myjsfile.js'
'../../themes/"mytheme"/assets/js/myjsfile.js'
'wp-content/themes/"mytheme"/assets/js/myjsfile.js'
'/wp-content/themes/"mytheme"/assets/js/myjsfile.js'
'../wp-content/themes/"mytheme"/assets/js/myjsfile.js'
https://mywebsite.com/wp-content/themes/"mytheme"/assets/js/myjsfile.js

all with no luck. By default '/assets/js/myjsfile.js' doesn't call the JS file but instead calls /wp-admin/admin-ajax.php. The other examples above all call some version of https://mywebsite.com/wp-content/themes/"mytheme"/themes/"mytheme"/assets/js and simply add to the proper directory structure whatever I have placed in front of the /assets/js/myjsfile.js. It doubles it. Can anyone point out where I seem to be going wrong here?

EDIT 1 I have also tried:

function my_scripts() {   
 wp_enqueue_script( 'myscript', ( get_theme_file_uri() ).'/assets/js/myjsfile.js', array('jquery'), null, true );
 wp_localize_script('myscript', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
echo getcwd(); shows me in the public directory /home/domains/mywebsite.com/public_html

EDIT 2

Adding Ajax code here as well as PHP directory ECHO attempts and their results AJAX File named - "myjsfile.js"

// JavaScript Document
jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    action: 'waitlist_update',
    success: function(data){
        // callback function
    }
});

PHP echo directory attempts: $path = $_SERVER['DOCUMENT_ROOT']; echo $path; shows - /home/food/domains/mysite.com/private_html but echo getcwd(); shows /home/food/domains/mysite.com/public_html

EDIT 3 Updated AJAX and add full code:

jQuery.ajax({
    type: 'post',
    url: ajax_url,
    // add your action inside data object
    data: { 
      action: 'waitlist_update' 
    },
    success: function(data){
        // callback function
    }
});

PHP code

   function my_scripts() {   


 wp_enqueue_script( 'waitlist_update_call', get_template_directory_uri().'/assets/js/waitlist_update_call.js', array('jquery'), null, true );
    wp_localize_script('waitlist_update_call', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
    //calls Waitinglist data and creates table
    }
    add_action('wp_enqueue_scripts', 'my_scripts');
    
    add_action('wp_ajax_waitlist_update', 'waitlist_update'); // logged in user can make a call
    
    function waitlist_update() {
        global $wpdb;
        $results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table' SET `currentstatus` = 
        'myupdate1' WHERE wdt_ID = '1'"));
        die($results);
    
    }

HTML Go!


Solution

  • If you check my old answers, I have already fixed this issue for you as well.

    Proper way:

    wp_enqueue_script('myscript', get_template_directory_uri() . '/assets/js/myjsfile.js', array('jquery'), false, true);

    Use get_template_directory_uri() to get the correct URI of the active theme so that it will point to the root of your theme.

    https://mywebsite.com/wp-content/themes/mytheme

    If you are using a child theme, use get_stylesheet_directory_uri().

    Update:

    // JavaScript Document
    jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        // add your action inside data object
        data: { 
          action: 'waitlist_update' 
        },
        success: function(data){
            // callback function
        }
    });
    

    PHP

    add_action('wp_ajax_waitlist_update', 'update_function');
        
    function update_function() {
      global $wpdb;
      $results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table' SET `currentstatus` = 'myupdate1' WHERE wdt_ID = '1'"));
      die($results);
    }
    

    wp_ajax_waitlist_update the waitlist_update is the action that ajax will trigger from your JavaScript. update_function is the function that will be called after the Ajax is triggered.