仅 Ajax 在 WordPress 中处理 Bootstrap Modal 的第一个元素
Posted
技术标签:
【中文标题】仅 Ajax 在 WordPress 中处理 Bootstrap Modal 的第一个元素【英文标题】：Ajax only Working on first element of Bootstrap Modal in WordPress 【发布时间】：2017-03-21 15:32:38 【问题描述】：我也在使用 Bootstrap modal 和 Ajax 来提交我的不同产品的预订表格。 Ajax 提交有效，但仅适用于第一个产品。当我尝试提交其他产品的预订表单时，它会重定向到 404 错误页面。我试图调试这个几个小时但没有工作。
这是我的代码：
完整的模态表单
<div class="package-holder">
<div class="row">
<?php global $post; $catquery = new WP_Query( array(
'cat' => 3,
'posts_per_page' => -1,
'orderby' => 'date',
'order' => ASC
)); ?>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<?php $id = get_the_id(); ?>
<div class="col-sm-6 box-wrap">
<div class="row">
<div class="col-sm-7">
<div class="package-details">
<h3><?php echo $post->post_title; ?></h3>
<p><?php echo $post->post_excerpt; ?></p>
<button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-<?php echo $id; ?>">More Details</button>
<a class="btn btn-danger" data-toggle="modal" data-target=".book-form-<?php echo $id; ?>">Book Package</a>
<div class="modal fade bs-example-modal-lg-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4>
</div>
<div class="modal-body">
<p><?php the_content(); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal bform fade book-form-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4>
</div>
<div class="modal-body">
<div class="form-wrap">
<form id="packageForm" method="post" class="clearfix">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="">phone</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="">email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required>
</div>
<div class="form-group col-sm-6">
<label for="pref-date" class="">pref-date</label>
<input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required>
</div>
<input type="hidden" name="package" value="<?php echo $post->post_title; ?>">
<div class="col-sm-12 form-group">
<label for="message" class="">message</label>
<textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea>
</div>
</div>
<div class="col-sm-12 btn-wrap">
<button type="submit" class="btn btn-danger">Submit</button>
<input type="hidden" name="action" value="packageForm" />
<img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" style="display: none;">
</div>
<div id="response"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-5">
<figure class="image-wrap row">
<?php the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
?>
</figure>
</div>
</div>
</div>
<?php endwhile; ?>
<div class="col-sm-12 box-wrap">
<?php global $post; $full_cat = new WP_Query( array(
'cat' => 4,
'posts_per_page' => 1,
'orderby' => 'date',
'order' => ASC
)); ?>
<div class="row">
<?php while($full_cat->have_posts()) : $full_cat->the_post(); ?>
<div class="col-sm-9">
<div class="package-details">
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-<?php echo $id; ?>">More Details</button>
<a class="btn btn-danger" data-toggle="modal" data-target=".book-form-<?php echo $id; ?>">Book Package</a>
<div class="modal fade bs-example-modal-lg-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4>
</div>
<div class="modal-body">
<p><?php the_content(); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade book-form-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Himalayan Rejuvenation Package</h4>
</div>
<div class="modal-body">
<div class="form-wrap">
<form id="FullpackageForm" method="post" class="clearfix">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="">phone</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="">email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required>
</div>
<div class="form-group col-sm-6">
<label for="pref-date" class="">pref-date</label>
<input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required>
</div>
<input type="hidden" name="package" value="<?php echo $post->post_title; ?>">
<div class="col-sm-12 form-group">
<label for="message" class="">message</label>
<textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea>
</div>
</div>
<div class="col-sm-12 btn-wrap">
<button type="submit" class="btn btn-danger">Submit</button>
<input type="hidden" name="action" value="FullpackageForm" />
<img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" style="display: none;">
</div>
<div id="fullresponse"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<figure class="image-wrap row">
<?php the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
?>
</figure>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
从上面的代码来看，ajax形式是
<form id="packageForm" method="post" class="clearfix">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="">phone</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="">email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required>
</div>
<div class="form-group col-sm-6">
<label for="pref-date" class="">pref-date</label>
<input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required>
</div>
<input type="hidden" name="package" value="<?php echo $post->post_title; ?>">
<div class="col-sm-12 form-group">
<label for="message" class="">message</label>
<textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea>
</div>
</div>
<div class="col-sm-12 btn-wrap">
<button type="submit" class="btn btn-danger">Submit</button>
<input type="hidden" name="action" value="packageForm" />
<img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" style="display: none;">
</div>
<div id="response"></div>
</form>
通过functions.php处理Ajax请求
// Ajax for Package Form
wp_enqueue_script('jquery');
function packageForm()
global $wpdb;
$package_name =$_POST['package'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$date = $_POST['pref_date'];
$message = $_POST['message'];
$quote = 'Package Name:'.$package_name."\n\r".'Full Name: '.$name."\n\r".'Phone: '.$phone."\n\r".'Email: '.$email."\n\r".'Available Date: '.$date."\n\r".'Message: '.$message;
$to = 'prabin.b9@gmail.com'; // put your email here
$headers = 'From:Himalayan spa <info@himalayanbodycare.com>' . "\r\n"; // put user's email here or duplicate your email
$subject = 'Request For Spa';
if(wp_mail($to, $subject, $quote, $headers)===FALSE)
echo "Error";
else
echo "<h3> Message Successfully Sent</h3>";
die();
add_action('wp_ajax_packageForm', 'packageForm');
add_action('wp_ajax_nopriv_packageForm', 'packageForm');
最后我的jQuerycustom.js
jQuery(document).ready(function(jQuery)
jQuery('#packageForm').submit(packageSubmit);
function packageSubmit()
var ceccForm = jQuery(this).serialize();
jQuery.ajax(
type:"POST",
url: "wp-admin/admin-ajax.php",
data: ceccForm,
success:function(data)
console.log(data);
jQuery("#response").html(data);
jQuery("#packageForm")[0].reset();
);
return false;
);
jQuery(document).ajaxStart(function()
jQuery('.gif').show();
).ajaxStop(function()
jQuery('.gif').hide();
);
如前所述，Ajax 仅适用于第一个元素 如屏幕截图所示的产品。请帮忙！！
【问题讨论】：
你的表单是循环生成的吗？ 首先确保packageForm id在整个页面中只有一个？ 是的，这是唯一的表单ID。 我可以在你的网站上看到很多 检查@madalin 的回答。它肯定适合你 【参考方案1】：把你所有的id改成class，根据提交表单选择response元素
jQuery(document).ready(function(jQuery)
jQuery('.packageForm').submit(packageSubmit);
function packageSubmit()
var el = jQuery(this);
var ceccForm = el.serialize();
jQuery.ajax(
type:"POST",
url: "wp-admin/admin-ajax.php",
data: ceccForm,
success:function(data)
console.log(data);
el.find(".response").html(data);
el.reset();
);
return false;
);
jQuery(document).ajaxStart(function()
jQuery('.gif').show();
).ajaxStop(function()
jQuery('.gif').hide();
);
【讨论】：
你的意思是我应该首先将我的表单ID更改为类并使用你上面的代码？<form id="packageForm" method="post" class="clearfix packageForm">
谢谢，它成功了。但是为什么ID不起作用？你能解释一下吗？
当您调用 jQuery('#packageForm') 时，ID 是唯一的，您将始终获得第一个元素
哦，我有一个 Ids 和 Classes 的概念，但从不知道 IDs 只会获取第一个元素。非常感谢队友。你拯救了我的一天！
javascript 只会获取具有该 id 的第一个元素以上是关于仅 Ajax 在 WordPress 中处理 Bootstrap Modal 的第一个元素的主要内容，如果未能解决你的问题，请参考以下文章
wordpress仅包含wpdb（wpdb for ajax）