JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Trying to get first element working in my existing embedded web site
- This topic has 4 replies, 4 voices, and was last updated 6 months ago by
Stella milos.
-
AuthorPosts
-
July 15, 2022 at 11:48 pm #103363
salasidis
ParticipantI 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”>
<script src=”https://code.jquery.com/jquery-3.6.0.js” integrity=”sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=” crossorigin=”anonymous”></script>
<script src=”https://code.jquery.com/ui/1.13.2/jquery-ui.js”></script>
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.elements.js”></script>
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.chart.js”></script>
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.window.js”></script>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 graphmodalGraphWindow.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();
}July 16, 2022 at 2:20 am #103365salasidis
ParticipantJuly 18, 2022 at 6:47 am #103371svetoslav_borislavov
ParticipantHi,
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/YzaNgrmBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/July 19, 2022 at 7:46 am #103409shahid imran
ParticipantSeptember 28, 2022 at 7:36 am #103760Stella milos
Participant -
AuthorPosts
- You must be logged in to reply to this topic.