Giter Club home page Giter Club logo

Comments (10)

leastbad avatar leastbad commented on July 29, 2024 2

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!

from stimulus_reflex.

acetinick avatar acetinick commented on July 29, 2024 1

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.

from stimulus_reflex.

leastbad avatar leastbad commented on July 29, 2024

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.

from stimulus_reflex.

acetinick avatar acetinick commented on July 29, 2024

Thanks mate for looking into.

This is the outputted HTML after UJS

image

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

My generic modal js code is something like this

image

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.

from stimulus_reflex.

leastbad avatar leastbad commented on July 29, 2024

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.

from stimulus_reflex.

acetinick avatar acetinick commented on July 29, 2024

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.

from stimulus_reflex.

leastbad avatar leastbad commented on July 29, 2024

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.

from stimulus_reflex.

leastbad avatar leastbad commented on July 29, 2024

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.

from stimulus_reflex.

BodomBeach avatar BodomBeach commented on July 29, 2024

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!

from stimulus_reflex.

leastbad avatar leastbad commented on July 29, 2024

@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

from stimulus_reflex.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.