Why doesn't editor's edit modal/pop up not get the field values in its row.

dt_user

Good night, I have this baffling problem that I have been trying to fix since this morning.
I used this ( https://editor.datatables.net/examples/simple/inTableControls.html) site as my example when creating the create and edit links. I changed these links to icons. The edit modal/pop up comes up but it has no data in the fields. Can someone please let me know where I am going wrong?

Thank you.
Code below

script.js
var editor;
$(document).ready( function() {
  //editor initialization

  //In Editor use idSrc to tell it where to get the row id,
  //and in DataTables use rowId.

  editor = new $.fn.dataTable.Editor( {
    "ajax": "task.php",
    "table": "#task_table",
    "idSrc": "id",
    "fields": [ {
            "label": "Start Time/Date:",
            "name": "start"
          }, {
            "label": "End Time/Date:",
            "name": "end"
          }, {
            "label": "Task Name:",
            "name": "taskname"
          }, {
            "type": "select",
            "label": "Status:",
            "name": "status",
            "options": [
              {"label": "Select a Status", "value": ''},
              {"label": "In-Progress", "value": 'In-Progress'},
              {"label": "Completed", "value": 'Completed'}
            ]
          }, {
            "label": "Hours Worked:",
            "name": "hoursworked"
          }, {
            "type": "textarea",
            "label": "Details",
            "name": "details"
          }, {
            "type": "select",
            "label": " Level of Difficulty",
            "name": "lvl",
            "options": [
              {"label": "Select a Level of Difficulty", "value": ''},
              {"label": "High", "value": 'H'},
              {"label": "Medium", "value": 'M'},
              {"label": "Low", "value": 'L'}
            ]
          }, {
            "type": "textarea",
            "label": "Comments",
            "name": "comments"
          }

    ]

  } );//editor end

  //New Record
  $('i.fas.fa-plus').on('click', function (e) {
     e.preventDefault();

    editor.create( {
      "title": 'Create New Record',
      "buttons": 'Create'
    } );

   } );

  //Edit Record
  $('#info').on('click', "i.fa.fa-pencil-square", function (e) {
    e.preventDefault();

    editor.edit( $(this).closest('tr'), {
      "title": 'Edit Record',
      "buttons": 'Update'
    } );
 } );

});//(document) end

function tab_clicked(fname,lname){
  $(this).css("background-color", "yellow");
  $('#create').show();
  var fname = fname;
  var lname = lname;
  $.ajax({
    type: 'POST',
    url: 'task.php',
    data: {
      'send':1,
      'fname':fname,
      'lname':lname,
    },
    dataType: 'json',
    success:function(response){
      console.log(response);
      var output = " ";
      var child = " ";
      $.each(response, function(i,v)  {
        console.log(v);
        id = v['sch_id'];
        start = v['StartTD'];
        end = v['EndTD'];
        taskn = v['TaskName'];
        status = v['Status'];
        hoursworked = v['HoursWorked'];
        details = v['Details'];
        lvl = v['LevelofDifficulty'];
        comments = v['Comments'];

        output += "<tr id='"+id+"'>" + "<td class= \"details-control\"></td>" + "<td>" + start + "</td>" + "<td>" + end + "</td>"  + "<td>" + taskn + "</td>" + "<td>" + status + "</td>" + "<td>" + hoursworked + "</td>" + "<td></td>" + "</tr>";

        child += '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                    '<tr>'+
                        '<td>Details:</td>'+
                        '<td>'+details+'</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td>Level:</td>'+
                        '<td>'+lvl+'</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td>Comments:</td>'+
                        '<td>'+comments+'</td>'+
                    '</tr>'+
                '</table>';

      });
      console.log(output);
      console.log(child);
      $('#info').html(output);
      $('#task_table').show();
      var table = $('#task_table').DataTable({
        "rowId": "id",
        "columns": [
          {
              "className": 'details-control',
              "orderable": false,
              "data": null,
              "defaultContent": ''
            },
            {"data": "StartTime/Date"},
            {"data": "EndTime/Date"},
            {"data": "TaskName"},
            {"data": "Status"},
            {"data": "Hours Worked"},
            {
              "data": null,
              "className": "dt-body-center",
              "defaultContent": '<i class="fa fa-pencil-square"></i>'

            }
          ],
          "order": [[1,'asc']],
          "select": true
      });

      // Add event listener for opening and closing details
      $('#task_table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        console.log(tr);
        var row = table.row( tr );
        console.log(row);

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            //Open this row
            //row.data())
            row.child( child ).show();
            tr.addClass('shown');
        }
    });
    //checks row id
    $('#task_table tbody').on( 'click', 'tr', function () {
    var id = table.row( this ).id();

    alert( 'Clicked row id '+id );
} );

  }//success() end

});//ajax end

}//tab_clicked() end

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

dt_user

I apologize for the way my question looks. This is my first time posting a question on this forum.

colin

Hi @dt_user ,

I just tried it here, using your code, and it's behaving as expected. Could you modify that test case or link to your page, please, so that it demonstrates the issue.

Cheers,

Colin

dt_user

Thank you so much for the example. I got data into the edit fields. I see in your example you link to files with a url similar to this: nightly.datatables.net/css/jquery.dataTables.css". What is nightly? I haven't seen it in any of the datatables tutorials.

tangerine

The nightlies are explained in the docs.
https://datatables.net/download/nightly

dt_user

Hello. Does editor need to have a php file that has sql functions that can connect to the database or does editor just need the database connection in the config.php file?

colin

Hi @dt_user ,

Both, but the SQL functions for most standard cases come as is in the distribution, all you need to do is plumb in your database connection settings into lib/config.php. It would be worth scanning this page here as it goes over this,

Cheers,

Colin

dt_user

Thank you colin. To get the create and edit buttons to work I needed to take the lib/config file out of the Editor-PHP-1.9.0 folder.

dt_user

So I just realized that when editor edits a record in datatables it is only shown there and not the database. After doing some research I found local table editing which means editor doesn't have an ajax option.
Solution: I have a php script that converts the data from the database to json. I will save this json data to an array in javascript and use it as the ajax. This should let editor send the modifications to the database.
Please let me know if I am on the right track.

oh I also have this error: An error occurred while connecting to the database 'Timesheet'. The error reported by the server was: SQLSTATE[HY000] [2002] No such file or directory.

So I am hoping this will also be fixed.

colin

So I just realized that when editor edits a record in datatables it is only shown there and not the database.

No, Editor updates the record in the database.

One big problem here, is that you're posting multiple threads at the same time, so it's hard to understand what you're current issue. There were three from you this morning. If you are experiencing problems still, can we consolidate on your thread here.

Cheers,

Colin