Variables not updated

[HaRicoVert]

Issue with data update in Django template table

Problem Description

I have a Django view that renders a template with a table of data. I've noticed an unusual behavior when updating the data:

1. When I click on a row of an agent of the table from the dialog .fr-modal-office, the agent data is not updated in the display (it remains as "PIERROR").
2. However, when I click on a row of the table from the div .entity-agents-panel, the agent data is correctly displayed and updated.

Additional Details

• I've verified that the agent data is correctly fetched, as when I use console.log(this.agent), the data is properly updated.
• The issue seems to be specific to the display/rendering of the data, not the data retrieval itself.

Question

Why is there a difference in behavior between the rows of the tables? How can I ensure that the agent data is correctly updated and displayed from the row click onwards?

Relevant Code

Could you please share the relevant parts of your code? This might include:

• The Django view that handles the data and renders the template
• The Django template with the table structure
• Any JavaScript code that handles the row clicks and data updates

Here's a snippet of the main component of my template:

 <script>
        const entityDetailUrl = '{% url 'api-v1:entity-detail' 0 %}';
        const officeDetailUrl = '{% url 'api-v1:office-detail' 0 %}';
        const agentDetailUrl = '{% url 'api-v1:agent-detail' 0 %}';
        const agentListUrl = '{% url 'api-v1:agent-list' %}';

        async function fetchData(url) {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return await response.json();
            } catch (error) {
                console.error('Erreur de requête :', error);
                throw error;
            }
        }

        function alpineInstance() {
            return {
                office: {
                    entity: {},
                    agents: [],
                },
                async showOfficeModal(officeId) {
                    this.office = await fetchData(officeDetailUrl.replace('0', officeId));
                    this.office.entity = await fetchData(entityDetailUrl.replace('0', this.office.entity));
                    this.office.agents = await fetchData(agentListUrl + '?office=' + officeId + '&ordering=last_name');
                    for (const office_agent of this.office.agents) {
                        office_agent.entity = await fetchData(entityDetailUrl.replace('0', office_agent.entity));
                    }
                },
                agent: {
                    'first_name': 'Pierre', // Just a random name to see if the agent was updated
                },
                async showAgentModal(agentId) {
                    this.agent = await fetchData(agentDetailUrl.replace('0', agentId));
                    console.log('URL used to fetch agent data :', agentDetailUrl.replace('0', agentId));
                    dsfr(agentModal).modal.disclose();
                    console.log('this.agent data :', this.agent);
                },
            }
        }
    </script>
    
  <div x-data="alpineInstance()" x-init="$watch('agent', agent => console.log('Agent -> ' + agent.first_name))">
  <dialog id="fr-modal-office">
  ...
<template x-for="agent in office.agents" :key="agent.id">
        <tr @click="showAgentModal(agent.id);">
            <td x-text="agent.first_name"></td>
            <td x-text="agent.last_name"></td>
            <td x-text="agent.entity.name"></td>
        </tr>
    </template>
    </div>
    ...
    <div id="entity-agents-panel">
    ...
    <tbody>
      {% for agent in active_agents %}
          <tr @click="showAgentModal('{{ agent.id }}');">
              <td>{{ agent.office.name }}</td>
              <td>{{ agent.first_name }}</td>
              <td>{{ agent.last_name }}</td>
              <td>{{ agent.entity }}</td>
          </tr>
      {% endfor %}
      </tbody>
      ...
      </div>

A picture of the JS console showing the fetched data :

A picture of the modal showing the fake agent data (that should be the fetched data):

[ekwoka]

There should be no differences.

As I mentioned in Discord, my simplest guess is that the modal thing you're using actually copies the modal elements to somewhere else on the page.

[ekwoka]

It's hard as heck to find the way around that french package, it's architected horribly.

but I think here:

https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/api/modules/stage/stage.js

it does move elements around in the tree.

which likely pulls them out of the alpine context