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, "==")">
<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 & 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>