Re-initializing actions / event handlers after messing with the DOM?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Hey all, I'm wondering if someone can point me in the right direction as to how to re-initialize event handlers after clobbering the DOM with jQuery.

The reason I ask is because we've run into a use case where we want to sort the rows of a table, but in kind of a weird way. We have a drawer action on each row in an Accounts table, and in each drawer is another table of child objects with dates. We want to sort the Accounts table based on the dates in the drawer tables. So a row which has a drawer with an item that has the date "02-25-2014" would appear before a row which has a drawer with an item that has the date "05-01-2014". Strange, I know.

I know that we could create a custom field on the Account object and push the earliest date on the child object up to that field, but we're trying to solve this with just Skuid/Javascript. In any case, I've run into these problems before so I figured it would be good to try to find an answer. So in lieu of the additional field, I was wondering if there is a way to do one or both of these:
  1. Order the data array of a model in an arbitrary order with Javascript before it gets rendered in any components. It would have to be able to be sorted again after data refreshes.

  2. Obviously DOM elements can be moved around with jQuery but it involves recreating the inner HTML of the table component and destroying the events in the component. So I'm wondering if there's a way to re-initialize the event handlers. If I have to code up a solution that records the event handlers of each row/field prior to moving HTML around, and re-adds the events afterwards, that's fine. I'm just not sure where to look.
Thanks!
Photo of Robert Mruczek

Robert Mruczek

  • 222 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Robert,

Honestly, I might go with the roll-up summary option, but if you really want to, you should be able to accomplish this by following these steps.

1. Find the .nx-skootable DOM element of your table and wrap it in a jQuery object.

ex. var tableDomElement = skuid.$('myAwesomeSelector');

2. Mess with your model's data order

ex. skuid.model.getModel('myAwesomeModel').data.reverse();

3. Tell the table to rerender

ex. tableDomElement.data('component').render();
Photo of Robert Mruczek

Robert Mruczek

  • 222 Points 100 badge 2x thumb
Thanks Ben. That's what I was looking for.