如何使用ajax将更新推送到表单中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用ajax将更新推送到表单中相关的知识,希望对你有一定的参考价值。

我在编辑任何行时都拥有表格,更新将显示在表格中,但编辑表单本身无法更新。

截图中的问题

1-我的行默认值

one

2-编辑表格

two

3-输入更新值

three

4-更新显示在表中

four

5-更新后编辑表格仍显示旧数据问题部分

five

[我知道我可以使用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将更新推送到表单中的主要内容,如果未能解决你的问题,请参考以下文章

如何使用ajax将数据推送到数组

将数据推送到页面而不定期检查?

如何将验证码推送到生产服务器

Rails simple_form 没有将数据字段推送到数据库

如何将本地项目推送到码云仓库或者GitHub仓库

将更新从 Python 服务器推送到 Web 界面