select statement instead for whole document for a subdocument (Tab content)

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.

  1. // Map dynamic data
  2. function MapData(){
  3.     var active = $('#tabs').tabs( "option", "active" );
  4.     if  (active == 2) {
  5.         $.ajax({
  6.             type: 'GET',
  7.             url: '/ajax/Map/data',
  8.             async: true,
  9.             dataType: "JSON",
  10.             success: function(obj, textstatus, jqXhr) {
  11.                 dictionary = eval("(" + jqXhr.responseText + ")");
  12.                 $.each(dictionary, function(id,val) {
  13.                     idc = null
  14.                     if (document.getElementById(id) !== null) {
  15.                       // id read from dictionary, found in document
  16.                       if (!id.endsWith("_Ec") && (!id.endsWith("El"))) {
  17.                           // change value except empty id types
  18.                           document.getElementById(id).innerHTML = val;
  19.                           if (id.endsWith("_V")) {
  20.                               idc = id.replace("_V","_Cv")
  21.                               // new style for value
  22.                               val = dictionary[idc]
  23.                           }
  24.                       }
  25.                       else if (id.endsWith("_Ec")) {
  26.                               idc = id.replace("_Ec", "_Cc")
  27.                               // new style for button
  28.                               val = dictionary [idc]
  29.                       }
  30.                       else if (id.endsWith("_El")){
  31.                               idc = id.replace("_El", "_Cl")
  32.                               // new style for lamp
  33.                               val = dictionary [idc]
  34.                       }
  35.                     }
  36.                     if (idc) {
  37.                         // remove old and add new style
  38.                         document.getElementById(id).className =
  39.                         document.getElementById(id).className.replace
  40.                         ( /(?:^|\s)black(?!\S)/g , " x" )

  41.                         document.getElementById(id).className =
  42.                         document.getElementById(id).className.replace
  43.                         ( /(?:^|\s)red(?!\S)/g , " x" )

  44.                         document.getElementById(id).className =
  45.                         document.getElementById(id).className.replace
  46.                         ( /(?:^|\s)yellow(?!\S)/g , " x" )

  47.                         document.getElementById(id).className =
  48.                         document.getElementById(id).className.replace
  49.                         ( /(?:^|\s)green(?!\S)/g , " x" )

  50.                         document.getElementById(id).className =
  51.                         document.getElementById(id).className.replace
  52.                         ( /(?:^|\s)bggreen(?!\S)/g , " x" )

  53.                         document.getElementById(id).className =
  54.                         document.getElementById(id).className.replace
  55.                         ( /(?:^|\s)bggrey(?!\S)/g , " x" )

  56.                         document.getElementById(id).className =
  57.                         document.getElementById(id).className.replace
  58.                         ( /(?:^|\s)bgred(?!\S)/g , " x" )

  59.                         document.getElementById(id).className =
  60.                         document.getElementById(id).className.replace
  61.                         ( /(?:^|\s)white(?!\S)/g , " x" )

  62.                         document.getElementById(id).className =
  63.                         document.getElementById(id).className.replace
  64.                         ( /(?:^|\s)bgwhite(?!\S)/g , " x" )

  65.                         document.getElementById(id).className =
  66.                         document.getElementById(id).className.replace
  67.                         ( /(?:^|\s)x(?!\S)/g , val )
  68.                     }

  69.                 });
  70.             },
  71.             error: function (jqXhr, textStatus, errorThrown) {
  72.             }
  73.         });
  74.     }
  75. }

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  2. <html>
  3. <head>
  4.     <title>Robot</title>
  5.     <meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
  6.     <meta name="description" content="Robot user interface"/>
  7.     <meta name="author" content="Wolfgang Glueck"/>
  8.     <meta name="editor" content="html-editor phase 5"/>
  9.     <link rel="icon" href="../static/images/favicon-16x16.png" type="image/png"/>
  10.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" type="text/css"/>

  11. </head>

  12. <body>
  13.     <div id="tabs" class="ui-widget ui-widget-header ui-corner-top">
  14.         <ul>
  15.             <li><a href="Panel.html" id="tabPanel" name="tabPanel">Panel</a></li>

  16.             <li><a href="Alarmlist.html" id="tabAlarmlist" name="tabAlarmlist">Alarm List</a></li>

  17.             <li><a href="Map.html" id="tabMap" name="tabMap">Map</a></li>
  18.         </ul>
  19.     </div>
  20. <script src="../static/js/jquery-1.12.0.min.js" type="text/javascript"></script>
  21. <script src="../static/js/jquery-ui.min.js" type="text/javascript"></script>
  22. <script src="../static/js/myScripts.js" type="text/javascript"></script>
  23. </body>
  24. </html>
The similar Problem I get in the command direction for e.g. the stop command button, it exists in both TABs (Panel; Map):
  1. $(document).on("click", '#S_3_Ec', (function(event) {
  2.                           console.log("stop click.");
  3.                           Send('Panel/S_3_Ec');
  4.                      }));
Wolfgang