I have a custom page where I want to generate a popup that should be updated via Ajax multiple times, based on client input ( code micro payment )

I’ve created a plugin to handle that and it works fine the first time around, but fails on the second attempt.

The problem seems to be that it cannot find the javascript plugin file. It reaches the plugin php file directly, which it shouldn’t.

It might be a problem with having to reinitialize the javascript, but I am not sure if that’s the case or how to do it.

So, when I click on the trigger tag on the second attemps, it will send me to the ajax-admin.php file, which handles the ajax. As it does not read the javascript it does not stop the default behavior of .

Hope someone can help.

Here goes the code:

1 – HTML ( from 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 file from plugin ( simplified ) 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 file from plugin ( simplified ) 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");
    });     

});

Read more here: wordpress multiple ajax calls failing


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: