Project

General

Profile

Feature #26651

Support component re-mounting on partials from AJAX

Added by Ondřej Pražák about 1 year ago. Updated about 1 year ago.

Status:
Ready For Testing
Priority:
Normal
Category:
-
Target version:
-
Difficulty:
Triaged:
No
Bugzilla link:
Fixed in Releases:
Found in Releases:

Description

We use mount_react_component helper that inserts script, which takes care of mounting React components. The problem is that script tags do not evaluate when inserted into DOM as innerHTML. When AJAX calls to retrieve partial which is inserted into page, the script does not run and react component is not mounted.

We should make sure that react components do not disappear when they are in a partial that is rendered via AJAX.


Related issues

Related to Foreman - Feature #26735: Mount react components from web componentsClosed
Blocks Ansible - Bug #26645: Ansible roles switcher not mounted after form partial re-renderClosed

History

#1 Updated by Ondřej Pražák about 1 year ago

  • Blocks Bug #26645: Ansible roles switcher not mounted after form partial re-render added

#2 Updated by The Foreman Bot about 1 year ago

  • Status changed from New to Ready For Testing
  • Pull request https://github.com/theforeman/foreman/pull/6699 added

#3 Updated by Ondřej Ezr about 1 year ago

This is not a default behaviour of ajax :thinking: by default it is running the scripts it is adding ($ajax.load), so I believe it is problem in just specific corner cases, where we are setting the content wrong manualy.
Could you please share where we are hitting the problem?

#4 Updated by Ondřej Pražák about 1 year ago

Ondřej Ezr wrote:

This is not a default behaviour of ajax :thinking: by default it is running the scripts it is adding ($ajax.load), so I believe it is problem in just specific corner cases, where we are setting the content wrong manualy.
Could you please share where we are hitting the problem?

We use $.ajax and then insert the content: https://github.com/theforeman/foreman/blob/develop/app/assets/javascripts/host_edit.js#L314
This is causing problems for Ansible roles switcher, see https://projects.theforeman.org/issues/26645 and https://community.theforeman.org/t/unable-to-assigne-ansible-roles-to-host-hostgroups/13634/13

#5 Updated by Ondřej Ezr about 1 year ago

Well, that is a bit different problem than you are describing and I am thinking if this is the right aproach...

I believe the problem lays in mounting component on elements which are not part of DOM just yet.
React tries to mount the funcionality on jQuery virtual DOM object, but looking for it in dom.
Do not find it, gives up and than the element is injected into dom by jquery.

So I believe running the script once more is not really nice solution, though as a workaround works.

#6 Updated by Ondřej Ezr about 1 year ago

  • Related to Feature #26735: Mount react components from web components added

Also available in: Atom PDF