I try to add a jquerymobile basic popup in UI of a device plugin (led-light), but for some reason it does not what it is supposed to do.
My assumption is, since the mobile-frontend is loading and using jquerymobile 1.4.5 I should be able to use every jquerymobile feature in the UI part on a plugin. But in my case the div, which should popup when the button is clicked, is already shown after rendering and clicking the button hasn’t any effect.
When I try it at a new plain page which just loads jquery and jquerymobile, it works fine!
Does somebody know why it is not working in context of an pimatic plugin?
This is the markup I use:
<script id="led-light-template" type="text/template">
<li data-bind="attr: { id: id }" class="sortable no-header">
<div class="light-container">
<div class="light-label-container">
<label data-bind="text: name, tooltip: $data.labelTooltipHtml" class="device-label"></label>
</div>
<!-- begin of popup markup -->
<div class="light-color-container">
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Color</a>
<div data-role="popup" id="popupBasic">
<p>Should be a popup white the color slider</p>
<input min="1" max="99" step="1" class="light-color">
</div>
</div>
<!-- end of popup markup-->
<div class="light-power-container">
<select data-bind="attr: { value: power }" class="light-power">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</div>
<span data-bind="text: ($data.error() ? $data.error() : '') " class="error"></span>
</li>
</script>
This is how it looks now: