locked
Unable to close the pop up form after submission RRS feed

  • Question

  • User-1140746197 posted

    Hi, all,

    I have the following script to show a webgrid of all field values of "Leave Type". I can edit or delete the field value stored in the database table "OptLeaveType" through this page. the page can show the values extracted from the database. However, when I clicked "Delete". it can pop up a dialog for me to confirm. However, after I confirm the deletion by clicking the "Delete" button, it cannot close the dialog automatically and reload the webgrid. But actually the record can be deleted after clicking the "Delete" button, but the pop up window was not closed.

    I am not sure which part has issue and I would like to seek your advice on it. Thanks for your help.

    Index.cshtml

    <script>
        $(document).ready(function () {
            var oTable = $('#OptLeaveTypeTable').DataTable({
                "ajax": {
                    "url": '/OptLeaveType/GetLeaveTypes',
                    "type": "get",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "LeaveTypeId", "autoWidth": true },
                    { "data": "LeaveType", "autoWidth": true },
                    { "data": "Status", "autoWidth": true },
                    {
                        "data": "LeaveTypeId", "width": "50px", "render": function (data) {
                            return '<a class="popup" href="/OptLeaveType/Create/' + data + '">Edit</a>';
                        }
                    },
                    {
                        "data": "LeaveTypeId", "width": "50px", "render": function (data) {
                            return '<a class="popup" href="/OptLeaveType/Delete/' + data + '">Delete</a>';
                        }
                    }
                ]
            })
            $('.tablecontainer').on('click', 'a.popup', function (e) {
                e.preventDefault();
                OpenPopup($(this).attr('href'));
            })
            function OpenPopup(pageUrl) {
                var $pageContent = $('<div/>');
                $pageContent.load(pageUrl, function () {
                    $('#popupForm', $pageContent).removeData('validator');
                    $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
                    $.validator.unobtrusive.parse('form');
    
                });
    
                $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                    .html($pageContent)
                    .dialog({
                        draggable: false,
                        autoOpen: false,
                        resizable: false,
                        model: true,
                        title: 'Popup Dialog',
                        height: 550,
                        width: 600,
                        close: function () {
                            $dialog.dialog('destroy').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) {
                                $dialog.dialog('close');
                                oTable.ajax.reload();
                            }
                        }
                    })
    
                    e.preventDefault();
                })
                $dialog.dialog('open');
            }
        })
    </script>

    Delete.cshtml

    @model theManager.Models.OptLeaveType
    
    @{
        ViewData["Title"] = "Delete";
        Layout = null;
    }
    
    <h2>Delete Leave Type</h2>
    
    @using (Html.BeginForm("Delete", "OptLeaveType", FormMethod.Post, new { id = "popupForm" }))
    {
        @Html.HiddenFor(a => a.LeaveTypeId)
        <div class="form-group">
            <label>Leave Type ID</label>
            <p>@Model.LeaveTypeId</p>
        </div>
    
        <div class="form-group">
            <label>Leave Type</label>
            <p>@Model.LeaveType</p>
        </div>
    
        <div class="form-group">
            <label>Status</label>
            <p>@Model.Status</p>
        </div>
    
        <div>
            <input type="submit" value="Delete" />
        </div>
    }

    OptLeaveTypeController.cs

    [HttpGet]
    public IActionResult Delete(int id)
    {
    
            var v = _context.OptLeaveType.Where(a => a.LeaveTypeId == id).FirstOrDefault();
            if (v != null)
            {
                return View(v);
            }
            else
            {
                return NotFound();
            }
    
    }
    
    [HttpPost]
    [ActionName("Delete")]
    public IActionResult DeleteLeaveType(int id)
    {
        bool status = false;
        var v = _context.OptLeaveType.Where(a => a.LeaveTypeId == id).FirstOrDefault();
        if (v != null)
        {
            _context.OptLeaveType.Remove(v);
            _context.SaveChanges();
            status = true;
        }
    
        return new JsonResult (new { Data = new { status = status } });
    }

    Sunday, April 19, 2020 11:36 AM

Answers

  • User665608656 posted

    Hi,  thtang

    You cannot close the pop-up window because you got the wrong way to get the “status”, so you did not execute "$ dialog.dialog ('close');"

    You can modify your code like this.

    if (data.Data.status) {
       $dialog.dialog('close');
        oTable.ajax.reload();
    }

    Or

    return new JsonResult(new { status = status });

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 20, 2020 5:11 AM

All replies

  • User-474980206 posted

    Your response json looks like

    {
        "Data":{
             "status": true
        }
    }

    So the test in needs to be

       If (data.Data.status))

    Sunday, April 19, 2020 4:44 PM
  • User665608656 posted

    Hi,  thtang

    You cannot close the pop-up window because you got the wrong way to get the “status”, so you did not execute "$ dialog.dialog ('close');"

    You can modify your code like this.

    if (data.Data.status) {
       $dialog.dialog('close');
        oTable.ajax.reload();
    }

    Or

    return new JsonResult(new { status = status });

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 20, 2020 5:11 AM