select statement instead for whole document for a subdocument (Tab content)
Hi all
I have a TAB constellation with 3 TABS
2 of the TAB content html documents (Panel, MAP) are containing some equal ids because the same datapoints must be displayed (Manual Operation, Robot Stop)
for actualization of data I'm looking for a selector to select only the document in the active tab and not the whole DOM. Otherwise just the first element with the id will be found in Panel, but not the second in MAP.
- // Map dynamic data
- function MapData(){
- var active = $('#tabs').tabs( "option", "active" );
- if (active == 2) {
- $.ajax({
- type: 'GET',
- url: '/ajax/Map/data',
- async: true,
- dataType: "JSON",
- success: function(obj, textstatus, jqXhr) {
- dictionary = eval("(" + jqXhr.responseText + ")");
- $.each(dictionary, function(id,val) {
- idc = null
- if (document.getElementById(id) !== null) {
- // id read from dictionary, found in document
- if (!id.endsWith("_Ec") && (!id.endsWith("El"))) {
- // change value except empty id types
- document.getElementById(id).innerHTML = val;
- if (id.endsWith("_V")) {
- idc = id.replace("_V","_Cv")
- // new style for value
- val = dictionary[idc]
- }
- }
- else if (id.endsWith("_Ec")) {
- idc = id.replace("_Ec", "_Cc")
- // new style for button
- val = dictionary [idc]
- }
- else if (id.endsWith("_El")){
- idc = id.replace("_El", "_Cl")
- // new style for lamp
- val = dictionary [idc]
- }
- }
- if (idc) {
- // remove old and add new style
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)black(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)red(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)yellow(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)green(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)bggreen(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)bggrey(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)bgred(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)white(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)bgwhite(?!\S)/g , " x" )
- document.getElementById(id).className =
- document.getElementById(id).className.replace
- ( /(?:^|\s)x(?!\S)/g , val )
- }
- });
- },
- error: function (jqXhr, textStatus, errorThrown) {
- }
- });
- }
- }
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Robot</title>
- <meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
- <meta name="description" content="Robot user interface"/>
- <meta name="author" content="Wolfgang Glueck"/>
- <meta name="editor" content="html-editor phase 5"/>
- <link rel="icon" href="../static/images/favicon-16x16.png" type="image/png"/>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" type="text/css"/>
- </head>
- <body>
- <div id="tabs" class="ui-widget ui-widget-header ui-corner-top">
- <ul>
- <li><a href="Panel.html" id="tabPanel" name="tabPanel">Panel</a></li>
- <li><a href="Alarmlist.html" id="tabAlarmlist" name="tabAlarmlist">Alarm List</a></li>
- <li><a href="Map.html" id="tabMap" name="tabMap">Map</a></li>
- </ul>
- </div>
- <script src="../static/js/jquery-1.12.0.min.js" type="text/javascript"></script>
- <script src="../static/js/jquery-ui.min.js" type="text/javascript"></script>
- <script src="../static/js/myScripts.js" type="text/javascript"></script>
- </body>
- </html>
The similar Problem I get in the command direction for e.g. the stop command button, it exists in both TABs (Panel; Map):
- $(document).on("click", '#S_3_Ec', (function(event) {
- console.log("stop click.");
- Send('Panel/S_3_Ec');
- }));
Wolfgang