Feature #26651
open
Support component re-mounting on partials from AJAX
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.
Updated by Ondřej Pražák about 5 years ago
- Blocks Bug #26645: Ansible roles switcher not mounted after form partial re-render added
Updated by The Foreman Bot about 5 years ago
- Status changed from New to Ready For Testing
- Pull request https://github.com/theforeman/foreman/pull/6699 added
Updated by Ondřej Ezr about 5 years 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?
Updated by Ondřej Pražák about 5 years 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
Updated by Ondřej Ezr about 5 years 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.
Updated by Ondřej Ezr about 5 years ago
- Related to Feature #26735: Mount react components from web components added