admin管理员组文章数量:1129454
I am trying to save the values of multiple checklists using update_option and individual options for each item. I am getting a 400 Error in the console when making POST requests to /wp-admin/admin-ajax.php. Please help if you can!
index.php:
function settings_html_content() {
$details = get_option('details-checkbox');
$socials = get_option('socials-checkbox');
$topic_wheel = get_option('topic-wheel-checkbox');
$testimonials = get_option('testimonials-checkbox');
?>
<h2>Setup Checklist</h2>
<form id="autosave-checklist-form" action="options.php">
<label for="details" id="details" name="details"><input type="checkbox" id="details" name="details" label="details" value="<?php echo esc_attr($details); ?>" <?php checked($details); ?>>Submit the <a href="?page=bm-plugin&tab=details">"Personal Branding Details" form</a>.</label>
<label for="socials" id="socials" name="socials"><input type="checkbox" id="socials" name="socials" label="socials" value="<?php echo esc_attr($socials); ?>" <?php checked($socials); ?>>Submit the <a href="?page=bm-plugin&tab=socials">"Social Media Accounts" form</a>.</label>
<label for="topic-wheel" id="topic-wheel" name="topic-wheel"><input type="checkbox" id="topic-wheel" name="topic-wheel" label="topic-wheel" value="<?php echo esc_attr($topic_wheel); ?>" <?php checked($topic_wheel); ?>>Submit the <a href="?page=bm-plugin&tab=topic-wheel">"Topic Wheel" form</a>.</label>
<label for="testimonials" id="testimonials" name="testimonials"><input type="checkbox" id="testimonials" name="testimonials" label="testimonials" value="<?php echo esc_attr($testimonials); ?>" <?php checked($testimonials); ?>>Submit the <a href="?page=bm-plugin&tab=testimonials">"Testimonials" form</a>.</label>
<p>For more information please read our <a href="">documention</a>.</p>
<?php
settings_fields( 'checklist_settings_group' );
do_settings_sections( 'bm_plugin' );
submit_button();
?>
</form>
<?php
}
function autosave_checklist_handler() {
// $json_input = json_decode(file_get_contents('php://input'), true);
// Get the checklist item value from the AJAX request
$option = $_POST['option'];
$item = $_POST['item'];
// Update the checklist in the options table
// update_option($option, $item);
update_option( $_POST['option'], $_POST['item'] );
?>
<div>
<ul>
<li>
Option: <?php echo $option ?>
</li>
<li>
Item: <?php echo $item ?>
</li>
</ul>
</div>
<?php
// Return a success response
wp_send_json_success(array('details: ' => true));
}
add_action('wp_ajax_autosave_checklist', 'autosave_checklist_handler');
add_action('wp_ajax_nopriv_autosave_checklist', 'autosave_checklist_handler');
function register_bm_settings() {
register_setting( 'checklist_settings_group', 'details-checkbox' );
register_setting( 'checklist_settings_group', 'socials-checkbox' );
register_setting( 'checklist_settings_group', 'topic-wheel-checkbox' );
register_setting( 'checklist_settings_group', 'testimonials-checkbox' );
}
function bm_css_and_js($hook) {
wp_enqueue_style('bm_css', plugin_dir_url(__FILE__).'css/styles.css');
wp_enqueue_script('autosave-checklist-script', plugin_dir_url(__FILE__).'autosave-checklist.js', array('jquery'), '1.0', true);
wp_localize_script(
'autosave-checklist-script',
'autosaveChecklist',
array(
'ajaxUrl' => admin_url('admin-ajax.php')
)
);
}
function bm_add_admin_page() {
add_menu_page(
'BlitzMetrics',
'BlitzMetrics',
'manage_options',
'bm-plugin',
'bm_admin_page_html',
plugin_dir_url(__FILE__).'/images/icon.png'
);
}
add_action( 'admin_enqueue_scripts', 'bm_css_and_js' );
add_action( 'admin_init', 'register_bm_settings' );
autosaving-checklist.js:
document.addEventListener('DOMContentLoaded', () => {
const details = document.querySelector('#details');
const socials = document.querySelector('#socials');
const topicWheel = document.querySelector('#topic-wheel');
const testimonials = document.querySelector('#testimonials');
details.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('details: ' + details.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: {
action : 'wp_ajax_autosave_checklist',
option: 'details-checkbox',
item: document.getElementById('details').checked
},
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
socials.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('socials: ' + socials.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: JSON.stringify({
action : 'wp_ajax_autosave_checklist',
option: 'socials-checkbox',
item: document.getElementById('socials').checked
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
topicWheel.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('topicWheel: ' + topicWheel.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: JSON.stringify({
action : 'wp_ajax_autosave_checklist',
option: 'topic-wheel-checkbox',
item: document.getElementById('topic-wheel').checked
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
testimonials.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('testimonials: ' + testimonials.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: JSON.stringify({
action : 'wp_ajax_autosave_checklist',
option: 'testimonials-checkbox',
item: document.getElementById('testimonials').checked
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
})
I am trying to save the values of multiple checklists using update_option and individual options for each item. I am getting a 400 Error in the console when making POST requests to /wp-admin/admin-ajax.php. Please help if you can!
index.php:
function settings_html_content() {
$details = get_option('details-checkbox');
$socials = get_option('socials-checkbox');
$topic_wheel = get_option('topic-wheel-checkbox');
$testimonials = get_option('testimonials-checkbox');
?>
<h2>Setup Checklist</h2>
<form id="autosave-checklist-form" action="options.php">
<label for="details" id="details" name="details"><input type="checkbox" id="details" name="details" label="details" value="<?php echo esc_attr($details); ?>" <?php checked($details); ?>>Submit the <a href="?page=bm-plugin&tab=details">"Personal Branding Details" form</a>.</label>
<label for="socials" id="socials" name="socials"><input type="checkbox" id="socials" name="socials" label="socials" value="<?php echo esc_attr($socials); ?>" <?php checked($socials); ?>>Submit the <a href="?page=bm-plugin&tab=socials">"Social Media Accounts" form</a>.</label>
<label for="topic-wheel" id="topic-wheel" name="topic-wheel"><input type="checkbox" id="topic-wheel" name="topic-wheel" label="topic-wheel" value="<?php echo esc_attr($topic_wheel); ?>" <?php checked($topic_wheel); ?>>Submit the <a href="?page=bm-plugin&tab=topic-wheel">"Topic Wheel" form</a>.</label>
<label for="testimonials" id="testimonials" name="testimonials"><input type="checkbox" id="testimonials" name="testimonials" label="testimonials" value="<?php echo esc_attr($testimonials); ?>" <?php checked($testimonials); ?>>Submit the <a href="?page=bm-plugin&tab=testimonials">"Testimonials" form</a>.</label>
<p>For more information please read our <a href="">documention</a>.</p>
<?php
settings_fields( 'checklist_settings_group' );
do_settings_sections( 'bm_plugin' );
submit_button();
?>
</form>
<?php
}
function autosave_checklist_handler() {
// $json_input = json_decode(file_get_contents('php://input'), true);
// Get the checklist item value from the AJAX request
$option = $_POST['option'];
$item = $_POST['item'];
// Update the checklist in the options table
// update_option($option, $item);
update_option( $_POST['option'], $_POST['item'] );
?>
<div>
<ul>
<li>
Option: <?php echo $option ?>
</li>
<li>
Item: <?php echo $item ?>
</li>
</ul>
</div>
<?php
// Return a success response
wp_send_json_success(array('details: ' => true));
}
add_action('wp_ajax_autosave_checklist', 'autosave_checklist_handler');
add_action('wp_ajax_nopriv_autosave_checklist', 'autosave_checklist_handler');
function register_bm_settings() {
register_setting( 'checklist_settings_group', 'details-checkbox' );
register_setting( 'checklist_settings_group', 'socials-checkbox' );
register_setting( 'checklist_settings_group', 'topic-wheel-checkbox' );
register_setting( 'checklist_settings_group', 'testimonials-checkbox' );
}
function bm_css_and_js($hook) {
wp_enqueue_style('bm_css', plugin_dir_url(__FILE__).'css/styles.css');
wp_enqueue_script('autosave-checklist-script', plugin_dir_url(__FILE__).'autosave-checklist.js', array('jquery'), '1.0', true);
wp_localize_script(
'autosave-checklist-script',
'autosaveChecklist',
array(
'ajaxUrl' => admin_url('admin-ajax.php')
)
);
}
function bm_add_admin_page() {
add_menu_page(
'BlitzMetrics',
'BlitzMetrics',
'manage_options',
'bm-plugin',
'bm_admin_page_html',
plugin_dir_url(__FILE__).'/images/icon.png'
);
}
add_action( 'admin_enqueue_scripts', 'bm_css_and_js' );
add_action( 'admin_init', 'register_bm_settings' );
autosaving-checklist.js:
document.addEventListener('DOMContentLoaded', () => {
const details = document.querySelector('#details');
const socials = document.querySelector('#socials');
const topicWheel = document.querySelector('#topic-wheel');
const testimonials = document.querySelector('#testimonials');
details.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('details: ' + details.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: {
action : 'wp_ajax_autosave_checklist',
option: 'details-checkbox',
item: document.getElementById('details').checked
},
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
socials.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('socials: ' + socials.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: JSON.stringify({
action : 'wp_ajax_autosave_checklist',
option: 'socials-checkbox',
item: document.getElementById('socials').checked
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
topicWheel.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('topicWheel: ' + topicWheel.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: JSON.stringify({
action : 'wp_ajax_autosave_checklist',
option: 'topic-wheel-checkbox',
item: document.getElementById('topic-wheel').checked
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
testimonials.addEventListener('change', () => {
console.log('autosaveChecklist: ' + JSON.stringify(autosaveChecklist))
console.log('testimonials: ' + testimonials.checked)
fetch(autosaveChecklist.ajaxUrl + '?action=wp_ajax_autosave_checklist', {
method: 'POST',
body: JSON.stringify({
action : 'wp_ajax_autosave_checklist',
option: 'testimonials-checkbox',
item: document.getElementById('testimonials').checked
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
})
1 Answer
Reset to default 0Solved by using Content-Type: application/x-www-form-urlencode with new URLSearchParams(body).toString() instead of JSON.stringify(body).
autosave-checklist.js
details.addEventListener('change', () => {
fetch(autosaveChecklist.ajaxUrl + '?action=autosave_checklist', {
method: 'POST',
body: new URLSearchParams({
action : 'autosave_checklist',
option: 'details-checkbox',
item: details.checked
}).toString(),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));;
});
socials.addEventListener('change', () => {
fetch(autosaveChecklist.ajaxUrl, {
method: 'POST',
body: new URLSearchParams({
action : 'autosave_checklist',
option: 'socials-checkbox',
item: socials.checked
}).toString(),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));
});
topicWheel.addEventListener('change', () => {
// console.log('topicWheel: ' + topicWheel.checked)
fetch(autosaveChecklist.ajaxUrl, {
method: 'POST',
body: new URLSearchParams({
action : 'autosave_checklist',
option: 'topic-wheel-checkbox',
item: topicWheel.checked
}).toString(),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));;
});
testimonials.addEventListener('change', () => {
// console.log('testimonials: ' + testimonials.checked)
fetch(autosaveChecklist.ajaxUrl, {
method: 'POST',
body: new URLSearchParams({
action : 'autosave_checklist',
option: 'testimonials-checkbox',
item: testimonials.checked
}).toString(),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => console.log(res))
.catch(err => console.error(err));;
});
本文标签： plugin optionsTrouble trying to automatically save checklist items which clicked
版权声明：本文标题：plugin options - Trouble trying to automatically save checklist items which clicked 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736745005a1950724.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论