Reflex not binding to ajax loaded content

[acetinick]

Describe the bug

Reflex not binding to Ajax loaded content that is loaded onto page from Rails UJS remote call.

To Reproduce

• Use remote UJS call to load html onto page
• New html content has data-reflex attribute
• Reflex is not binding

Expected behavior

Reflex should bind to ajax loaded content

Versions

StimulusReflex

• stimulus_reflex 3.1.3

External tools

• Ruby: 2.6.3
• Rails: 6.0.2
• Turbolinks 5.2.1

Browser

• Chrome

[leastbad]

Hey @acetinick! I agree that at face value, this sounds like it should work.

Could you please show us an example of the HTML being loaded by UJS?

Is anything weird showing up in the console log on the server or the client?

The other thing that would really help is a short screencast showing what's happening, including in the developer console.

Note: 3.1.3 is out. I don't think that is what's causing the bug, but it's good to be on the latest.

[acetinick]

Thanks mate for looking into.

This is the outputted HTML after UJS

The same reflex data attribute code outside of my UJS rendered modal, triggers fine.

My generic modal js code is something like this

No messages in console or any errors.

Sorry wrote incorrect version number of stimulus_reflex, I am actually using 3.1.3, updated original ticket.

FYI normal Stimulus controllers that I have defined in the same Ajax loaded modals, work normally.

[leastbad]

If you use your elements inspector to insert a new element into your page that has a data-reflex attribute on it, will it work?

My hunch is that StimulusReflex.initialize() calls setupDeclarativeReflexes for every "load" scenario except ajax:complete. I believe that this is an omission, @hopsoft.

There are a couple of potential workarounds until we can properly address this, hopefully soon.

First, you can probably import SR in your Stimulus controller and force a rescan:

import StimulusReflex from 'stimulus_reflex'
StimulusReflex.setupDeclarativeReflexes()

The other path could be to manually trigger cable-ready:after-morph on document. It's a hack, but it should work.

[acetinick]

Na copying and pasting the select element using inspector doesn't pick it up either after the UJS is called. Works before modal is UJS called. Weird, maybe something conflicting somewhere or as you mentioned i think it might be missing a 'ajax:complete' event listener.

I tried using setupDeclarativeReflexes() but method doesn't exist? Don't think its not exposed. Would be nice to have a public rescan method available.

[leastbad]

Hi again Andrew,

You are 100% correct about the setupDeclarativeReflexes method not being exported. We're looking into the best way to fix this. And it turns out that it's not UJS; any data-reflex attributes that are added dynamically are not being picked up. Believe it or not, you're the first person to notice this and it's because usually if you're adding behaviours after loading, people add data-action attributes. It seems like a silly oversight looking back.

Our plan is to make it call setupDeclarativeReflexes when ajax:complete is triggered by UJS. I agree that it should also be added to the export list.

In the meantine, after your UJS action finishes, manually emit an event like this:

document.dispatchEvent(new Event('cable-ready:after-morph'))

The above should force SR to rescan for new data-reflex attributes. Let me know how it goes!

[acetinick]

Yep the manually emitted event works well for a temporary solution. Thanks heaps.

Great project, excited to see where this is taking Rails with a refreshing approach to avoid SPA.

[leastbad]

I'm so glad you got sorted out, and thanks for the kind words.

If you feel this issue is resolved, let's close it. You should see this working without hacks in the next release.

[leastbad]

I'm pretty sure that this will work for you in the future, @acetinick. @darkrubyist will also be able to call StimulusReflex.setupDeclarativeReflexes() after building content with a template engine.

[BodomBeach]

What is the status on this issue ? I am trying to bind on a HTML element added in ajax, the reflex method is run fine, but my component is not updated. I have tried the following without any success: -document.dispatchEvent(new Event('cable-ready:after-morph')) -StimulusReflex.setupDeclarativeReflexes()

Thanks!

[leastbad]

@BodomBeach hey Nicolas, could you please jump on Discord? So many questions, but this is not the best medium for troubleshooting. https://discord.gg/XveN625