Trigger an update/rerender-event from within Javascript?

[cschilling]

Hi,

first of all:
This is a great project! It was exactly what I've searched for. Keep up the great work! :)

The only thing I'm missing is the option to trigger a component-refresh with a javascript call.
But maybe this is already possible and someone could give me a hint?

I'm searching for something like

<div>
  <?php echo Yoyo\yoyo_render('myComponent', ['myData' => 'test123']); ?>
</div>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    setInterval(() => {
      Yoyo.component('myComponent', {'myData': 'test123'}).refresh();
    }, 10000);
  });
</script>

Thanks!

[jreviews]

Thanks. Glad you are enjoying using Yoyo. Since at its core it uses https://htmx.org/ client-side for most Javascript stuff, you have access to the htmx JS API either directly using htmx or via YoyoEngine. You can trigger an event on a component using YoyoEngine.trigger(elt, 'eventName', detail), documented here https://htmx.org/api/#trigger

However, the detail object will not be posted with the request and this is an htmx limitation. One way to get around it would be to first add the data to some custom attribute of your choosing in the component element. Then add an event for htmx:configRequest where you read the attribute value and pass it to the parameters https://htmx.org/events/#htmx:configRequest

And based on your above example, you could use the polling trigger to have the component automatically update itself periodically instead of doing it like that. For example yoyo:on="every 10s". That's what this example does https://app.getyoyo.dev/#polling-component

[cschilling]

Wow, that was fast :)
Thank you, works like a charm!

YoyoEngine.trigger('#' + $('div[yoyo\\:name="myComponent"]').attr('id'), 'refresh');