Replies

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023

  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
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023

  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': '',
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023 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
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023

  Here's a fiddle I created.
  https://jsfiddle.net/thegamechangerpro/9b5kwfpx/
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023

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

  Kevin
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023

  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.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023 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
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023 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.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  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.

  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
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023 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.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023

  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
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023

  AMAZING!!!!

  SO simple. Ugh. Thank you Kevin for you help and patience!!!!!!!
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023

  Glad we finally got it worked out!

  Kevin