Responsive table extension and in table controls

INTONE

I have manged to combine these two example:
http://editor.datatables.net/examples/simple/inTableControls.html and
http://editor.datatables.net/examples/simple/responsive.html

All works well except when activate the responsive mode by making the browser width smaller and the green/red click handlers appear, I am not able to edit or remove a record. I am getting an error that points to the line that checks for the nearest "tr".

maybe the code will speak clearer, here:

      // Edit record
     $('#view_clients_details').on('click', 'a.editor_edit', function (e) {
       e.preventDefault();

      editor
        .title( '<h3>Edit entry</h3>' )
        .buttons( { "label": "Update","className":"btn","fn": function () { editor.submit() } } )
        .edit( $(this).closest('tr') );
    } );

     //delete
      $('#view_clients_details').on('click', 'a.editor_remove', function (e) {
      e.preventDefault();

         editor
        .title("<h3>Delete</h3>")
        .message( 'Are you sure you wish to remove this record?' )
        .buttons( { "label": "Delete","className":"btn", "fn": function () { editor.submit() } } )
        .remove( $(this).closest('tr') );
     } );   


    $('#view_clients_details').DataTable( {

    dom: "Tfrtip",
    ajax: {
        url: "../php/clients.php",
        type: "POST"
    },
    serverSide: true,
    columns: [
        { data: "clients.first_name" },
        { data: "clients.last_name" },
        { data: "clients.address_city" },
        { data: "clients.address_state_province_parish" },
        { data: "clients.contact_number_1" },
        { data: "clients.contact_email" },
        {

          data: null,
          defaultContent: '<a href="#" class="editor_edit button blue">Edit</a> <a href="#" class="editor_remove button red">Delete</a>'

        }
    ],
    tableTools: {
        sRowSelect: "os",
        aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor }
        ]
    },

            initComplete: function ( settings, json ) {
            editor.field( 'clients.company_branches_id' ).update( json.company_branches );
     }
    } );

now the error says: Uncaught TypeError: Cannot read property 'clients' of undefined and point to the code that says:

.edit( $(this).closest('tr') );

Is it that when we are in a smaller screen size and the responsive red/green click handlers are attached with additional details dropping down below, the script can't find the closest "tr" with the respective row_id it needs? If so how can this be fixed?

allan

I see - so the problem is when the controls are dropped into the child row is it? You would need an event handler specifically for the child row "link" which would refer to the previous tr element ($(this).closest('tr').prev() for example), since the child row is not the parent row.

Allan

INTONE

I took your advice and fixed it like this:

 //global screen width - place out side on all handlers and listeners for view_clients_details
 var screen_width = $( window ).width();

 //global event listener for screen width - place out side on all handlers and listeners for     view_clients_details

 $( window ).resize(function() {
      screen_width = $( window ).width();
  });

   $('#view_clients_details').on('click', 'a.editor_edit', function (e) {
      e.preventDefault();

       var sele = (screen_width > '877'? $(this).closest('tr'):$(this).closest('tr').prev());        
      editor
        .title( '<h3>Edit entry</h3>' )
        .buttons( { "label": "Update","className":"btn","fn": function () { editor.submit() } } )
        .edit(sele);
    } );


    $('#view_clients_details').on('click', 'a.editor_remove', function (e) {
         e.preventDefault();
         var sele = (screen_width > '877'? $(this).closest('tr'):$(this).closest('tr').prev()) 
         editor
        .title("<h3>Delete</h3>")
        .message( 'Are you sure you wish to remove this record?' )
        .buttons( { "label": "Delete","className":"btn", "fn": function () { editor.submit() } } )
        .remove( sele );
   } ); 

Its not elegant but it works.

INTONE

I discovered a better way to fix this. Looking at width is not good enough and does fail sometimes. so I replaced

    screen_width > '877' 

with

   ($('#some_table_id').hasClass('collapsed') == false