1

I want to make filter with check boxes with ajax.

Here is the form with check boxes:

<form  method="post" id="filter">
    <input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
    <input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ($twitter=='1') {echo 'checked';}?>    
    <input type="hidden" value="myfilter"> 
</form>

Here is javascript:

jQuery(document).ready( function(){  
    jQuery('#content').on('submit', '#filter', function(e) {
    e.preventDefault();     
    var test = jQuery('#test-btn').data( 'id' );

    jQuery.ajax({           
        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        },
        success : function( response ) {
            alert (test);               
            jQuery('#result').html(response);

        }
    }); 
    });
 });

And function:

function test_function() {  
check_ajax_referer( 'rml-nonce', 'security' );  
$test_data = $_POST['test_data'];
echo $test_data; 
die();
}
add_action('wp_ajax_test_function', 'test_function'); 
add_action('wp_ajax_nopriv_test_function', 'test_function');

For now I'm just trying to test it. So when user clicks on checkbox in form that ajax is called. But I'm stuck. If I add this line to form action action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" , then on submit I'm stuck on ajax url: admin-ajax.php. If I remove action line from form then page simple reloads.

If anybody can tell me what I'm doing wrong, I will build on this and actually send checkbox values from the form and execute query in function for filtering the data.

1 Answer 1

0

in your html form add <input name="action" type="hidden" value="test_function"/> . here "value" is your "action_name". Your ajax call is incorect. Data should be url: "your php action script" data: $('form#filter).serialize(), About ajax first try to create ajax on your computer without wordpress. When you understand how ajax work try on Wordpress. if you want to stay on the same page use jQuery(document).ready(function($) { $('form#filter').on("submit",function(e){ e.preventDefault(); $.ajax({ ..... Beginners don't understand what ajax is. It's server response. So you first need server side script (using php) write in url where it is, then data is sent in that url file. Then executed and server make response.

/update/ ok I'll give an correct wordpress ajax axample and try to explain how it work.

html

<form  method="post" id="filter">
<input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
<input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ($twitter=='1') {echo 'checked';}?>    
<input type="hidden" name="action" value="my_php_action"> 

Here is important <input type="hidden" name="action" value="my_php_action"> else it want work.

Javascript

jQuery(document).ready( function(){  
    $('#filter').on('submit', function(e) {
    e.preventDefault();     
     jQuery.ajax({
  /*here url is in your plugin directory created file to which you sent data*/   
        url : myPlugin/serverSidePHPscript.php, 
        type : 'post',
       /* data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        }, incorrect. Should be folowing*/
        data:$('form#filter').serialize(), //server will unserialize automatic
        success : function( response ) {
        alert ('Server say :' + response ); //!important for url debuging purpose   
        }
    }); 
    });
 });

myPlugin/serverSidePHPscript.php file looks like Variation 1:

<?php 

echo "I fooled you!";

?>

enter image description here

Important to understand: if in javascript alert box you see only "Server say:" Then script failed. If you see in alert box "Server say: I fooled you" then is correct.

myPlugin/serverSidePHPscript.php file looks like Variation 2:

<?php
/**
 * Executing Ajax process.
 *
 * @since 2.1.0
 */
define( 'DOING_AJAX', true );
if ( ! defined( 'WP_ADMIN' ) ) {
    define( 'WP_ADMIN', true );
}

/** Load WordPress Bootstrap */
require_once('../../../../wp-load.php' );

/** Allow for cross-domain requests (from the front end). */
//send_origin_headers();

// Require an action parameter here is for debuging
if ( empty( $_REQUEST['action'] ) )
    wp_die( '0', 400 );

/** Load Ajax Handlers for WordPress Core */
require_once( ABSPATH . 'wp-admin/includes/ajax-actions.php' );

@header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
@header( 'X-Robots-Tag: noindex' );

send_nosniff_header();
nocache_headers();

add_action('I_fooled_you_again_wp_ajax', 'callback_function');
do_action( 'I_fooled_you_again_wp_ajax');


//callback function
function callback_function(){
  echo "I fooled you again!";
}
wp_die();


?>

Again if you see in alert box "Server say: I fooled you again!" then the script is correct. If you compare wordpress file admin-ajax.php with myPlugin/serverSidePHPscript.php then you see it is almost the same.

/ *update * / And aproach 3 the easiest way. In plugins dont use hooks wp_ajax_callback_fuction or wp_ajax_nopriv_callback_function hooks instead use admin_init hook, for frontend too. wp_ajax hook will never fire, because of if condition in admin-ajax.php file.

This is how ajax work on wordpress.

8
  • url should point to admin-ajax.php, not your own php file.
    – Milo
    May 7, 2018 at 17:42
  • It's possible both variations. If for front-end you need to change admin-ajax.php file. May 7, 2018 at 21:23
  • No, only one way is correct if you are trying to use the WordPress API.
    – Milo
    May 8, 2018 at 0:15
  • you can include wp-load.php in your own url php file and you will use all wordpress api functions. May 8, 2018 at 1:05
  • The problem was in the form: onchange="this.form.submit()". When I remove that line and add a submit button it worked. But, now I have to figure out how to submit form on a checkbox change.
    – Ante Medic
    May 8, 2018 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.