how to close a add new record popup wndow in jquery jtable on saving in mvc?

Question

I have used the jTable plugin of jQuery in my CRUD application. My problem is, when I click on the Add New Record, a confirmation dialog appears in but after filling the details and clicking the Save button the dialog doesn't disappear, but the data is added while i refresh the Jtable..how i can close the popup window?

my View contains

$(document).ready(function () {

    $('#StudentTableContainer').jtable({
        title: 'Employee List',
        paging: true, //Enable paging
        sorting: true, //Enable sorting
        defaultSorting: 'Name ASC',
        //openChildAsAccordion: true, //Enable this line to show child tabes as accordion style
        actions: {
            listAction: '@Url.Action("Details")',
            deleteAction: '@Url.Action("Delete")',
            updateAction: '@Url.Action("Update")',
            createAction: '@Url.Action("Create")'


        },
        recordAdded: function (event, data) {
            $('#StudentTableContainer').jtable('reload');
        },
        fields: {
          UserId: {
                key: true,
                create: false,
                edit: false,
                list: false
            },
            FirstName: {
                title: 'FirstName',
                width: '10%'
            },
          LastName: {
               title: 'LastName',
                width: '10%'
          },
          EMail: {
              title:'EMail',
                width: '10%'
          },
          Address: {
              title: 'Address',
                width: '10%'
          },
          PhoneNo: {
              title:'PhoneNo',
                width: '10%'
          },
          Company: {
              title:'Company',
              width:'10%'
          },
          Designation: {
              title:'Designation',
              width:'10%'
          }
      }
  });

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

and my controller has Create method contains

[HttpPost] public JsonResult Create(UserList userList) {

        try
        {
            userRepository.InsertUser(userList);
            return Json(new { Result = "OK" });

        }



        catch (Exception exception)
        {
            return Json(new { Result = "ERROR", Message = exception.Message });
        }
    }

Answer 1

The jtable expects the inserted data in the return json.

something like

{"Result":"OK","Record":[{"UserId":"169","FirstName":"Attic","LastName":"Server","EMail":"[email protected]","Address":"root","PhoneNo":"12121212","Company":"pass","Designation":"Manager"}]}

you can install Firebug

and Check if you getting this error jTable ERROR: Server must return the created Record object.

Answer 2

I think I had the same issue as you. When trying to add a new record "loading data" .gif never dissapear even when Json message is receive. Two possible solutions that worked for me:

(The bad one) In jtable.js => search for _reloadTable function and comment line self._showBusy(self.options.messages.loadingMessage, self.options.loadingAnimationDelay);

(The good one) Try to use the last version of JTable. I'm testing it now, and the gif never appears and everything works perfectly

Answer 3

You must to return the added record to the json response.

I don't know for other languages, but for PHP it looks like:

$json['Result'] = "OK";
$json['Record'] = $lastInsertedRecord; // query the last insert id from db
print json_encode($json);

Answer 4

Record must be an object, not array of objects. you must check json response from browser.

{"Result":"OK","Record":[{"id":"2","item_id":"6","marked_number":"MN567","p_model":"MDL","p_number":"PNUM","claimed_defects":"CLDEF"}]}

It must be this:

{"Result":"OK","Record":{"id":"2","item_id":"6","marked_number":"MN567","p_model":"MDL","p_number":"PNUM","claimed_defects":"CLDEF"}}

Plus another issue, I was dealing with this problem for a few days and here it is solved in ONE letter (Record vs. Records)