[英]Repetitive data on click event and submit form with ajax
我在用ajax發布后有關於重復數據的問題。 我有沒有id僅數據屬性的按鈕。 我使用dataTable庫。 單擊后,我用窗體調用模態。 表單中有兩個字段:輸入文本和隱藏輸入。 單擊事件時,我將值填充到隱藏的控件中。 第一次提交后,一切都很好。 但是在第二次單擊和第二次提交后,使用相同的模式,控制台中出現了如下雙重數據:
Object {isSuccess: true, carId: 13550, message: "Post success"}
Object {isSuccess: true, carId: 13550, message: "Post success"}
我認為這個問題對某些人來說很簡單,但我不能獨自解決。 這段代碼來自HTML DOM:
<table id="carsInventory">
<tr>
<td>
<button type="button" data-toggle="modal" data-target="#inv-bid-modal" data-car-id="13551" data-car-brand="MAZDA" data-car-model="Mazda6" class="btn btn-large btn-bids">Bid</button>
<td>
</tr>
<tr>
<td>
<button type="button" data-toggle="modal" data-target="#inv-bid-modal" data-car-id="13550" data-car-brand="CADILLAC" data-car-model="CTS" class="btn btn-large btn-bids">Bid</button>
<td>
</tr>
</table>
<div class="modal fade" id="inv-bid-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-toggle="bidModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<form id="inv-bid-form" method="post">
<div class="modal-body">
<p class="intro-bid">
Your Maximum Bid:
</p>
<div class="input-group">
<span class="input-group-addon">$ </span>
<input id="userBid" type="text" value="" class="form-control" name="userBid" required pattern="\d+(\.\d{2})?">
<span class="input-group-addon">.00</span>
</div>
<i class="intro-bid">
($100 USD Bid Increments)
</i>
<input id="invCarId" type="hidden" value="" name="invCarId" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-bid" value="Bid Now">
</div>
</form>
</div>
</div>
</div>
Javascript(底部加載)
$(document.body).on('click', "[data-target=#inv-bid-modal]", function(e)
{
var that = $(this)
var carBrand = that.attr('data-car-brand'),
carModel = that.attr('data-car-model'),
title = $("#inv-bid-modal .modal-title"),
car = that.attr('data-car-id');
submitBidForm( e, car );
title.html('');
title.append(carBrand + ' ' + carModel);
});
function submitBidForm(data, id)
{
var bidForm = $("#inv-bid-form"),
bidModal = $("#inv-bid-modal"),
objectBtn = $(data.target),
carId = id,
bidField = $('#userBid'),
carIdField = $('#invCarId');;
carIdField.val(carId);
bidForm.submit(function(event)
{
event && event.preventDefault();
var that = $(this),
bid = bidField.val();
if( bid < 100 )
{
setBsMessages('warning', 'Incorect increment!');
bidField.val('');
carIdField.val('');
}else{
var request = $.ajax({
url : '/car/rest/setBid/',
method : 'POST',
async : false,
data : that.serialize(),
success : function(result,textStatus, jqXHR)
{
if(result.isSuccess)
{
bidModal.modal('hide').fadeOut('fast');
objectBtn.attr('disabled',true);
bidField.val('');
carIdField.val('');
}else{
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Invalid bid!');
}
},
error: function (result, textStatus, errorThrown) {
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Error! ' + result);
}
});
return false;
}
});
}
function setBsMessages(type, message)
{
var messages = $("#inv-bid-messages");
messages.append('<div id="bs-alert" class="alert alert-' + type + ' fade in">' + message+ '</div>');
$('#bs-alert').delay(2000).fadeOut("slow", function () { messages.remove(); });
}
的PHP
public function setBid() {
header('Content-type: text/json');
header('Content-type: application/json');
$result = false;
if ( $_POST['invCarId'] ) {
$this->load->model('bid');
$bidModel = new bid();
$carId = (int) $_POST['invCarId'];
$bidValue = (int) $_POST['userBid'];
if ( $bidModel->isExistBid($carId))
{
$data = [
'isSuccess' => 'exist',
'carId' => $carId,
'message' => 'Bid exist'
];
echo json_decode($data);
exit;
}
if ( $bidModel->addBid( $carId, $this->current_user->id, $bidValue ) ) {
$result = true;
} else {
$result = false;
}
$data = [
'isSuccess' => (bool) $result,
'carId' => $carId,
'message' => 'Post success'
];
echo json_encode($data);
exit;
} else {
echo json_decode($result);
exit;
}
}
提前致謝。
我發現的解決方案是:
function submitBidForm(data, id)
{
var bidForm = $("#inv-bid-form"),
bidModal = $("#inv-bid-modal"),
objectBtn = $(data.target),
carId = id,
bidField = $('#userBid'),
carIdField = $('#invCarId');;
carIdField.val(carId);
var status = true; // Set default status
bidForm.submit(function(event)
{
event && event.preventDefault();
var that = $(this),
bid = bidField.val();
if( bid == undefined || parseInt(bid) < 100 )
{
setBsMessages('warning', 'Incorect increment!');
bidField.val('');
carIdField.val('');
return false;
}
if(status) {
status = false; // Set status false to preventing second post
var request = $.ajax({
url : '/car/rest/setBid/',
method : 'POST',
dataType : 'json',
cache : 'false',
data : that.serialize(),
success : function(result,textStatus, jqXHR)
{
if(result.isSuccess)
{
bidModal.modal('hide').fadeOut('fast');
objectBtn.attr('disabled',true);
bidField.val('');
carIdField.val('');
bidForm.reset();
var status = true; // Status true if post pass
return false;
}else{
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Invalid bid!');
}
},
error: function (result, textStatus, errorThrown) {
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Error! ' + result);
}
});
return false;
}
});
}
我知道解決方案不是最好的,但它可行。 我希望有人能給出更明智的答案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.