Wordpress Ajax调用在自定义页面上不起作用

Question

All seems in order, but still not getting destination populated.

So far I've verified that it can find the PHP and JS files within the plugin I created and even generate the output in XML. That I can see if I let the default <a> tag behavior.

Somehow it blocks where the output is generated.

Thanks

This is for a custom page.

1 - Here is the HTML:

Link to trigger ajax:

$link = admin_url('admin-ajax.php?action=pay_dialog_step1&boo_zone='.$palier['palier']);

<a href="' . $link . '" id="' . $palier['palier'].'" class="do_popup btn btn-lg">'.get_option('_boopass_buybtn_label', '').'</a>

Division to be populated:

<div id="alloconv_popup"></div>

2- PHP code in a plugin directory

add_action("wp_ajax_pay_dialog_step1", "pay_dialog_step1");

// ajax call
    function pay_dialog_step1(){
        $boo_zone = $_REQUEST['boo_zone'];
        $response = new WP_Ajax_Response;
        $html = '<div class="bp_entry_wrapper">
                            <div class="entry normal" >
                                <div class="alloconv_palier_header" >
                                    <p> Alloconv ' . get_option('alloconv_' . $_REQUEST['boo_zone'] .'_token', '') . ' tokens </p>
                                </div>';                        
        $html.= get_option('alloconv_' . $_REQUEST['boo_zone'] .'_script', '');                                     
        $html.=     "</div>";
        $html.=     "</div>";

        $response->add( array(
            'data'  => 'success',
            'supplemental' => array(
                'boo_zone' => $boo_zone,
                'message' => $html,
            ),
        ) );        
        $response->send();
        exit(); 
    }

add_action('init', 'ajax_popup_script' );

function ajax_popup_script() {
wp_register_script( "ajax_popup_script", WP_PLUGIN_URL.'/ajax-popup-paiement/ajax_popup_paiement.js', array('jquery') );
wp_localize_script( 'ajax_popup_script', 'ajaxPaiement', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'ajax_popup_script' );

}   

3- jquery code on same plugin directory

jQuery(document).ready( function() {

jQuery(".do_popup").click( function(e) {
    e.preventDefault();
    var link = this;
    var boo_zone= jQuery(link).attr("id");
    var info = {
        action: 'pay_dialog_step1',
        boo_zone: boo_zone
    };

    // Post to the server
    jQuery.ajax({
        type:"POST",
        url:ajaxPaiement.ajaxurl,
        data:info,
        dataType:html,
        success: function(data){        
             jQuery("#alloconv_popup").html(data);
        }
    });     
});
});

Answer 1

You have to let wp know who can use the ajax calls.

wp_ajax is for the admin section

add_action('wp_ajax_process_ajax_input', 'callBackFunction_Name');

wp_ajax_nopriv is for non admin (users)

add_action('wp_ajax_nopriv_process_ajax_input', 'callBackFunction_Name');

This is the call back function that will then process your ajax call.

function callBackFunction_Name{

    $allFields = $_REQUEST;
    #todo process input.
}

Answer 2

I finally found what the issue was. Simply, on the ajax call, the data type should be 'xml' instead of 'html.

The WP_Ajax_Response generates an XML file, so one needs to adapt the ajax call accordingly.