Editing a table populated by jinja2 using REST API, problem defining idSrc

Muhammad Izzat

Good day everyone,

I'm doing a combination where I populate my table using django jinja2 template and edit its row using REST API. by onclick the table row, it should have get the id and pass it to the ajax url but it display Unable to find row identifier instead. can anyone help me with this. Any help is much appreciated.

here's my code

HTML

<div class="panel-body project_table_styling" style="padding-left: 0px; padding-right: 0px;">
    <table id="assignTable" class="display table table-hover table-responsive" width="100%">
             <thead>
                <tr>
                   <th class="small text-muted text-uppercase"><strong>ID</strong></th>
                   <th class="small text-muted text-uppercase"><strong>Parent</strong></th>
                   <th class="small text-muted text-uppercase"><strong>Task</strong></th>
                   <th class="small text-muted text-uppercase"><strong>Duration</strong></th>
                   <th class="small text-muted text-uppercase"><strong>Artist</strong></th>
                   <th class="small text-muted text-uppercase"><strong>Status</strong></th>
               </tr>
           </thead>
           <tbody>
               <tr>
                  {% for field in assign %}
                  <td>{{field.id}}</td>
                  <td>{{field.parent_project_content.name}}</td>
                  <td>{{field.task}}</td>
                  <td>{{field.duration}}</td>
                  <td>{{field.assign_to}}</td>
                  <td>{{field.status}}</td>
              </tr>
          {% endfor %}
          </tbody>
      </table>
</div>

Javascript :

$(document).ready(function(){
    var task_id = 0
    $('#assignTable').find('td').click(function(){
       task_id = $(this).text();
       console.log(task_id);
    });
    var projectid = 1;
    function get_project_details() {
    var project_detail = $.ajax({
        type: "GET",
        url: '/api/dashboard/project_detail/' + projectid,
        dataType: "application/json",
        async: false
    }).responseText;
    return JSON.parse(project_detail)[0];
}
    var file_status = $.ajax({
        type: "GET",
        url: '/api/dashboard/file_status/?format=json',
        dataType: "application/json",
        async: false
    }).responseText;
    var user_list = get_project_details()['user'];
    var assign_editor = new $.fn.dataTable.Editor({
            ajax: {
                edit: {
                    idSrc: 'id',
                    type: 'PUT',
                    url: '/api/dashboard/workorder_detail/'+ task_id +'/',
                    data: function (assign_data) {
                        var updated_data = {};
                        $.each(assign_data.data, function (id, value) {
                            updated_data['status'] = value['status'].name;
                            updated_data['assign_to'] = value['assign_to'].official_name;
                            updated_data['duration'] = value['duration'];
                        });
                        return updated_data;
                    },
                    success: function () {
                        assign_table.reload();
                    },
                    error: function (err) {
                        alert("Can not edit assigned row : " + JSON.stringify(err, null, 2));
                    }
                },
                remove: {
                    type: 'DELETE',
                    url: '/api/dashboard/workorder_detail/'+ task_id +'/',
                    success: function () {
                        assign_table.reload();
                    }
                }
            },
            table: "#assignTable",
            fields: [
                {
                    label: "Status:",
                    name: "status.name",
                    type: "select",
                    def: "New",
                    options: JSON.parse(file_status)
                },
                {
                    label: "Duration:",
                    name: "duration"
                },
                {
                    label: "Assign:",
                    name: "assign_to.official_name",
                    type: "select",
                    options: user_list
                }
            ],
            i18n: {
                edit: {
                    title: "Edit Assigned Task"
                },
                remove: {
                    title: "Delete Assigned Task",
                    confirm: "You want to Delete Assigned Task ?"
                }
            }
        });
        var assign_table = $('#assignTable').DataTable({
            dom: 'Blfrtip',
            select: true,
            JQueryUI: true,
            "pagingType": "full_numbers",
            buttons: [ {extend: 'edit', editor: assign_editor, formButtons: ['Edit', {label: 'Cancel', fn: function () {this.close();}}], className: ''},
                       {extend: "remove", editor: assign_editor, formButtons: ['Delete', {
                    label: 'Cancel', fn: function () {
                        this.close();
                    }
                }], className: ''},
                       {extend: 'colvis', text: 'Show', className: ''}]
        });
});