(Rails) Maintaining Javascript functionality in dynamically generated content...?

Question

Hi All,

I'm looking for a quality mechanism to add sorting to dynamically generated tables. My visual setup is very simple. On the left side I have a menu with series of items to select from (charts, graphs, images, tables, etc.). Once an item is clicked, it will show up in the "dynamic-content" div on the right side of the page. That all works fine.

What I'm having issue with is being able to implement certain dynamic features of the loaded content. In this particular case, I have dynamic content that gets generated based on the table that is selected and it appears in the "dynamic-content" div, but the javascript sorting doesn't work. I've tried including it in the "Application Layout" page as well as in the partial that generates the data, but nothing works. However, if I put it in a "static" page all works fine. Any ideas on how to get this working?

FYI I'm using Rails 2.3.4 on OS X, using "sorttable.js", and Safari 4.0.3 & Firefox 3.5.5 to test.

Best.

Answer 1

I would suspect that you need to call sorttable.makeSortable(<table element>); on your dynamically loaded tables. Since you didn't provide any background on how you're switching out your tables, it's hard to provide a solution.

Sorttable.js relies on unobtrusive javascript, the tables to be sortable must be present in the dom when the page is finished loading. Sorttable.js then calls makeSortable on each table that has the "sortable" class. When you insert your new table, you need to do the same.

Answer 2

Any ideas on how to get this working?

Well without more info it'll be hard to come up with a solution. But have you tried looking at the generated page with Firebug to see what's going on? Does your IDE have a Javascript debugger?