The filter output records in WordPress?

AJAX filter WordPress records. For simplicity, include in it only the checkbox that includes the entries in order (ASC).

Here is the handler function in functions.php that makes the display of records using the function get_posts():

true_filter_function function(){
 $args = array(
 'post_type' => 'pizza',
 'order' => 'DESC',
);

 // condition: included ASC - sort in order
 if ( isset( $_POST['in_order'] ) && $_POST['in_order'] == 'on' ) {
 $args['order'] = 'ASC';
}

 echo "<pre>";
 print_r( $args );
 echo "</pre>";

 $pizza = get_posts( $args );

 return $pizza;

}

add_action('wp_ajax_myfilter', 'true_filter_function');
add_action('wp_ajax_nopriv_myfilter', 'true_filter_function');


Is the filter and the output of the posts on the page:
<!-- Filter -->
 <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
 <label><input type="checkbox" name="in_order"/>to Include sort order</label>
 <button>Apply filter</button>
 <input type="hidden" name="action" value="myfilter">
</form>
 <div id="response"></div>

 <!-- The output posts -->
<?php
 $pizza = true_filter_function();

 foreach ($pizza as $post) : setup_postdata($post); ?>
 <div class="post__item">
 <h1><?php the_title(); ?></h1>
 <?php the_post_thumbnail('thumbnail'); ?>
</div>
 <?php endforeach; wp_reset_postdata(); ?>


jQuery script:
jQuery(function($){
$('#filter').submit(function(){
 var filter = $(this);
$.ajax({
 url:filter.attr('action'), // handler
 data:filter.serialize(), // data
 type:filter.attr('method'), // request type
beforeSend:function(xhr){
 filter.find('button').text('Uploading...'); // change the button text
},
success:function(data){
 filter.find('button').text('Apply filter'); // return the text of the button
$('#response').html(data);
}
});
 return false;
});
});


In functions.php did a print_r( $args );. When you enable the checkbox "Enable sorting for order" and clicking the button "Apply filter" it is evident that the $args array changes the value of the key 'order' with 'DESC' to 'ASC':
5c9b62c11f2a0787377663.png5c9b62ce2c516425275124.png

but the order of the output records is somehow not affected.

Tell me, what am I doing wrong?
March 19th 20 at 08:50
1 answer
March 19th 20 at 08:52
Solution
Some questions that arose along the way:
1) You signed up on the hooks for ajax? It is necessary to subscribe to two hooks.
2) You along with the request needs to pass another parameter in my opinion is called action, not the action of the html form tag, this action will work like a slug when you call handle ajax on the server.
3) have You checked what address is obtained in action, he is correct?
4) No preventDefault no page reload? Js is handling the submit event, while the default action of the browser You do not cancel, was supposed to go reload the page.
1. functions.php
// subscribe to the hooks
add_action('wp_ajax_[SOME SLUG]', 'my_ajax_form');
add_action('wp_ajax_nopriv_[SOME SLUG]', 'my_ajax_form');
// what is [SOME SLUG] see below

my_ajax_form function(){
// data processing what you want to do
 $response = ";
if(isset($_POST['something'])){

}
echo json_encode(res);
// after processing, it is necessary to kill wordpress.
wp_die();
}

2. You need to pass the address on admin-ajax.php do so in the page template where you need a ajax
// subscribe to the hook forming head
add_action('init', 'ajax_url');
$vars = array(
 'url' => admin_url('admin-ajax.php'),
);

echo '<script>window.wp_vars =' . json_encode($vars) . '</script>';

That is, in the head tag to insert a script that creates a global js variable with the address to admin-ajax.php
It can be in the form tag to register the action, but to form a correct url to call function admin_url passing as a parameter the name of the desired script.
3. Now js:
$('form').on('submit', function(e){
e.preventDefault();
 // form the request body
 var data = {
 action: 'SLUG', // -> !!!!! this is the SLUG => SLUG SOME
 key1: $('form input').val(),
 key2: 'something'
};
 // actually send the request, for example, $.post, and do what you want, as the address, use either the reception of a global variable, or the address in the action attribute of the form tag
 $.post(wp_vars.url, data, function(res){
 // colback on the processing of the response from the server
alert(res.success);
 }, 'json');

});

4. Back to point 1, it is necessary to subscribe to two hooks, and these hooks would be in this example:
add_action('wp_ajax_SLUG', 'my_ajax_form');
add_action('wp_ajax_nopriv_SLUG', 'my_ajax_form');

The system is tricky, wp when I get the ajax request it will be in the request body to search for the action key, and it will get that there are transmitted, in this example, pass the SLUG, totally arbitrary value. Next, it registers the hooks 'wp_ajax_SLUG' and 'wp_ajax_nopriv_SLUG', and then causes one of these events, so we signed up just for these events. If using ajax to send quite a left action, then the server will do nothing, as the left the event is not hanged a single processor. - adolf_Williams commented on March 19th 20 at 08:55
@adolf_Williams, Thanks, I will try to understand - Watso commented on March 19th 20 at 08:58

Find more questions by tags WordPressWeb DevelopmentjQueryJavaScriptAJAX