I'm looking to dynamically change the page-comments option based on whether the user clicks a URL. I have two functions to do this:
function psb_comment_listener_func(){
echo "
<script>
function myFunction(event) {
event.preventDefault();
console.log('in my function');
'<?php echo do_shortcode(\"[psb_all_comments]\"); ?>';
}
console.log('in the listener');
document.getElementsByClassName('nav-previous')[0].onclick = function() {myFunction(event)};
</script>
";
}
add_filter( 'learn-press/after-content-item-summary/lp_lesson', 'psb_comment_listener_func');
function psb_all_comments_func(){
echo "
<script>
console.log('in the shortcode');
</script> ";
update_option('page_comments', false);
}
add_shortcode( 'psb_all_comments', 'psb_all_comments_func');
The plan is that the listener catches the onclick and the function then stops the hyperlink from happening and calls the shortcode to update_option for page_comments. I have two problems:
Problem 1: If I copy and paste the javascript
function myFunction(event) {
event.preventDefault();
console.log('in my function');
'<?php echo do_shortcode(\"[psb_all_comments]\"); ?>';
}
console.log('in the listener');
document.getElementsByClassName('nav-previous')[0].onclick = function() {myFunction(event)};
into the browser console and press enter. The "in the listener" message appears (this is good) when the link ('older comments') is clicked the "in my function" appears (this is also good). But the call to the other function via the shortcode doesnt happen. There is no "in the shortcode" message. What am I missing here ?
Problem 2: None of it works when called from within the PHP function file. It only works in the browser console. Again, what am I missing ? Thanks Paul.
This is where I'm at now
PHP code
function psb_register_script() {
wp_register_script(
'psb_navprev',
plugin_dir_url( __FILE__ ).'/js/psb_navprev.js',
array(),
wp_get_theme()->get( 'Version' ),
array(
'strategy' => 'defer',
'in_footer' => true,
)
);
}
function psb_enqueue_script() {
//if ( is_singular( 'lp_course' ) ) {
wp_enqueue_script( 'psb_navprev', plugin_dir_url( __FILE__ ).'/js/psb_navprev.js',array('jquery'), '1.0', true );
//localize script
wp_localize_script( 'psb_navprev', 'psb_object',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce('psb-nonce'),
)
);
//}
}
//register and enqueue script
add_action( 'wp_enqueue_scripts', 'psb_register_script' );
add_action( 'template_redirect', 'psb_enqueue_script' );
add_action( 'wp_ajax_nopriv_psb_comment_cmd', 'psb_comment_cmd' );
add_action( 'wp_ajax_psb_comment_cmd', 'psb_comment_cmd' );
function psb_comment_cmd(){
echo " <script> console.log('in the handler'); </script> ";
check_ajax_referer( 'psb-nonce', 'nonce' ); // Check the nonce.
if (isset($_POST['psb_comment_cmd'])) {
//psb_all_comments()
echo " <script> console.log('comment => all'); </script> ";
wp_die(); // clean up
}
}
function psb_all_comments_func(){
echo "
<script>
console.log('in the update function');
</script> ";
update_option('page_comments', false);
}
// clicky-script.js
(function(){
const navPrevElement = document.querySelector('.nav-previous');
if (navPrevElement) {
navPrevElement.addEventListener('click', function(event){
console.log('in the clicky script');
event.preventDefault();
jQuery(document).ready(function($) {
$.ajax({
url:psb_object.ajax_url,
type: "post",
contentType: "json",
dataType: "json",
data: {action: "psb_comment_cmd"},
success: function(msg) {
console.log("AJAX success");
},
error: function() {
console.log("AJAX fail");
}
})
});
});
}
})();
Final resolution :-)
PHP
add_action ('rest_api_init', function() {
register_rest_route('psb/v1', 'posts', [
'methods' => 'GET',
'callback' => 'psb_posts',
]);
});
function psb_posts() {
update_option('page_comments', false);
return 'in the posts callback';
}
Javascript
// clicky-script.js
(function(){
const navPrevElement = document.querySelector('.nav-previous');
if (navPrevElement) {
navPrevElement.addEventListener('click', function(event){
console.log('in the clicky script');
event.preventDefault();
const apiUrl = window.location.origin + '/wp-json/psb/v1/posts';
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data); // set comment count
location.reload(); // refresh the page
})
.catch(error => {
console.error('API Error:', error);
});
});
};
})();
