调用JS文件和Ajax时的目录结构问题 [英] Directory structure issue when calling a JS file and Ajax

问题描述

尽管尝试了我能想到的一切，但我似乎无法调用正确的JS文件位置。以下是从我所知道的一切中可以找到 myjsfile.js的方式。 （名称替换为stackoverflow）

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');

我要调用的文件位于：

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

上述PHP脚本位于：

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

我尝试过：

'/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

都没有运气。默认情况下，'/ assets / js / myjsfile.js'不调用JS文件，而是调用 / wp-admin / admin-ajax。 php 。以上所有其他示例均调用 https://mywebsite.com/wp-content/themes/ mytheme / themes / mytheme / assets / js ，然后将我放在 /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?

编辑1
我也尝试过：

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

编辑2

在此处添加Ajax代码以及PHP目录ECHO尝试及其结果
AJAX
名为- myjsfile.js的文件

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回显目录尝试：
$ path = $ _SERVER ['DOCUMENT_ROOT'] ; echo $ path; 显示-/home/food/domains/mysite.com/private_html
但是echo getcwd（）; 显示/ home / food / domains / mysite.com / public_html

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

编辑3
更新了AJAX并添加了完整代码：

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代码

   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！

HTML Go!

推荐答案

如果您检查了我的旧答案，我也已经为您解决了此问题。

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

正确方法：

wp_enqueue_script（'myscript'，get_template_directory_uri（）。'/assets/js/myjsfile.js'， array（'jquery'），false，true）;

使用 get_template_directory_uri（）活动主题的正确URI，以便它将指向您主题的根。

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

如果您使用的是子主题，请使用 get_stylesheet_directory_uri（） 。

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

更新：

// 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 waitlist_update 是ajax将从您的JavaScript触发的操作。 update_function 是触发Ajax之后要调用的函数。

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.

这篇关于调用JS文件和Ajax时的目录结构问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！