Data detail doesn't work

Valentina_Browne · January 10, 2026, 3:15pm

In my app, the data details aren't working, and I don't understand why. Below is the code for a small, non-functional app with only a server connect, a table, and a data detail.

<html>
<head>
    <meta name="ac:base" content="/proparking">
    <base href="/proparking/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
<script src="dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>

</head>

<body is="dmx-app" id="DataDetail">
<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/Estacionamientos/query_estacionamiento.php"></dmx-serverconnect>
<dmx-data-detail id="data_detail1" dmx-bind:data="serverconnect1.data.query" key="id_estacionamiento"></dmx-data-detail>
<div class="container">
    <div class="row">
        <div class="col">
            <table class="table table-striped table-hover table-sm">
                <thead>
                    <tr>
                        <th>Numero</th>
                    </tr>
                </thead>
                <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="serverconnect1.data.query" id="tableRepeat2">
                    <tr dmx-on:click="data_detail1.select(id_estacionamiento)">
                        <td dmx-text="numero"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col">
            <p>{{data_detail1.data.Nombre}}</p>
            <p>DETALLES</p>
        </div>
    </div>
</div>

<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Teodor · January 10, 2026, 3:53pm

Hello,
Do you see any errors in the browser console?

Valentina_Browne · January 10, 2026, 4:24pm

Hello Teodor!

This browser console?

brad · January 10, 2026, 5:30pm

Hi Valentina,

I suspect it is because you have your on click event applied to a row. When you click on a row you are actually clicking on a cell not the actual row.

I would try applying you on click event to a cell or some content within the row.

Valentina_Browne · January 10, 2026, 7:52pm

Thanks Brad, I made the change but it still doesn't work

brad · January 10, 2026, 8:15pm

Hmmm, do you have a live link we can test?

I can see you are using php. Be sure your dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js file is uploaded to your server.

Your code looks like it should work.

Valentina_Browne · January 10, 2026, 8:30pm

guptast · January 10, 2026, 10:59pm

Hi Valentina,

The data binding looks incorrect. It should be like this:

for a non-paged query

<dmx-data-detail id="data_detail1" dmx-bind:data="serverconnect1.data.query" key="id_estacionamiento"></dmx-data-detail>

for a paged query

<dmx-data-detail id="data_detail1" dmx-bind:data="serverconnect1.data.query.data" key="id_estacionamiento"></dmx-data-detail>

Valentina_Browne · January 10, 2026, 11:49pm

Thanks Guptast! It doesn't work in either case.

The data detail is always null (as shown in the attached image).

guptast · January 11, 2026, 12:41am

Did you try with this data binding? You need to include the query that is fetching the data in the binding, e.g. query_estacionamiento

dmx-bind:data="serverconnect1.data.query_estacionamiento"

ben · January 11, 2026, 12:43am

I have an idea that something has been muddled up. As far as I can see, there is nothing wrong with the code that I can see, hence the problem must be with the code that is not visible.

Try creating a new page by following this documentation:

Wappler Documentation - Displaying Record Details with the Data Detail Component

Valentina_Browne · January 11, 2026, 4:35am

Hi Brad, dmxDataTraversal.js file is uploaded ok. Is there anything else missing?

The link for test is: Untitled Document

Valentina_Browne · January 11, 2026, 4:41am

Thanks Ben! I feel like something is missing. The page was created following such documentation.

Teodor · January 11, 2026, 9:12am

I see your page is working fine now, what was the issue?

Valentina_Browne · January 11, 2026, 1:11pm

Hi Teodor! No, it's not working yet. This is a sample page to show that the data detail isn't working (clicking on a row in the table should display the details in the right-hand column).

Teodor · January 11, 2026, 1:17pm

Your sample page works fine for me:

Valentina_Browne · January 11, 2026, 1:23pm

Oh, that's great news! So the problem is my browser!
Wappler is wonderful, and their support is even better. Thanks!

Teodor · January 11, 2026, 1:28pm

Try clearing the cache, could be old data cached.

Valentina_Browne · January 11, 2026, 1:31pm

Yes, that's what I did and it worked