ajax.reload第二次不工作

时间:2017-05-23 09:35:09

标签: javascript jquery ajax asp.net-mvc

我在mu MVC应用程序中使用数据表,我想每次通过模型弹出窗口编辑任何记录时刷新我的表。

它仅适用于一个repord,当我第二次打开模型弹出窗口来编辑它没有的相同/其他记录时。

请帮忙,这是我的代码。

    <div class="tablecontainer">
    <table id="schoolsTable" class="table table-bordered table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th>
                    Status
                </th>
                <th>
                    Code
                </th>
                <th>
                    Name
                </th>
                <th>
                    Address
                </th>
                <th>
                    Actions
                </th>

            </tr>
        </thead>
    </table>
</div>
    <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css">
@section Scripts{
    <script src="~/Content/datatables/datatables.min.js"></script>
    <script src="assets/lib/jquery/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.6/js/jquery.tablesorter.min.js"></script>


    <script>
        $(document).ready(function () {
           var oTable = $('#schoolsTable').DataTable({
                "ajax": {
                    "url": "/School/viewschool",
                    "type": "Get",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Mas_SchoolStatusID", "autowidth": true },
                    { "data": "SchoolCode", "autowidth": true },
                    { "data": "SchoolName", "autowidth": true },
                    { "data": "SchoolAddress", "autowidth": true },
                    {
                        "data": "Mas_SchoolID", "width": "50px", "render": function (data) {
                            return '<a class="popup" href=/School/Edit/' + data +'>Edit</a>';
                        }
                    }
                ]
            });

            $('.tablecontainer').on('click', 'a.popup', function (e) {
                e.preventDefault();
                OpenPopup($(this).attr('href'))
            })

            function OpenPopup(pageUrl)
            {
                var $pageContent = $('<div/>');
                $pageContent.load(pageUrl);
                $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                        .html($pageContent)
                        .dialog({
                            dragable: false,
                            autoOpen: false,
                            resizeable: false,
                            model: true,
                            title: 'Popup Dialog',
                            height: 550,
                            width: 600,
                            close: function () {                                
                                $dialog.dialog('distroy').remove();
                            }

                        })                

                $('.popupWindow').on('submit', '#popupForm', function (e) {
                    var url = $('#popupForm')[0].action;
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $('#popupForm').serialize(),
                        success: function (data) {
                            if (data.status) {
                                oTable.ajax.reload();                          
                                $dialog.dialog('close');                              

                            }
                        }

                    })
                    e.preventDefault();
                })

                $dialog.dialog('open');
            }

        });
    </script>
    }

1 个答案:

答案 0 :(得分:0)

我在破坏中以破坏性的方式拼错了。

close: function () {                                
                   $dialog.dialog('distroy').remove();
                   }

应该是:

close: function () {                                
                   $dialog.dialog('destroy').remove();
                   }