Frames inside Ajax content


I have the case:

  1. The content is initially on the page and contains form. This form is submitted and using frames render Dialog.
  2. This content can be replaced by Ajax (not turbo/frame/string) - this is because legacy
  3. After replace the form does not work. I supposed that there is some solution to reinitialize listeners on this form, but I hevent find any good yet.

Meyby some of you know how to reinitialize Trubo after load content (after loading this content there is a good event that I can use to reinitialize Turbo).

Could you say a little more about “the form doesn’t work”? In what way does it fail after content has been updated through Ajax?


It seems to not connected turbo events because it sends normal request, not turbo fetch.

What part of the form are you replacing through Ajax? Is it a single field inside the form? Or is it the form tag itself?


The whole form from <form> to </form>

Wow, works when <form/> tag is outside the ajax content. This is possible solution, but it would be fine to know the couse :slight_smile:

When Turbo loads the form page the first time (from a navigation click) it becomes aware of the form as a JavaScript object and registers a handler to it. That handler would be removed or orphaned by the entire form tag being replaced, and unless you had Turbo load that replacement form (which you aren’t) then it would lose the plot like this.

If you aren’t going all-in on Turbo yet, I recommend you replace individual elements within the form, and not the outer form element itself. The way that the form interceptor is written, it appears that it should have a higher chance of working that way.


1 Like