Frame updating issues in messaging system

1

I’m created a messaging system. There is a list of conversations on the left and on click, the messages are displayed on the right.

{# chat/index.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-3">
                    <tubo-frame class="list-group mt-3" id="convo-list" data-turbo-frame="chat-conversation">
                        {% for conversation in conversations %}
                            <a class="list-group-item" href="{{ path('user_conversation', {id: conversation.id}) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="avatars">
                                            {% for user in conversation.users %}
                                                <img alt="{{ user.fullName }}" data-bs-toggle="tooltip"
                                                     data-bs-placement="right" title="{{ user.fullName }}"
                                                     class="avatars__item" src="{{ user.avatar }}" height="45"/>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div class="text-muted small">{{ conversation.messages|last|slice(0,50) }}...</div>
                                </div>
                            </a>
                        {% endfor %}
                    </tubo-frame>
            </div>
            <div class="col-md-9">
                <div id="chat-conversation"></div>
            </div>
        </div>
    </div>
{% endblock %}

However, it’s not working as expected. I’m not sure how to hook the on click event up to update the conversation div with the relevant conversation.

currently it’s reloading the entire page.

2

You would want to make the conversation div into a turbo-frame and then on your link target it to that data-turbo-frame="chat-conversation" this will target the link inside of that frame and load the chat page. Just make sure you have a matching turbo-frame-tag id="chat-conversation" on the chats show page.
Turbo Frame Docs

1 Like