我正在尝试将woocommerce产品字段提交到购物车而不刷新页面。所以我使用jquery serialize()将表单发布到购物车。问题是
如果单击“添加到购物车”按钮，则从第2页开始刷新页面。如果字段为空，则提交产品或显示错误。
以下是代码：
<div id="wh_table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-12">
<table id="wh_table" class="table table-hover dataTable no-footer" role="grid" aria-describedby="wh_table_info" style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr role="row">
<th></th>
<th>PRODUCT</th>
<th>Message Box</th>
<th>PRICE</th>
<th>Product Total Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="product-178 variations_form odd" data-role="product" role="row">
<form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=178" class="cart" method="post" enctype="multipart/form-data"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/1471481461.png" class="attachment-wh_catalog size-wh_catalog wp-post-image" alt="Jewelry Keys" srcset="https://localhost/testsite/wp-content/uploads/2016/10/1471481461.png 500w, https://localhost/testsite/wp-content/uploads/2016/10/1471481461-100x76.png 100w, https://localhost/testsite/wp-content/uploads/2016/10/1471481461-350x266.png 350w" sizes="(max-width: 500px) 100vw, 500px" width="500" height="380">
</td>
<td class="title">
<h3>Gothic Key</h3>
<b>Silver</b>
</td>
<td class="note">
<label>Front</label><input class="msg-note wh-input" name="_message_front" value="" maxlength="15" placeholder="Up to 15 Letters or Numbers">
<label>Back</label><input class="msg-note wh-input" name="_message_back" value="" maxlength="15" placeholder="Up to 15 Letters or Numbers">
</td>
<td class="wh-price">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>2,500.00</span>
</td>
<td class="quantity-field">
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" placeholder="Type Your Keyway " type="number">
</div>
</td>
<td class="button">
<input name="add-to-cart" value="178" type="hidden">
<input name="product_id" value="178" id="product_id" type="hidden">
<input value="1" id="product_quantity" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary button alt ajax_add_to_cart add_to_cart_button product_type_simple"><span class="glyphicon glyphicon-tag"></span> ADD TO CART</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="dataTables_info" id="wh_table_info" role="status" aria-live="polite">Showing page 1 of 6</div>
</div>
<div class="col-sm-7">
<div class="dataTables_paginate paging_full_numbers" id="wh_table_paginate">
<ul class="pagination">
<li class="paginate_button first disabled" id="wh_table_first"><a href="#" aria-controls="wh_table" data-dt-idx="0" tabindex="0">«</a></li>
<li class="paginate_button previous disabled" id="wh_table_previous"><a href="#" aria-controls="wh_table" data-dt-idx="1" tabindex="0">‹</a></li>
<li class="paginate_button active"><a href="#" aria-controls="wh_table" data-dt-idx="2" tabindex="0">1</a></li>
<li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="3" tabindex="0">2</a></li>
<li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="4" tabindex="0">3</a></li>
<li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="5" tabindex="0">4</a></li>
<li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="6" tabindex="0">5</a></li>
<li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="7" tabindex="0">6</a></li>
<li class="paginate_button next" id="wh_table_next"><a href="#" aria-controls="wh_table" data-dt-idx="8" tabindex="0">›</a></li>
<li class="paginate_button last" id="wh_table_last"><a href="#" aria-controls="wh_table" data-dt-idx="9" tabindex="0">»</a></li>
</ul>
</div>
</div>
</div>
</div>
在functions.php中
function enqueue_scripts_styles_init() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/test.js', array('jquery'), 1.0 );
//wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl
}
add_action('init', 'enqueue_scripts_styles_init');
在test.js
jQuery(document).ready(function($) {
$( 'form' ).on( 'submit', function( evt ) {
evt.preventDefault();
$theForm = $(this).closest('form');
//var $inputs = $theForm.find('input');
//var serializedData = $inputs.serialize();
url = $theForm.attr('action');
// send xhr request
$.ajax({
type: $theForm.attr('method'),
url: $theForm.attr('action'),
data: $theForm.serialize(),
success: function(data) {
//console.log('Yay! Form sent.');
//console.log(data);
console.log( $theForm.serialize() );
}
});
// prevent submitting again
return false;
});
});
我目前正在使用 jquery插件dataTables 进行AJAX基础分页，并在表格行中显示产品。
这是成功的控制台登录：
// input with text filled
_message_front=abc&_message_back=def&quantity=2&add-to-cart=178&product_id=178
// input without text filled. No error message thrown.
_message_front=&_message_back=&quantity=1&add-to-cart=178&product_id=178
答案 0 :(得分：0)
好的，我找到了解决方案。将它发布在这里以防万一它可以帮助任何人。
似乎数据表插件只能序列化它最初看到的<div id='canvas'>
</div>
<div id="tools">
<button id="zoom-in">
+
</button>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>个节点。因此，当我转到下一页时，节点仍保持隐藏状态。因此序列化不起作用。
由于遗留代码，dataTables插件代码无法正常工作。我使用的tr与DataTable不兼容。
fnGetNodes()您可以阅读有关dataTable vs DataTable Here.的更多信息 这是来自官方forum
/*
// DataTable = row().node() // newSchool after 1.10
// dataTable = fnGetNodes() // oldSchool
var table = $('#example').DataTable();
table
.rows( '.ready' )
.nodes()
.to$() // Convert to a jQuery object
.removeClass( 'ready' );
);
*/
答案 1 :(得分：0)
如果您只是使用它，它将解决您的问题。
$("#TableID").on("submit", "#FormID", function(e){
// Your Ajax Codes Here
}
这是一种非常易于使用的数据表方法。