Added Row buttons do not fire.

Added Row buttons do not fire.

thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

I am simply attempting to add rows but I the buttons don't fire in the newly added row(s).
I can make a Jfiddle, but it is quite labor intensive since my solution is quite interweaved with Claris Filemaker. I am hoping it is obvious what I need to fix. (perhaps i need to change a draw or something? or add an invalidation somewhere).

***Note:
This adds the row and gives me the row index which I send to Filemaker (where my data is held) and then use to call back to the dataTable and set the cells of the newly added row with the data from my newly created record in my data set. That is the point of the "var newRow = table.row.add()

I don't want to refresh the whole table as I use a 4 tier group row methodology.

///ADD POSITIONS
$('#table tbody').on('click', 'button#addPos', function() {
var tr = $(this).closest('tr'); // Get the clicked tr
var pos = $('div.dataTables_scrollBody').scrollTop();
var name = $(tr).data('name'); // Get the name of the clicked tr
var newRow = table.row.add({
'id': '',
'member': '',
'membermatch': '',
'call': '',
'wrap': '',
'strike': '',
'callsent': '',
'confirmed': '',
'jobpk': '',
'date': '',
'group': '',
'position': '',
'start': '',
'end': '',
'st': '',
'ot': '',
'dt': '',
'count': '',
'firstday': '',
'positioninfo': ''
}).draw(false);

///START FILEMAKER SCRIPTING

newRowIndex = newRow.index();
$('.dataTables_scrollBody').scrollTop(pos);
var sp = newRowIndex + '~~~' + name;
FileMaker.PerformScriptWithOption('webPort - addPosition', sp, 0);
///END FILEMAKER SCRIPTING

        table.draw();
        $('.dataTables_scrollBody').scrollTop(pos);
} );

Replies

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Guessing this click event is what's not working:

    $('#table tbody').on('click', 'button#addPos', function() {
    

    You are using an id (addPos) for each button. The id attribute is to be unique on the page. See if this example of multiple buttons in a row helps:
    http://live.datatables.net/xijecupo/1/edit

    Kevin

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    Hi there kevin,
    I tried that... doesn't seem to do anything to fix the problem. When adding the row, am I supposed to redefine/render my buttons or something (in the appropriate columns?)

    eg
    'id': '',
    'member': '<button type="button" class="btn btn-default text-grey setter">Set Member</button>',
    'membermatch': '',

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited January 2023

    The example I provided uses columns.defaultContent to render the buttons. Maybe you can update my example or provide a simple test case that just shows what you are doing now. We don't need the filemaker code or anything specific with your data. We just need to understand how you are handling the buttons. Like how are they rendered when the Datatables is initialized?
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Thanks for the test case. There's a lot of code :smile: Please provide the steps show the issue you are trying to solve.

    Kevin

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    There certainly is!

    I guess the easiest way to go about this is to ask: What is the correct way to add a row to a group and keep all of the functionality of the buttons.

    Currently, I am just adding a blank row and then setting the cells and details using a function in Filemaker that lets me "inject" data into the existing table cells by using the rowIndex.

    I am guessing the "defaultContent" will get me there, but a lot of my buttons are conditional based on the content contained within the cellData.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited January 2023

    Currently, I am just adding a blank row and then setting the cells and details using a function in Filemaker that lets me "inject" data into the existing table cells by using the rowIndex.

    If you update the table data without using Datatables APIs you will need to use row().invalidate() for Datatables to refresh its data cache with the updates. Is this the code in the $('#table tbody').on('click', 'button#addPos' event handler?

    newRowIndex = newRow.index();
                $('.dataTables_scrollBody').scrollTop(pos);
    var sp = newRowIndex + '~~~' + name;
                FileMaker.PerformScriptWithOption('webPort - addPosition', sp, 0);
                table.draw();
    

    If so then maybe change table.draw(); to newRow.invalidate().draw();.

    I am guessing the "defaultContent" will get me there, but a lot of my buttons are conditional based on the content contained within the cellData.

    columns.defaultContent is a way to add simple elements. If you need to use the cell data to define the element you can use columns.render. You have a couple examples of this already, for example:

    { targets: [8],  render: function ( data, type, row, meta ) {if (data === '') {return '<button type="button" class="btn btn-default text-grey setter">Set Member</button>'} else {return '<button type="button" class="btn btn-default openemp">' + data  + '</button>'}}},
    

    You have other columns using columns.render. See this rendering data example.

    Sorry, I'm still not following everything in the test case. For example I'm not sure where 'button#addPos' is or even if I need to click the button to see the problem. Hope the above helps.

    Best practice is to use jQuery delegated events with the table buttons. This way they will work when you add the rows or change pages. Similar to my example and this example. Looks like you have bunch of these type of events but I'm not sure what they are for.

    Kevin

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1
    edited January 2023

    Since all of my data is held in Filemaker and then passed it is REALLY hard to show you. Essentially all of my buttons call scripts in the Filemaker software.

    I tried an invalidation as you suggested before reaching out and it doesn't have any affect.

    Instead of trying to make my use case work, can you tell me what you would do to add a row to a group, so that the functionality works in the newly added row? (Perhaps some sort of duplicate row in the group?) I can manipulate the row data from there if I can return the rowIndex.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Since all of my data is held in Filemaker and then passed it is REALLY hard to show you.
    Essentially all of my buttons call scripts in the Filemaker software.

    Can you post the generated HTML of the button? Are you using an onclick() attribute?

    row().invalidate() probably won't fix the click event issue as that is outside of Datatables. I'm not sure what the FileMaker.PerformScriptWithOption call is doing but I suspect row().invalidate() will be needed to update the Datatables dafa cache for sorting and searching.

    Instead of trying to make my use case work, can you tell me what you would do to add a row to a group

    Not sure I understand what you are asking. There really aren't any groups in Datatables. You are using the rowGroup extension which inserts tr elements to separate the groups. These rows are not part of the table data. Are you trying to add these buttons to the row data or the tr generated by RowGroup?

    Sorry, I'm not understanding your solution or code flow to provide much help. Maybe @allan will have a better understanding.

    Kevin

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1
    edited January 2023

    Hi Kevin,

    I am very sorry I am not being clear.
    I have simplified the issue down and eliminate the Filemaker actions.

    https://jsfiddle.net/thegamechangerpro/9b5kwfpx/8/

    If you expand: 01/01/2023
    Then expand: 1. In
    Then Expand: Hand
    Then Expand: 8:00 AM - 5:00 PM
    Click on "Set Member" in row 5 or higher - You can see it will fire a success alert.
    Now click on the hamburger in the 8:00 Am - 5:00 PM row and click "Add Position"
    (I hard coded the data points for a new row.)

    Now click "Set Employee" in the newly added row.
    ...nothing.... No alert.
    If I add .invalidate to the last row.draw(), it simply undoes the row addition.

    I hope that illustrates the issue I am trying to solve.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Thanks, that helps! You need to adjust your selectors for the event handler slightly:

        $('#table tbody tr').on('click', '.setter', function () {
    

    This will apply the click handler to all existing '#table tbody tr'. It won't be applied to new tr's added with row.add(). Change to this so the click event is applied to the tbody:

        $('#table tbody').on('click', 'tr .setter', function () {
    

    Now your event handler will work with new rows and when you go to the next page:
    https://jsfiddle.net/81gjzrxv/

    Kevin

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    AMAZING!!!!

    SO simple. Ugh. Thank you Kevin for you help and patience!!!!!!!

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Glad we finally got it worked out!

    Kevin

Sign In or Register to comment.