update Jquery Jtable plugin depending on a selected row in another Table

Question

hello I have the following snippet of code. Departments

  <div>Users </div>
  <div id="UserTableContainer"></div>



 <script type="text/javascript">
    var departmentChangeId = 1;


    $(document).ready(function () {


        $('#DepartmentTableContainer').jtable({
            paging: true,
            useBootstrap: true,
            sorting: true,
            selecting: true,
            selectOnRowClick: true,

            title: 'Departments',
            actions: {
                listAction: '/api/Department/GetDepartmentList',
                createAction: '/api/Department/CreateDepartment',
                updateAction: '/api/Department/EditDepartment',
                deleteAction: '/api/Department/DeleteDepartment'
            },
            fields: {
                ID: {
                    key: true,
                    list: false
                },
                TypeId: {
                    title: 'Department Type',
                    options: '/api/Department/GetDepartmentTypeList'
                },
                Label: {
                    title: 'Department'
                },
            },



            //Register to selectionChanged event to hanlde events
            selectionChanged: function () {
                //Get all selected rows
                var $selectedRows = $('#DepartmentTableContainer').jtable('selectedRows');
                departmentChangeId = $selectedRows.data('record').ID;
                //alert(departmentChangeId);
                //

                refresh();
            }
        }).jtable('load');

        $('#UserTableContainer').jtable({
            messages: ArabMessages, //Lozalize
            paging: true,
            useBootstrap: true,
            sorting: true,
            title: 'Employee',
            actions: {
                listAction: '/api/Users/GetEmployee?id=' + departmentChangeId,
                updateAction: '/api/Users/EditEmployee'
            },
            fields: {
                Id: {
                    key: true,
                    list: false
                },
                DepId: {
                    title: ' Department',
                    options: '/api/Department/GetDepartmentTypeList'
                },
                LastName: {
                    title: 'Name'
                },
            }
        });
        $('#UserTableContainer').jtable('load');
    });

and these are the two version I use for the refresh function

first

function refresh() {

       $('#UserTableContainer').jtable('reload');
   }

the second

function refresh() { $.post("/api/Users/GetEmployee", "id=" + departmentChangeId, function (results) { $('#UserTableContainer').jtable('reload'); } , "json");

    }

unfortunately both of them dont work instead of when I use debugging mode I see that the /api/Users/GetEmployee is visited in both case

Answer 1

please try using below code in refresh function

$('#UserTableContainer').jtable('load');