Child (nested) component not trigger anything #520

gumish · 2023-03-10T10:54:37Z

gumish
Mar 10, 2023

Could you please give me someone advice why are my nested components inactive?

I tried to duplicate table example from documentation: https://www.django-unicorn.com/docs/child-components/#
I only copied the code, nothing complicated.

They (filter and row components) are rendered well but not interactive. They don't trigger any request. Only the top level component (table) works as expected.

I also tried copy nested files (table, row ...) from your example folder. But it is still the same.

gumish · 2023-03-15T20:21:51Z

gumish
Mar 15, 2023
Author

Should I paste some example code?

3 replies

adamghill Mar 19, 2023
Maintainer

Yeah, the easiest way to troubleshoot is if you make a repo that replicates your issue and post it here. Then I can send PRs or provide help relatively easily. Thanks!

gumish Mar 23, 2023
Author

I have noticed there is no SCRIPT tag for filterx component at the bottom of the html, so no EventListener set on filterx input.

Sorry for plain code copiing.
base.html

{% load static unicorn %}
<html>
<head>
  <title>Unicorn test</title>
  {% unicorn_scripts %}
</head>
<body>
  <main>
    {% csrf_token %}
    <h1>UNICORN</h1>
    {% unicorn 'table' %}
  </main>
</body>
</html>

unicorn/table.html

{% load unicorn %}
<div>
  {% unicorn 'filterx' parent=view %}
  <table>
    <thead>
      <tr>
        <td>Author</td>
        <td>Title</td>
      </tr>
    </thead>
    <tbody>
        {% for book in books %}
            {% unicorn 'row' parent=view book=book key=book.id %}
        {% endfor %}
    </tbody>
  </table>
</div>

filterx.html

<div>
    Filter: <input type="text" unicorn:model="search" /><br />
    Search: "{{ search }}"
</div>

table.py

from ..models import Book
from django_unicorn.components import UnicornView

class TableView(UnicornView):
    books = Book.objects.none()

    def mount(self):
        self.load_table()

    def load_table(self):
        self.books = Book.objects.all()

        for child in self.children:
            if hasattr(child, "is_editing"):
                child.is_editing = False

filterx.py

from django_unicorn.components import UnicornView

class FilterxView(UnicornView):
    search = ""

    def updated_search(self, query):
        print('updated_search')
        self.parent.load_table()

        if query:
            self.parent.books = list(
                filter(lambda f: query.lower() in f.title.lower(), self.parent.books)
            )

gumish Mar 23, 2023
Author

https://github.com/gumish/django_unicorn

System check identified no issues (0 silenced).
March 23, 2023 - 22:18:04
Django version 4.1.7, using settings 'example.settings'
Starting development server at http://0.0.0.0:8080/
Quit the server with CTRL-BREAK.
No module named 'django.contrib.admin.components'
No module named 'django.contrib.auth.components'        
No module named 'django.contrib.contenttypes.components'
No module named 'django.contrib.sessions.components'    
No module named 'django.contrib.messages.components'    
No module named 'django.contrib.staticfiles.components' 
No module named 'django_unicorn.components.table'       
No module named 'django.contrib.admin.components'       
No module named 'django.contrib.auth.components'        
No module named 'django.contrib.contenttypes.components'
No module named 'django.contrib.sessions.components'    
No module named 'django.contrib.messages.components'    
No module named 'django.contrib.staticfiles.components' 
No module named 'django_unicorn.components.filter'      
No module named 'django.contrib.admin.components'       
No module named 'django.contrib.auth.components'
No module named 'django.contrib.contenttypes.components'
No module named 'django.contrib.sessions.components'
No module named 'django.contrib.messages.components'
No module named 'django.contrib.staticfiles.components'
No module named 'django_unicorn.components.row'
Retrieve L3J8Tb2J from constructed views cache
Retrieve L3J8Tb2J:filter from constructed views cache
Retrieve L3J8Tb2J:row:1 from constructed views cache
Retrieve L3J8Tb2J:row:2 from constructed views cache

allmanaj · 2023-04-14T14:56:06Z

allmanaj
Apr 14, 2023

I'm also having a similar issue! Except the issue (not requests made from the child components) is only present when they are conditionally rendered. I have a form which has two routes through it and need to conditionally load one of two components based on a stages variable in my form.py component.

Extract from form.html

    {% if stages.declined %}
        {% unicorn 'declined' parent=view %}
    {% endif %}

    {% if stages.accepted %}
        {% unicorn 'accepted' parent=view %}
    {% endif %}

The components load fine but no events (e.g unicorn:click, unicorn:model) are firing in the child components. I've tested removing the if and all events in both components fire correctly.

Not sure if this is close enough to this issue to warrant being mentioned here but thought it worth bringing up

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Child (nested) component not trigger anything #520

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Child (nested) component not trigger anything #520

Uh oh!

Uh oh!

gumish Mar 10, 2023

Replies: 2 comments · 3 replies

Uh oh!

gumish Mar 15, 2023 Author

Uh oh!

adamghill Mar 19, 2023 Maintainer

Uh oh!

gumish Mar 23, 2023 Author

Uh oh!

Uh oh!

gumish Mar 23, 2023 Author

Uh oh!

allmanaj Apr 14, 2023

gumish
Mar 10, 2023

Replies: 2 comments 3 replies

gumish
Mar 15, 2023
Author

adamghill Mar 19, 2023
Maintainer

gumish Mar 23, 2023
Author

gumish Mar 23, 2023
Author

allmanaj
Apr 14, 2023