Data Detail in Modal

I can’t for the life of me seem to get the data detail function working in a modal window.

I have a repeating group with products and a button next to each one. The button is set to open the modal window and sets the key for the data detail. Inside of the modal, I have the data detail element with the same key set and the data source set to my server action. I am trying to display the selected product name as the modal title and I have chosen this with the dynamic data picker.

When my popup opens, the title is blank! Code below…

<!doctype html>
<html><head>
  <base href="/order/">
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/js/jquery-3.3.1.slim.min.js"></script>
  <link rel="stylesheet" href="/fontawesome4/css/font-awesome.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="/bootstrap/4/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
  <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
  <script src="/dmxAppConnect/dmxSmoothScroll/dmxSmoothScroll.js" defer=""></script>
  <script src="/dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
  <script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>
  </head>
  <body is="dmx-app" id="index">
    <div class="modal" id="modal1" is="dmx-bs4-modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <dmx-data-detail id="data_detail1" dmx-bind:data="getproducts.data.product" key="menucategory[0].menuproduct[0].id"></dmx-data-detail>
          <div class="modal-header">
            <h5 class="modal-title">{{data_detail1.data.name}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <dmx-serverconnect id="getcategories" url="/dmxConnect/api/Order/get-categories.php"></dmx-serverconnect>
    <dmx-serverconnect id="getproducts" url="/dmxConnect/api/Order/get-products.php"></dmx-serverconnect>
    <dmx-smooth-scroll id="scroll1"></dmx-smooth-scroll>
    <section>
      <div class="row header">
        <div class="col text-center align-self-center">
          <a class="navbar-brand logo" href="/">
            <img src="/img/logo.svg" width="220" class="logo">
          </a></div>
      </div>
    </section>
    <section class="order-page-banner">
      <div class="container page-banner-title">
        <h1 class="page-banner-heading">Order NOW</h1>
      </div>
    </section>
    <section>
      <div class="row">
        <div class="col-2 order-links-sidebar">
          <div class="sticky-top">
            <div dmx-repeat:categories="getcategories.data.category">
            <a class="category-link" dmx-text="name" dmx-bind:href="#{{name.slugify()}}">
            </a></div>
          </div>
          </div>
        <div class="col-6 order-menu">
          <div dmx-repeat:menucategory="getcategories.data.category">
            <section dmx-bind:id="{{name.slugify()}}" class="menu-category">
              <h3 class="category-title">{{name}}</h3>
              <p class="category-description">{{description}}</p>
              <div dmx-repeat:menuproduct="getproducts.data.product.where(`category`, id, &quot;==&quot;)">
                <div class="row menu-product">
                <div class="col-9">
                  <img dmx-bind:src="image_url" dmx-show="show_image" dmx-bind:alt="name" class="product-image">
                  <div class="d-flex flex-column h-100 justify-content-center">
                    <p class="product-title">{{name}}</p>
                    <p class="product-description">{{description}}</p>
                  </div>
                </div>
                <div class="col">
                  <div class="d-flex h-100 align-items-center justify-content-around">
                    <p class="product-price">{{getproducts.data.currency[0].symbol}} {{price}}</p>
                    <button class="btn btn-warning" id="setprice" dmx-show="set_price"><i class="fa fa-plus"></i></button>
                    <button class="btn btn-warning" id="variable" dmx-hide="set_price" dmx-on:click="modal1.data_detail1.select(id);modal1.show()"><i class="fa fa-plus"></i></button>
                  </div>
                </div>
                </div></div></section>
          </div>
        </div>
        <div class="col-4 order-cart-sidebar"></div>
      </div>
    </section>
    <footer class="footer d-flex">
      <p class="ml-auto">Terms &amp; Conditions • Privacy Policy</p>
    </footer>
    <script src="/bootstrap/4/js/popper.min.js"></script>
    <script src="/bootstrap/4/js/bootstrap.min.js"></script>
  </body></html>
1 Like

Oh, and yes I have followed the video on the DMX zone site, and also this article.

Hi max_gb

I would love to help but I will be honest, finding your approach really difficult to follow, I can’t even get it to render in wappler design view.
You say you read the tutorials but the teodors walk through is based on a data table

Any reason why you didn’t follow the recommended table approach and went for your “sections” alternative?

I am not actually seeing any container for the data interator construct?

Hi @Hyperbytes

Here is a screenshot of the page

To be honest I only ever use tables for tabular-data. For all other presentation elements I would use div, section, aside, nav etc. As this is a products page/add to cart scenario, I really would prefer not to use a table.

The repeat groups for the categories and their products are working great and when I click the plus button the modal does appear. It’s just the dynamic data is not showing inside of the modal window.

Must I use a container for the data detail function or can this just sit at the top of the modal element?

Interested in this also.

@max_gb

I’m still very new to Wappler, however, I have over the last two weeks learned a lot.

I believe you need to bind to inner text.

Wappler
Clck on the element you want to bind the text too.

image

In the App properties, add inner text under dynamic attributes.

image

You will now see the element text replaced with the value.

image

I hope this is what you where looking for.

Regards,
Ray

Thanks Ray but the modal is still not receiving the data from the repeat. I will explore a few more options in the mean time

@max_gb

Maybe I got it a little mixed up. Try setting it to inner HTML.

I have buttons on my page which are repeated.
image

The below value is being pulled from a server connect which is linked to a repeat for me.
image

Result:
image

Ray.

In this example, I have a Data Source and a Data Detail. The former to show the list of items, the latter to show the detail of the chosen item.

It is important use the Key value from the Data Detail:

I have placed an on-click event on the table row, but this could be done using a button. The actions are:

where the Key is obtained from the repeat region

The Modal can now be populated using the Data Detail as the data source.

Hi @max_gb
I just recreated your page locally.
It seems the expression used for the key in the detail region is wrong. It must be just id:

<dmx-data-detail id="data_detail1" dmx-bind:data="getproducts.data.product" key="id"></dmx-data-detail>

Also, indeed it’s not required to use tables :slight_smile: Tables are used in the tutorials as they are the easiest and fastest way to repeat multiple records as a starting point for the tutorial.
Dynamic tables are just the same as any other repeat region/repeating structure.

Thanks @ben this is what I followed previously.

@Teodor

I updated the key to just ‘id’ but I now see the first product title, no matter which of the repeat buttons I press on. One step further I guess!

Could you please provide a link to your page where i can inspect this?