英文:
WordPress Website not updating with changes to Javascript file
问题
我正在开发一个网站，我已经为搜索栏创建了一个WordPress插件。该插件有一个js文件夹和文件，但对该文件所做的更改没有在网站上显示。
我已经清除了浏览器的数据，清除了服务器的缓存（Cloudways Varnish），并安装了一个清除WordPress缓存的插件（Cloudways的Breeze）。但似乎都没有起作用。
我可以在WordPress插件文件编辑器上看到JS文件正在更新，但更改不会在实际网站上显示。
dynamic-search-plugin.php文件：
<?php
function enqueue_ajax_scripts() {
wp_enqueue_script( 'dynamic-search-ajax', plugin_dir_url( __FILE__ ) . 'js/dynamic-search.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'dynamic-search-ajax', 'dynamicSearchAjax', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'dynamic-search-nonce' )
) );
}
function dynamic_search_handler() {
check_ajax_referer( 'dynamic-search-nonce', 'nonce' );
// Retrieve the search query from the AJAX request
$query = sanitize_text_field( $_POST['query'] );
$results = array(
array( 'name' => 'Test 1' ),
array( 'name' => 'Test 2' )
);
// Return the search results as a JSON response
wp_send_json( $results );
}
add_action( 'wp_enqueue_scripts', 'enqueue_ajax_scripts' );
add_action( 'wp_ajax_dynamic_search', 'dynamic_search_handler' );
add_action( 'wp_ajax_nopriv_dynamic_search', 'dynamic_search_handler' );
dynamic-search.js文件：
jQuery(document).ready(function($) {
// Event handler for search form submission
$('#search-form').on('submit', function(e) {
console.log("On submit in JS called");
e.preventDefault();
var query = $('#search-input').val();
// Make AJAX request to the server
$.ajax({ //只有这个部分出于某种原因运行
url: dynamicSearchAjax.ajaxurl,
type: 'POST',
data: {
action: 'dynamic_search',
nonce: dynamicSearchAjax.nonce,
query: query
},
success: function(response) {
displayResults(response);
},
error: function() {
alert('Error');
}
});
});
// Function to display search results
function displayResults(results) {
var container = $('#results');
container.empty();
// Loop through the results and create buttons
results.forEach(function(result) {
var button = $('<button>').text("Test"); //更改此代码不会在网站上显示更改
container.append(button);
// Add click event handler to the button
button.on('click', function() {
// 按钮被点击时执行操作
alert('Button clicked:');
});
});
}
});
英文:
I am developing a website and I have created a WordPress plugin for a search bar. The plugin has a js folder and file but the changes made to that file are not appearing on the website.
I have cleared my browser's data, my server's cache (Cloudways Varnish), and have installed a plugin to clear WordPress cache (Cloudways' Breeze). None seem to work.
I can see on the WordPress Plugin file editor that the JS file is updating, but the changes are not appearing on the live website.
dynamic-search-plugin.php file:
<?php
function enqueue_ajax_scripts() {
wp_enqueue_script( 'dynamic-search-ajax', plugin_dir_url( __FILE__ ) . 'js/dynamic-search.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'dynamic-search-ajax', 'dynamicSearchAjax', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'dynamic-search-nonce' )
) );
}
function dynamic_search_handler() {
check_ajax_referer( 'dynamic-search-nonce', 'nonce' );
// Retrieve the search query from the AJAX request
$query = sanitize_text_field( $_POST['query'] );
$results = array(
array( 'name' => 'Test 1' ),
array( 'name' => 'Test 2' )
);
// Return the search results as a JSON response
wp_send_json( $results );
}
add_action( 'wp_enqueue_scripts', 'enqueue_ajax_scripts' );
add_action( 'wp_ajax_dynamic_search', 'dynamic_search_handler' );
add_action( 'wp_ajax_nopriv_dynamic_search', 'dynamic_search_handler' );
The dynamic-search.js file:
jQuery(document).ready(function($) {
// Event handler for search form submission
$('#search-form').on('submit', function(e) {
console.log("On submit in JS called");
e.preventDefault();
var query = $('#search-input').val();
// Make AJAX request to the server
$.ajax({ //only this is run for some reason
url: dynamicSearchAjax.ajaxurl,
type: 'POST',
data: {
action: 'dynamic_search',
nonce: dynamicSearchAjax.nonce,
query: query
},
success: function(response) {
displayResults(response);
},
error: function() {
alert('Error');
}
});
});
// Function to display search results
function displayResults(results) {
var container = $('#results');
container.empty();
// Loop through the results and create buttons
results.forEach(function(result) {
var button = $('<button>').text("Test"); //changing this code doesn't correspond to changes on website
container.append(button);
// Add click event handler to the button
button.on('click', function() {
// Perform an action when the button is clicked
alert('Button clicked:');
});
});
}
});
答案1
得分: 1
这是翻译好的内容：
有时在WordPress中，当它缓存您的脚本时会出现这种情况。尝试像下面这样向您的脚本文件添加 time() 参数：
wp_enqueue_script( 'dynamic-search-ajax', plugin_dir_url( __FILE__ ) . 'js/dynamic-search.js?time=' . time(), array( 'jquery' ), '1.0', true );
英文:
It happens in worpdress sometimes when it caches your script, Try adding time() param to your script file like below,
wp_enqueue_script( 'dynamic-search-ajax', plugin_dir_url( __FILE__ ) . 'js/dynamic-search.js?time='.time(), array( 'jquery' ), '1.0', true );
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论