[英]Why will my Ajax call fire twice?
我試圖通過為每個記錄創建一個刪除按鈕來從數據表中刪除記錄。 我的代碼問題是,第一次單擊“刪除”按鈕會刷新頁面並刪除記錄,第二次單擊“ Ajax”按鈕會觸發兩次,但我沒有引導程序模式,無法刪除記錄。 關於如何修復Ajax兩次啟動的任何建議。
的index.php
<body>
<div id="test1234">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>fname</th>
<th>lname</th>
<th>email</th>
<th>username</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
// connect to mongodb
$m = new MongoClient();
$db = $m->local;
$collection = $db->user;
$results = $collection->find();
foreach($results as $res){
$fname = $res['fname'];
$lname = $res['lname'];
$email = $res['email'];
$username = $res['username'];
?>
<tr>
<td><?php echo $fname; ?></td>
<td><?php echo $lname; ?></td>
<td><?php echo $email; ?></td>
<td><?php echo $username; ?></td>
<td><a href="javascript:void(0)" class="btn btn-theme btn-sm idname" data-toggle="modal" data-target="#md-normal" id=<?php echo $email ?> name="email" title="Delete"><i class="fa fa-trash-o"></i></a></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#example').DataTable();
$(document).on('click','.idname', function(){
var data = $(this).serialize();
var aa = $(this).attr('id');
alert('open modal: '+aa);
$.ajax({
type: 'POST',
url: 'modal.php',
async:false,
data: ({name:aa}),
cache: false,
success: function(data){
$('#results').html(data);
}
})
return false;
});
});
</script>
<div id="results"></div>
modal.php
<?php
$email = $_POST['name'];
?>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo $email; ?></h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<form action="deleteUser.php" id="formsubmit1" method="POST">
<input type='hidden' id="email" name="email" value=<?php echo $email ?> >
<input type="submit" id="submit" value="Submit" >
</form>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#myModal').modal('show');
});
</script>
<script>
$(document).ready(function(){
$('#formsubmit1').on('submit',function(){
alert('opened');
//e.preventDefault();
var data = $(this).serialize();
$.ajax({
type: 'POST',
url: 'deleteUser.php',
data: data,
cache: false,
success: function(data){
$('#results3333').html(data);
//alert('res2');
}
})
return false;
});
$('#formsubmit1').on('submit', function(){
//alert('close');
$('#myModal').hide();
$('.modal-backdrop').hide();
});
//refresh page
$('#formsubmit1').on('submit', function(){
alert('refresh');
//e.preventDefault();
var data = $(this).serialize();
$.ajax({
type: 'POST',
url: 'index.php',
data: data,
cache: false,
success: function(data){
$('#test1234').html(data);
alert('ref2');
}
})
return false;
});
});
</script>
userDelete.php
<?php
$email = $_POST['email'];
$m = new MongoClient();
$db = $m->local;
$collection = $db->user;
$results = $collection->remove(array('email' => $email));
?>
正如@Michelem所提到的,在modal.php中,表單ID為formsubmit1的表單有多個作為提交處理程序附加的函數。
$('#formsubmit1').on('submit',function(){
alert('opened');
//e.preventDefault();
var data = $(this).serialize();
//////////////////HERE////////////////////////
$.ajax({
type: 'POST',
url: 'deleteUser.php',
data: data,
cache: false,
success: function(data){
$('#results3333').html(data);
//alert('res2');
}
})
return false;
});
$('#formsubmit1').on('submit', function(){
//alert('close');
$('#myModal').hide();
$('.modal-backdrop').hide();
});
//refresh page
$('#formsubmit1').on('submit', function(){
alert('refresh');
//e.preventDefault();
var data = $(this).serialize();
//////////////////HERE////////////////////////
$.ajax({
type: 'POST',
url: 'index.php',
data: data,
cache: false,
success: function(data){
$('#test1234').html(data);
alert('ref2');
}
})
return false;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.