Modal displays the first record only

Hi,

I have added a modal in a nested repeat table. The modal is displaying the element correctly. However, it is showing the first record only when I click on a row in the table.

When I click on a row in the nested table, the modal is either populated with the first (always) record or there is no data. There is no indication which row will display data in the modal and which will be blank. (Video 1).

I have the same issue with a table that can be sorted. In this instance, the modal displays the first record as well, however, in this case, the first record changes based on the sorted table data. (Video 2).

  1. Is there any additional step I need when setting up the modals for nested repeats / sortable tables?
  2. Can a modal use a different server connect data than the row server connect data; linked by a Unique ID in both data queries? If it is possible, is there any document available that I can refer to?

Any assistance is greatly appreciated.

The modal is IN the repeat? That sounds bad to me. You don’t want multiple modal elements, you want one modal that dynamically changes it data to match the repeat data. Sounds like a data detail element that is set when clicking in the repeat would be better. But same thing—the data detail goes outside the repeat. :slight_smile:

1 Like

Hi @mebeingken,

Thanks for your response. Sorry, it wasn’t clear from my query. The modal component itself is not in the data repeat.

The modal is correctly setup with a data detail element and then I linked the Dynamic modal to a Cell in the Responsive Table Row element with a Dynamic Click Event. The only reason I have linked it to a cell is to style/show it as link for the user.

I have also noticed that modal displays the data every alternate click and only the first record is displayed.

Phew!

The key of your data detail does not look correct… it should be a simple column name—a column from the data source.

I just checked the key; it’s linked to InvoiceID column from the Data Source query.

<div class="modal-body">
	<div class="container" is="dmx-data-detail" id="data_detail1_nested_invoices" dmx-bind:data="serverconnect4.data.repeat1_customer_invoices_nested[0].query1_customer_invoices"
    key="serverconnect4.data.repeat1_customer_invoices_nested[0].query1_customer_invoices[0].InvoiceID">
		<p>{{modal1_nested_invoices.data_detail1_nested_invoices.data.PartNo}}</p>
	</div>
</div>

The column InvoiceID (under the modal data) is then linked in the Dynamic Event click action.

<td dmx-text="InvoiceNo" dmx-on:click="modal1_nested_invoices.show();modal1_nested_invoices.data_detail1_nested_invoices.select(modal1_nested_invoices.data_detail1_nested_invoices.data.InvoiceID)"
	class="font-weight-bold font-italic" style="text-decoration: underline; color: blue"></td>

If your data source is correct then I think the key is InvoiceID… remove everything else before it

I tried by removing the code before InvoiceID, but it didn’t work either.

Not sure what I’m missing, as it’s the same issue even with modals linked to simple table component and responsive table component. I’m including the webpage link below to try:

https://demo2.suryasoftware.com.au/test.html

Are you sure the data source is correct? As you have it you are saying give me the query1_customer_invoices for the first result from your server repeat.

To track down the issue, look in the dev console. You can first see if results are coming back from the server action, as well as all the data it outputs. Then you can use it (dmx.app.data ) to see if the data detail is getting a record. You can also use dmx.parse to select a record in you data detail.

Have a look at

1 Like

Hi @ben,

The component is working correctly now. Thank you for pointing me in the right direction. I have even been able to add another filter based on the explanation provided in the video :slight_smile:

Thank you @ben and @mebeingken for working through this issue with me and helping me in resolving it. Your help is greatly appreciated :slight_smile:

3 Likes

Thank you @ben for showing a workaround. The ‘Data Detail’ component based implementation as detailed in Wappler Docs " Displaying Record Details with the Data Detail Component" is pointlessly long winded and buggy. I experienced exactly the same bug as listed at the beginning of this thread (detail modal in my case either display the first record or none at all).

I spent hours going through this, re creating each step meticulously, but it simply does not work. Ben’s example is at least logical and fun.

It was also fun to see the provenance of Wappler in Ben’s video. The the UX seems strangely easier in that old version!

1 Like