Project

General

Profile

Actions

Feature #26651

open

Support component re-mounting on partials from AJAX

Added by Ondřej Pražák over 5 years ago. Updated over 5 years ago.

Status:
Ready For Testing
Priority:
Normal
Category:
-
Target version:
-
Difficulty:
Triaged:
No
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 2 (0 open2 closed)

Related to Foreman - Feature #26735: Mount react components from web componentsClosedOndřej EzrActions
Blocks Ansible - Bug #26645: Ansible roles switcher not mounted after form partial re-renderClosedOndřej PražákActions
Actions #1

Updated by Ondřej Pražák over 5 years ago

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

Updated by The Foreman Bot over 5 years ago

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

Updated by Ondřej Ezr over 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?

Actions #4

Updated by Ondřej Pražák over 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

Actions #5

Updated by Ondřej Ezr over 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.

Actions #6

Updated by Ondřej Ezr over 5 years ago

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

Also available in: Atom PDF