wordpress多个ajax调用失败

时间:2017-04-04 07:46:23

标签: jquery ajax wordpress

我有一个自定义页面,我想根据客户端输入(代码微支付)生成一个应该通过Ajax多次更新的弹出窗口

我已经创建了一个处理它的插件,它第一次运行正常,但第二次尝试失败。

问题似乎是找不到javascript插件文件。它直接到达插件php文件,它不应该。

重新初始化javascript可能会出现问题,但我不确定是否属于这种情况或是如何做到这一点。

因此,当我在第二次尝试时单击触发器<a>标签时,它会将我发送到处理ajax的ajax-admin.php文件。因为它没有读取javascript,所以它不会停止<a>的默认行为。

希望有人可以提供帮助。

以下是代码:

1 - 在原始页面加载时启动HTML(来自functions.php)

    public function display_paydiallo_products($atts){
        if(is_user_logged_in()) {
            global $post;
            $paydiallo = new PaydialloApi(
                intval(get_option("_paydiallo_id_client", null)),
                get_option("_paydiallo_key", null),
                intval(get_option("_paydiallo_id_site", null)),
                intval(get_option("_paydiallo_id_produit", null))
            );
                $html = '<div id="paiement_popup"></div>';
                $html .= '<div class="bp_entry_wrapper">';
                $i = 0;
                foreach($paydiallo->getPaliers() as $key => $palier){
                    $link = admin_url('admin-ajax.php?action=pay_dialog_step1&boo_zone='.$palier['zone']);
                    if($i != 0) {
                        $html .= '<div class="entry">
                            <span class="title">'.$palier['palier'].'</span>
                            <div class="cout">'.$palier['cout'].'</div>
                            <div class="amount">'.get_option('paydiallo_'.$palier['zone'], "0").'</div><sub class="devise">'.get_option('_boopass_devise', '').'</sub>
                            <a href="' . $link . '" id="paydiallo' . $palier['zone'].'" class="do_popup btn btn-lg">'.get_option('_boopass_buybtn_label', '').'</a>
                        </div>';
                    } else {
                        $i++;
                    }
                }
                $html .= "</div>";


            return $html;
        }
    }

来自插件的2- PHP文件(简体)ajax_popup_paiement.php

