如何使用ajax将更新推送到表单中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用ajax将更新推送到表单中相关的知识,希望对你有一定的参考价值。
我在编辑任何行时都拥有表格,更新将显示在表格中,但编辑表单本身无法更新。
截图中的问题
1-我的行默认值
2-编辑表格
3-输入更新值
4-更新显示在表中
5-更新后编辑表格仍显示旧数据问题部分
[我知道我可以使用
location.reload();
之类的选项,但对我而言,使用ajax的目的是根本不重新加载页面。
代码
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $("#data_table2").DataTable();
$('#data_table2').on('click', '.groupUpdate', function(e){
var row = $(this).closest('tr');
e.preventDefault();
var ordID = $(this).data('id');
var name = $(this).closest("form").find("#nameUpdate").val();
var description = $(this).closest("form").find("#descriptionUpdate").val();
$.ajax({
type:'PUT',
url:'{{url('dashboard/banks')}}/'+ordID,
data:{
name:name,
desc:description
},
success:function(data){
table.cell( row, 0 ).data( data.data.id ); // return new values to table
table.cell( row, 1 ).data( data.data.name ); // return new values to table
table.cell( row, 2 ).data( data.data.desc ); // return new values to table
document.getElementById("updateForm").reset();
$(".message").append('<div class="alert alert-success fade in">'+data.success+'</div>').hide(4000); // show success message to user
$('.editModal').modal('hide'); // close the edit modal
}
});
});
});
还有想法如何以编辑形式显示更新吗?
答案
重置表单以恢复默认值。因此,提交成功后总是会看到初始值。请尝试仅删除表单上的重置操作。
以上是关于如何使用ajax将更新推送到表单中的主要内容,如果未能解决你的问题,请参考以下文章