Trying to get first element working in my existing embedded web site

[salasidis]

I am trying just to get a window to pop up.

 

If I test the code in codepen, it works OK (see code below).

 

If however I enter it into my application (existing jQuery app). All I get are 5 small rectangles, as well as the text and buttons.

 

The window does not open or close. I can see with the dev tools that the code is executed (ie the open and close commands on button or text click pushes in my code).

 

I am thinking there is some interaction with maybe existing elements in my application, but not sure where to look

 

 

HTML

<button type=”button” class=”ui-button ui-corner-all ui-widget” id=”On” onclick=”graphSensor()”>On</button>

<smart-window id=”modalGraphWindow” modal closed label=”Graph”>
<div id=”graphPane”>
<section>
<h3>Graph goes here</h3>
small graph
</section>
</div>
<button type=”button” class=”ui-button ui-corner-all ui-widget” id=”Off” onclick=”unGraphSensor()”>Off</button>
</smart-window>

<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”&gt;

<script src=”https://code.jquery.com/jquery-3.6.0.js&#8221; integrity=”sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=” crossorigin=”anonymous”></script>
<script src=”https://code.jquery.com/ui/1.13.2/jquery-ui.js”></script&gt;
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.elements.js”></script&gt;
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.chart.js”></script&gt;
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.window.js”></script&gt;

 

 

CSS

 

html, body { padding: 10px; }

.smart-window #article {
overflow: auto;
}

@media screen and (max-width: 700px) {
.smart-window {
width: 90% !important;
left: 5% !important;
top: 5px !important;
}
}

 

JS

function graphSensor() {
// pop up a window, and display the 24h graph by default – user can ask for the long term graph

modalGraphWindow.open();
}
function unGraphSensor() {
// pop up a window, and display the 24h graph by default – user can ask for the long term graph
modalGraphWindow.close();
}

 

window.onload = function () {
modalGraphWindow.open();
}

[salasidis]

In addition, when looking at the opened property (via the developer tools in edge), it says it is open (true) when it should be, and  cloased (false) when it should not. Visually it does not change however.

 

[svetoslav_borislavov]

Hi,

The error is probably coming from some interaction with another window element.
A possible solution is on the button click to select all windows and filter the needed by its id.

In the following example, there are two windows but I am filtering the one I do need:
https://codepen.io/svetoslavb04/pen/YzaNgrm

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[shahid imran]

ok

[Stella milos]

kgxdfcvghjklkgfcxdzsxdfcvgbhjnmk,l,cxzxcfghjklcxzxcvbjklkgfcdxcfghjklcxcfvgbn

[Author]

Posts