Pass JavaScript variable to PHP function within Ajax call?
Get the solution ↓↓↓
I'm trying to create an ajax search form that gets WordPress posts if the search term is found within the post title. This is my PHP function:
function get_records_ajax($query) {
$args = array(
'post_type' => array('record'),
'post_status' => array('publish'),
'posts_per_page' => 999,
'nopaging' => true,
'meta_query' => array(
'key' => 'title',
'value' => $query,
'compare' => 'IN',
)
);
$ajaxposts = get_posts( $args );
echo json_encode( $ajaxposts );
exit;
}
And this is my jQuery function:
jQuery('.rrm_search_form').on('submit', function(e){
e.preventDefault();
let query = jQuery(this).find('.rrm_search_input').val();
console.log('search submitted for ' + query);
jQuery.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php');?>',
dataType: "json",
data: { action : `get_records_ajax(${query})` },
success: function( response ) {
jQuery.each( response, function( key, value ) {
console.log( key, value );
});
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
console.log(err.Message);
}
});
});
I've tried lots of different syntax to try and pass the variable within the data action of my ajax call but nothing's working. Any ideas how I might be able to do this?
Answer
Solution:
I assume your ajax URL is fine and loading in the website.
Now all you have to modify your JS scripts and need to add hooks in PHP section. First in your JS script modify thedata: line as follows:
data: { action : 'get_records_ajax', query: query },
Also You can add security check if you want. but leave it now.
Secondly, in your PHP file add the following code..
add_action( "wp_ajax_nopriv_get_records_ajax", 'get_records_ajax' );
add_action( "wp_ajax_get_records_ajax", 'get_records_ajax' );
and then in yourget_records_ajax receive thequery value
function get_records_ajax(){
$query = sanitize_text_field($_POST['query']);
//then your rest code
}
It will return all the post. Now you need to adjust your JS code in the success block :
success: function( response ) {
console.log(response)
//adjust here with your HTML dom elements
}
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: zsh: command not found: php
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.