Genesis + Ajax + Jquery | A défaut d'appeler l'action

Question

Je veux exécuter une action sans recharger ma page. Je suit ce tuto https://codex.wordpress.org/AJAX_in_Plugins

Mais chaque fois que ma page est rechargée, je ne peux pas avoir la valeur du résultat. Voici mon code:

Dans custom-login.php

add_action( 'get_header', 'ck_do_login_form' );
function ck_do_login_form() {

     // Enqueue sticky menu script - Crunchify Tips
    add_action( 'wp_enqueue_scripts', 'crunchify_enqueue_script' );

    // Test love
    add_action( 'wp_ajax_post_love_add_love', 'post_love_add_love' );
    add_action( 'wp_ajax_nopriv_post_love_add_love', 'post_love_add_love' );
    add_action( 'wp_ajax_post_love_add_love', 'post_love_add_love' );

    // Content
    add_action( 'genesis_entry_content', 'vivi_logged' );
}

function post_love_add_love() {
    $whatever = 1;
    $whatever++;
    echo $love;
    wp_die();
}

function crunchify_enqueue_script() {  

    wp_enqueue_script( 'jquery-2.1.0', get_stylesheet_directory_uri() . '/js/jquery-2.1.0.min.js', array('jquery'), '1.0', true );  
    wp_enqueue_script( 'user-login', get_stylesheet_directory_uri() . '/js/user-login.js', array('jquery'), '1.0', true );

    //Here we create a javascript object variable called "youruniquejs_vars". We can access any variable in the array using youruniquejs_vars.name_of_sub_variable
    wp_localize_script( 'user-login', 'userlogin_object', 
        array('ajaxurl' => admin_url( 'admin-ajax.php' ), 'the_issue_key' => $the_issue_key) 
    );      
}

function vivi_logged() {

$love_text = '<form id="ticket" name="ticket" >  
                          <fieldset>  
                            <input type="hidden" name="tkt_id" value="' . $TKT_ID . '" required/>
                            <input type="number" name="TKT_qty_new" value="' . $TKT_qty . '" required/>
                            <input id="submit" type="submit" name="submit" value="Send" />  
                          </fieldset>  
                          </form><div id="form-messages"></div></form><div id="form-messages2"></div><div id="form-messages3"></div>';

            echo $love_text;

}

dans user-login.js

jQuery(document).ready(function($){

    // jQuery( document ).on( 'click', '.love-button', function(event) { Triger on click href
    jQuery('#ticket').change( function(event){  

        jQuery("#form-messages").html("TEST 1");
        event.preventDefault();

        var postData = {
            'action': 'post_love_add_love',
            'whatever': userlogin_object.the_issue_key
        };

        jQuery.ajax({
            type: "POST",
            url : userlogin_object.ajaxurl,
            data : postData,
            success: function(response) {
                alert('Got this from the server: ' + response);
                jQuery("#form-messages2").html("TEST REQUEST");
            }
        });

        jQuery("#form-messages3").html("TEST 3");
    }); 
});

Résultat

Son affichage "TEST1" et "TEST3" Puis ma page se recharge

Avez-vous une idée pour empêcher cette recharge et avoir mon résultat "TEST REQUEST"?

Merci beaucoup pour votre aide,

---------------- EDIT V2 - 24/03/2016 -------------- -

Grâce aux commentaires de Milo et Userabuser, je change de php. J'ai toujours 0 dans ma respons

dans user-login.js

jQuery(document).ready(function($){

    jQuery('#ticket').on('keyup click', 'input[name="submit"], input[name="TKT_qty_new"]', function(event){  

        //prevent the default submit action of the form...
        event.preventDefault();

        if ( event.type === 'click' && event.target.name !== 'submit' ) {
            return false;
        }        

        doAjaxRequest();

    }); 

    function doAjaxRequest() {

        //issue ajax request
        jQuery.ajax({
            type: "POST",
            url : userlogin_object.ajaxurl,
            dataType: "json",
            data : {
                'action': 'post_love_add_love'
            },
            success: function(response) {
                //process success response
                alert('Got this from the server: ' + response);
                jQuery("#form-messages2").html("TEST REQUEST : " + response);
            }
        });

    }      

});

