創世記+ Ajax + Jquery |アクションを呼び出せない

Question

ページを読み直さずにアクションを実行したい。私はこのタトゥーに従う https://codex.wordpress.org/AJAX_in_Plugins

しかし、私のページがリロードされるたびに、そして私は結果の価値を持つことができません。これが私のコードです：

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;

}

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

結果

その表示 "TEST1"と "TEST3"それから私のページrealoads

このリロードを防ぎ、私の結果を "TEST REQUEST"にするというアイデアはありますか？

ご協力ありがとうございました

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

MiloとUserabuserのコメントのおかげで、私は自分のphpを変更しました。まだ責任を持っています0

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

    }      

});

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

あなたがあなたのフォームの中の "送信"ボタンをクリックしているなら（私はそれを仮定しています）;メソッドが指定されていない場合、デフォルトのメソッドGETを実行するフォームが送信されます。

デフォルトの送信アクションを確実に防止する必要があります。

あなたのJavaScriptで。フォーム全体のchangeイベントをリスニングしているのではなく、送信ボタンにバインドする必要があります。

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

    }); 

});

あなたが本当にchangeイベントをリッスンしなければならないならば。入力を受け取るフィールドをターゲットにします。あなたの場合、それは1つのフィールドだけです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");
            }
        });

    }      

});