add_action("wp_ajax_pay_dialog_step1", "pay_dialog_step1");
add_action('wp_ajax_nopriv_pay_dialog_step1', 'pay_dialog_step1');



    function pay_dialog_step1(){
        global $post;
        $service = $_REQUEST['service'];
        $boo_zone = $_REQUEST['boo_zone'];
        $response = new WP_Ajax_Response;

        if ($service == 'alloconv') {
            $html = '<div class="bp_entry_wrapper">
                    <span class="close_popup_paiement">&times;</span>
                    <div class="entry normal" >
                        <div class="alloconv_palier_header" >
                            <p>' . $service  . get_option('alloconv_' . $_REQUEST['boo_zone'] .'_token', '') . ' tokens </p>
                        </div>';                        
            $html.= get_option('alloconv_' . $_REQUEST['boo_zone'] .'_script', '');                                     
            $html.=     "</div>";
            $html.=     "</div>";
        }
        else if($service == 'paydiallo'){

            $paydiallo = new PaydialloApi(
                intval(get_option("_paydiallo_id_client", null)),
                get_option("_paydiallo_key", null),
                intval(get_option("_paydiallo_id_site", null)),
                intval(get_option("_paydiallo_id_produit", null))
            );

            if(isset($_REQUEST['boo_zone']) && !isset($_REQUEST['boo_code'])) {
                $number = $paydiallo->getNumber($_REQUEST['boo_zone']);
                $link = admin_url('admin-ajax.php?action=pay_dialog_step1&boo_zone='.$_REQUEST['boo_zone'] . '&boo_code=true');
                $html = '<div class="bp_entry_wrapper">
                                <div class="entry normal">
                                    <span class="title">Veuillez appeler le numéro suivant</span>
                                    <br>';
                $html .=            '<img src="'.$number['numberImage'].'" alt="'.$number['number'].'">';
                $html .=            '<br>';
                $html .=            '<p>Code anti-spam / mot clé : <b>'.$number['accessCode'].$number['keyword'].'</b></p>';
                $html .=            '<br>';
                $html .=            '<p>'.$number['notice'].'</p>';


                $html .=            '<input type="hidden" id="boo_zone" value="' . $_REQUEST['boo_zone'] .'" >';
                $html .=            '<input type="text" id="boo_code" name="boo_code">';
                $html .=            '<a href="' . $link . '" id="paydiallo_999999" class="btn btn-lg">Submit</a>';

                $html .=            '</div>';
                $html .=            '</div>';
            } elseif(isset($_REQUEST['boo_code'])) {
                $validation = $paydiallo->postCode($_REQUEST['boo_code']);
                if($validation['state'] == false && isset($_REQUEST['boo_zone'])) {
                    $number = $paydiallo->getNumber($_REQUEST['boo_zone']);
                    $html = '<div class="bp_entry_wrapper">                     
                                    <div class="entry normal">
                                        <span class="title">Veuillez appeler le numéro suivant</span>
                                        <br>
                                        <p class="err_msg">Le code saisi est incorrect, veuillez réessayer.</p>
                                        <br>
                                        <img src="'.$number['numberImage'].'" alt="'.$number['number'].'">
                                        <br>
                                        <p>Code anti-spam / mot clé : <b>'.$number['accessCode'].$number['keyword'].'</b></p>
                                        <br>
                                        <p>'.$number['notice'].'</p>
                                        <form action="" type="GET">
                                            <input type="text" name="boo_code">
                                            <input type="submit" class="btn btn-lg">
                                        </form>
                                    </div>
                                </div>';
                    $this->update_code($_GET['boo_code'], 'Paydiallo', false);
                } elseif($validation['state'] == true) { //Validation
                    //some not pertinent code here
                } else {
                    //some not pertinent code here
                }
            }               
        }

        $response->add( array(
                'data'  => 'success',
                'supplemental' => array(
                    'message' => $html,
                    'boo_zone' => $boo_zone,
                    'boo_code' => 'false'
                ),
            ) );        
        $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-javascript文件(简化)ajax_popup_paiement.js

jQuery(document).ready( function() {

jQuery(".do_popup").click( function(e) {
    e.preventDefault();
    var link = this;
    var boo_zone= jQuery(link).attr("id");
    var service;
    if(boo_zone.includes('alloconv')){
        service = 'alloconv';
        boo_zone = boo_zone.replace('alloconv','');
    }
    else if(boo_zone.includes('paydiallo')){
        service = 'paydiallo';
        boo_zone = boo_zone.replace('paydiallo','');
    }

    var info = {
        action: 'pay_dialog_step1',
        boo_zone: boo_zone,
        service:service
    };
    // Post to the server
    jQuery.ajax({
        type:"POST",
        url:ajaxPaiement.ajaxurl,
        data:info,
        dataType:'xml',
        success: function(data){
            var message = jQuery( data ).find( 'supplemental message' ).text();
             jQuery("#paiement_popup").html(message);
             jQuery("#paiement_popup").css("display","block");
        }
    });

});



jQuery("#paydiallo_999999" ).on("click",function(e) {
alert('blahblahblah');
    e.preventDefault();
    var service= jQuery(this).attr("id");
    if(service.includes('alloconv')){
        service = 'alloconv';
    }
    else if(service.includes('paydiallo')){
        service = 'paydiallo';
    }
    var boo_zone = jQuery("#boo_zone").val();
    var boo_code = jQuery("#boo_code").val();
    var info = {
        action: 'pay_dialog_step1',
        boo_zone: boo_zone,
        boo_code: boo_code,
        service:service
    };

    jQuery.ajax({
        type:"POST",
        url:ajaxPaiement.ajaxurl,
        data:info,
        dataType:'xml',
        success: function(data){
            var message = jQuery( data ).find( 'supplemental message' ).text();
             jQuery("#paiement_popup").html(message);
             jQuery("#paiement_popup").css("display","block");
        }
    });

});



    jQuery(".close_popup_paiement").on("click", function() {
            jQuery("#paiement_popup").css("display","none");
    });     

});

2 个答案:

答案 0 :(得分:0)

你可以尝试替换

吗?
jQuery(".do_popup").click( function(e) {

jQuery(document).on('click', '.do_popup', function(e) {

它通过监听尚未创建的元素的事件来工作。

答案 1 :(得分:0)

@DRC走在正确的轨道上。问题在于约束力。

但是需要明确地对命名函数进行处理才能使它工作。 所以我调整了Ajax调用的success处理程序,并将脚本的第二部分转换为命名函数。

这是:

jQuery(document).ready( function() {

jQuery(".do_popup").on("click", function(e) {
    e.preventDefault();
    var link = this;
    var boo_zone= jQuery(link).attr("id");
    var service;
    if(boo_zone.includes('alloconv')){
        service = 'alloconv';
        boo_zone = boo_zone.replace('alloconv','');
    }
    else if(boo_zone.includes('paydiallo')){
        service = 'paydiallo';
        boo_zone = boo_zone.replace('paydiallo','');
    }

    var info = {
        action: 'pay_dialog_step1',
        boo_zone: boo_zone,
        service:service
    };
    // Post to the server
    jQuery.ajax({
        type:"POST",
        url:ajaxPaiement.ajaxurl,
        data:info,
        dataType:'xml',
        success: function(data){
            var message = jQuery( data ).find( 'supplemental message' ).text();
             jQuery("#paiement_popup").html(message);
             jQuery("#paiement_popup").css("display","block");
         jQuery("#paydiallo_popup2").on("click", ajax2);
         jQuery(".close_popup_paiement").on("click", close_popup_paiement);
        }
    });

});



//jQuery("#paydiallo_popup2" ).on("click",function(e) {
function ajax2(e){
    e.preventDefault();
    var service= jQuery(this).attr("id");

    if(service.includes('alloconv')){
        service = 'alloconv';
    }
    else if(service.includes('paydiallo')){
        service = 'paydiallo';
    }
    var boo_zone = jQuery("#boo_zone").val();
    var boo_code = jQuery("#boo_code").val();

    var info = {
        action: 'pay_dialog_step1',
        boo_zone: boo_zone,
        boo_code: boo_code,
        service:service
    };
  alert(info.boo_code);

    jQuery.ajax({
        type:"POST",
        url:ajaxPaiement.ajaxurl,
        data:info,
        dataType:'xml',
        success: function(data){
            var message = jQuery( data ).find( 'supplemental message' ).text();
        alert(message);
             jQuery("#paiement_popup").html(message);
             jQuery("#paiement_popup").css("display","block");
        }
    });

// });
}



    //jQuery(".close_popup_paiement").on("click", function() {
  function close_popup_paiement(){
            jQuery("#paiement_popup").css("display","none");
    }       

 });