PHP Versions Question posted in
You can find a list of all versions here.

Php versions – 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!

Tags:

2

Answers


  1. 0

    It would be easier to just specify the full path to the file in the head of your html document, example;

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

    Or in PHP set a path equal to the document root of your site plus folders that point to the final location of the file;

     // Check the correct folder your script is located in
 $path = $_SERVER['DOCUMENT_ROOT']."/wp-content/themes/"mytheme"/assets/js/";

    Now include your js file in the HTML

     <script src='<?php $path."myjsfile.js"; ?>'></script>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search