Frame updating issues in messaging system

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:}) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                        <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 class="text-muted small">{{ conversation.messages|last|slice(0,50) }}...</div>
                        {% endfor %}
            <div class="col-md-9">
                <div id="chat-conversation"></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.

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