web-dev-qa-db-fra.com

Envoi d'une variable depuis ajax sur le formulaire de soumission

Je veux faire un filtre avec des cases à cocher avec ajax.

Voici le formulaire avec les cases à cocher:

<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>

Voici le 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);

        }
    }); 
    });
 });

Et fonction:

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');

Pour l'instant j'essaye juste de le tester. Ainsi, lorsque l'utilisateur clique sur la case à cocher sous la forme, ajax est appelé. Mais je suis coincé. Si j'ajoute cette ligne pour former l'action action="<?php echo site_url() ?>/wp-admin/admin-ajax.php", alors sur soumettre, je suis bloqué sur l'adresse URL ajax: admin-ajax.php. Si je supprime la ligne action du formulaire, la page se recharge de nouveau.

Si quelqu'un peut me dire ce que je ne fais pas bien, je vais me baser dessus pour envoyer les valeurs des cases à cocher à partir du formulaire et exécuter la fonction query in pour filtrer les données.

ajaxforms
1
Ante Medic

dans votre formulaire HTML, ajoutez <input name="action" type="hidden" value="test_function"/>. Ici "valeur" est votre "action_name". Votre appel ajax est incorect. Les données doivent être url: "your php action script" data: $('form#filter).serialize(), À propos de ajax, essayez d’abord de créer ajax sur votre ordinateur sans wordpress. Lorsque vous comprenez le fonctionnement du travail ajax, essayez Wordpress. Si vous voulez rester sur la même page, utilisez jQuery(document).ready(function($) { $('form#filter').on("submit",function(e){ e.preventDefault(); $.ajax({ ..... Les débutants ne comprennent pas ce qu'est ajax. C'est la réponse du serveur. Donc, vous avez d’abord besoin d’un script côté serveur (avec php) qui écrit dans l’url où il se trouve, puis les données sont envoyées dans ce fichier. Puis exécuté et le serveur répond.

/ update / ok je vais donner un wordpress ajax axample correct et essayer d'expliquer comment cela fonctionne.

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">

Voici le <input type="hidden" name="action" value="my_php_action"> important sinon il veut travailler.

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   
        }
    }); 
    });
 });

le fichier myPlugin/serverSidePHPcript.php ressemble à la variante 1:

<?php 

echo "I fooled you!";

?>

 enter image description here 

Important à comprendre: si dans la zone d’alerte javascript, vous voyez seulement "Le serveur dit:" Le script a échoué. Si vous voyez dans la zone d'alerte "Le serveur dit: je vous ai dupé", alors c'est correct.

le fichier myPlugin/serverSidePHPcript.php ressemble à la variante 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();


?>

Encore une fois si vous voyez dans la boîte d’alerte "Le serveur dit: Je vous ai encore berné!" alors le script est correct. Si vous comparez le fichier wordpress admin-ajax.php avec myPlugin/serverSidePHPcript.php, vous constatez qu'il est presque identique.

/ * update */Et aproach 3 le plus simple. Dans les plugins, n'utilisez pas les hooks wp_ajax_callback_fuction ou wp_ajax_nopriv_callback_function, mais utilisez plutôt les hooks admin_init, pour le front-end. Le hook wp_ajax ne se déclenchera jamais, à cause de la condition if dans le fichier admin-ajax.php.

Voici comment ajax fonctionne sur wordpress.

0
Mancius Mancius