Dans custom-login.php

 add_action( 'get_header', 'ck_do_login_form' );
function ck_do_login_form() {

    // Start session if doesn't already exists
    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }

    // Remove the comment form
    add_filter( 'comments_open', '__return_false' ); 

    // Remove the list of comments
    add_filter( 'comments_array', '__return_empty_array' );
}

/**
* Enqueue sticky menu script - Crunchify Tips
*/
add_action( 'wp_enqueue_scripts', 'crunchify_enqueue_script' );
function crunchify_enqueue_script() {  

    wp_enqueue_script( 'jquery-2.1.0', get_stylesheet_directory_uri() . '/js/jquery-2.1.0.min.js', array('jquery'), '1.0', true );  
    wp_enqueue_script( 'user-login', get_stylesheet_directory_uri() . '/js/user-login.js', array('jquery'), '1.0', true );

    //Here we create a javascript object variable called "youruniquejs_vars". We can access any variable in the array using youruniquejs_vars.name_of_sub_variable
    wp_localize_script( 'user-login', 'userlogin_object', 
        array('ajaxurl' => admin_url( 'admin-ajax.php' ), 'the_issue_key' => $the_issue_key) 
    );      
}


    // Test love Ajax
add_action( 'wp_ajax_post_love_add_love', 'post_love_add_love' );
add_action( 'wp_ajax_nopriv_post_love_add_love', 'post_love_add_love' );
function post_love_add_love() {
    $love = 10;
    wp_send_json($love);
    exit;
}

/**
* Fonction quand l'internaute est connecté : Informations + Stages postés
*/
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
add_action( 'genesis_entry_content', 'vivi_logged' );
function vivi_logged() {

$love_text = '<form id="ticket" name="ticket" >  
                          <fieldset>  
                            <input type="hidden" name="tkt_id" value="' . $TKT_ID . '" required/>
                            <input type="number" name="TKT_qty_new" value="' . $TKT_qty . '" required/>
                            <input id="submit" type="submit" name="submit" value="Send" />  
                          </fieldset>  
                          </form><div id="form-messages"></div></form><div id="form-messages2"></div><div id="form-messages3"></div>';

            echo $love_text;
}

Answer 1

Si vous cliquez sur le bouton "soumettre" de votre formulaire (ce que je suppose); il soumettra le formulaire en appliquant la méthode par défaut GET où aucune méthode n'est spécifiée.

Vous devez vous assurer que vous empêchez l'action d'envoi par défaut.

Dans votre javascript; vous êtes à l’écoute d’un événement change sur l’ensemble du formulaire; vous devez plutôt vous connecter au bouton de soumission.

jQuery(document).ready(function($){

    jQuery('#ticket').on('click', '#submit', function(event){  

        //prevent the default submit action of the form...
        event.preventDefault();

        //issue ajax request
        jQuery.ajax({
            type: "POST",
            url : userlogin_object.ajaxurl,
            data : {
                'action': 'post_love_add_love',
                'whatever': userlogin_object.the_issue_key
            },
            success: function(response) {
                //process success response
                alert('Got this from the server: ' + response);
                jQuery("#form-messages2").html("TEST REQUEST");
            }
        });

    }); 

});

Si vous devez vraiment écouter les événements change; cible le champ qui reçoit l'entrée, dans votre cas, il s'agit d'un seul champ name="TKT_qty_new":

jQuery(document).ready(function($){

    jQuery('#ticket').on('keyup click', 'input[name="submit"], input[name="TKT_qty_new"]', function(event){  

        //prevent the default submit action of the form...
        event.preventDefault();

        if ( event.type === 'click' && event.target.name !== 'submit' ) {
            return false;
        }        

        doAjaxRequest();

    }); 

    function doAjaxRequest() {

        //issue ajax request
        jQuery.ajax({
            type: "POST",
            url : userlogin_object.ajaxurl,
            data : {
                'action': 'post_love_add_love',
                'whatever': userlogin_object.the_issue_key
            },
            success: function(response) {
                //process success response
                alert('Got this from the server: ' + response);
                jQuery("#form-messages2").html("TEST REQUEST");
            }
        });

    }      

});