Dialogues are empty with data-featherlight-persist="shared"

[Coreusa]

I've set up an example page here: http://jsfiddle.net/073yvv75/

If you click "Buy something"-button first, then close the window and click "Buy something else" afterwards, nothing is shown. I believe this is a bug.

[ooksanen]

Persist doesn't seem to work properly with data attributes (see #208). You should bind featherlight to your (multiple) links like this: $('.multiple-links-to-same-lightbox').featherlight($('#lightbox-to-open'), {persist: 'shared'});

[ryancwalsh]

@Sobient I agree with you that there is a bug.

And it's not just with the data attributes. This problem exists with $.featherlight.defaults.persist = 'shared'; too.

I don't know why issue 208 was closed without a fix.

@marcandre any thoughts? Thanks so much for your help!

[ryancwalsh]

@Sobient I seemed to be able to find a work-around for your problem here: http://jsfiddle.net/073yvv75/19/

But on my own site, the work-around isn't working. I'm not sure why. This has been driving me crazy for weeks.

[ryancwalsh]

I finally figured out a hack that seems to fix the problem I've been experiencing.

    $.each($('[data-featherlight]:not(:first)'), function (k, v) {
        $(v).off('click').on('click', function (e) {//hack until https://github.com/noelboss/featherlight/issues/229#issuecomment-287567526 is solved
            e.preventDefault();
            e.stopPropagation();
            $('[data-featherlight]').first().trigger('click');
        });
    });

[marcandre]

It's a bit tricky.

At least right now, there's a difference between binding two buttons individually vs together. For 'shared' to work, they need to be bound together. autoBind binds separately. So don't use that and do the binding yourself. See here

[mattwalk79]

My colleague and I needed to do this with multiple buttons AND multple lightboxes, so we expanded on the above example using classes to act like the data-featherlight attribute. See here: http://jsfiddle.net/ev64pcom/1/ The javascript looks for all elements with a class that begins with 'data-featherlight' (eg 'data-featherlight-lightbox-xx'), grabs the 'lightbox-xx' part and passes it to featherlight as the lightbox id.