我有一个自定义页面,我想根据客户端输入(代码微支付)生成一个应该通过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">×</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");
});
});
答案 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");
}
});