Lightbox behaviour on appeded or cloned content

Question

i'd really use some help please!

I'm working in Joomla's backend. As you probably know Joomla uses Mootools by default and it's default SqueezeBox lightbox. I'm trying to built a module and inside it i'm building a custom field where i'm adding appeded or cloned rows. For this i have used Jquery DynoTable.js plugin.

The problem is that inside each row there is a link which is calling a modal lightbox iframe. When i Add New Row the new rows can't open the lightbox.

window.addEvent('domready', function() {
SqueezeBox.initialize({});
SqueezeBox.assign($$('a.modal'), {
    parse: 'rel'
});

});

Unfortunately i can't change this script it's inside Joomla's core and don't want to touch it.

I'm guessing that's because the already set trigger is on domReady and applies only to the already existing Dom. For this i tried to add a fallback 'trigger' to the DynoTable script which is calling the Squeezebox lightbox to apply again:

onRowAdd: function(){
SqueezeBox.assign($$("a.modal"), {parse: "rel"}); 

},

This works (will open the lightbox) however the already set modal links (from the loaded rows) will open 2,3,4 etc. iframes in that modal depending on how many new rows are added. So basically the fresh rows will open a normal lightbox while the old ones will open multiple iframes in that lightbox.

Hope i explained well.. Thank you very much guys!!

Answer 1

Try to change your assign selector to something like this:

onRowAdd: function(){
   // YOURDYNTABLE_ID has to be a valid selector to specify the dynoTable, can 
   // be an ID or class of the table, or an parent element containing the table
   // with tr:last-child you only select the last row (the one you just added).
   SqueezeBox.assign($$("YOURDYNTABLE_ID tr:last-child a.modal"), {parse: "rel"}); 
}