How to refresh jQuery jTable on delete?

Md. Arafat Al Mahmud picture Md. Arafat Al Mahmud · Feb 15, 2013 · Viewed 11.4k times · Source

I have used the jTable plugin of jQuery in my CRUD application. My problem is, when I click on the delete icon, a confirmation dialog appears in but after clicking the delete button the dialog doesn't disappear and I have to manually refresh the page to load the reflected table.

Here goes the screenshot of the problem:

enter image description here

Now the dialog doesn't disappear and when I manually click on the close button of the dialog, it shows:

enter image description here

I dont want this behaviour. I want on clicking the delete button the dialog will disappear as well as the table will be reloaded

Here goes the script:

 <div id="StudentTable" style="width: 580px; margin: auto;"></div>

<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#StudentTable').jtable({
            title: 'The Student List',
            actions: {
                listAction: '/jTableTest/StudentList',
                deleteAction: '/jTableTest/DeleteStudent',
                updateAction: '/jTableTest/UpdateStudent',
                createAction: '/jTableTest/CreateStudent'
            },
            fields: {
                id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                name: {
                    title: 'Name',
                    width: '15%'
                },
                birthdate: {
                    title: 'Birth Date',
                    list: true,
                    width: '18%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                }
            }
        });

        //Load person list from server
        $('#StudentTable').jtable('load');

    });

</script>

Here goes the Delete action:

[HttpPost]
        public JsonResult DeleteStudent(int id)
        {
            try
            {
                //_personRepository.DeletePerson(personId);
                student student = db.students.Find(id);
                db.students.Remove(student);
                db.SaveChanges();
                return Json(new { Result = "OK" });
            }
            catch (Exception ex)
            {
                return Json(new { Result = "ERROR", Message = ex.Message });
            }
        }

Answer

Ravi Gadag picture Ravi Gadag · Feb 15, 2013

i don't see where is your delete code in javascript. but i do suggest this

$('#YourJqueryDialogbox').dialog('destroy');  // use this code in delete click event, once the delete action result returned.