Home/ Questions/Q 8191057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:49:54+00:00

I’m trying to select the following table id – myTable – which is nested

  • 0

I’m trying to select the following table id – myTable – which is nested within a few divs.

Here is a screenshot of the element panel from Chrome:

I’ve tried using the below to no avail:


    $('#myTable').tablesorter();
    $('table#myTable').tablesorter();


    <html lang="en">
      <head>
        <title>Beverly Bonus Dashboard</title>
        <script type="text/javascript" src="../js/jquery/js/jquery-min.js"></script>
        <script type="text/javascript" src="../js/jquery/js/jquery-ui.js"></script>
        <script type="text/javascript" src="../js/jquery/tablesorter/jquery.tablesorter.js"></script>
        <script type="text/javascript" src="../js/central.js"></script>
        <link type="text/css" href="../js/jquery/css/tpurple/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
      </head>
      <? if ($isDelegate == "true") { ?>
      <body>
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Administration</a></li>
          </ul>
          <div id="tabs-1">
            <p>Tab 1 content</p>
          </div>
          <div id="tabs-2">
            <p>Tab 2 content</p>
          </div>
          <div id="tabs-3">
            <button id="button_showUsers" value="<?=$centreID; ?>">Show Users</button>
            <button id="button_addUsers" value="<?=$centreID; ?>">Add Users</button>
            <button id="button_removeUsers">Remove Users</button>       
            <br>
            <div id="users"></div>               
          </div>
        </div>   
      </body>
      <? }//end if isDelegate 
      else {
        echo $fullName .", You do not have permission to view this page";
      }
      ?>  
    </html>

file: central.js 

<pre>
    $(document).ready(function(){
      //Tabs
      $('#tabs').tabs({ spinner: 'Retrieving data...' });
      //Buttons
      $("button").button();     
      //Dialog Box 
      $('#dialog').dialog()
      //error messages
      var $error_1 = $('<div></div>')
        .html("You Do Not Have Permission To View This Site.")
        .dialog({autoOpen: false, title: 'Error'});  
       $('#myTable.tablesorter').tablesorter();

      //site stuff
      $("#button_showUsers").click(function(){
        //get the centre id
        var ID = $(this).val();
        //echo out the delegates based on the centre ID
        $.getJSON("../php/show_delegates.php", {  centreID: ID }, function(data) { 
          $("#users").html("");
          var tbl ="<table id='myTable' class='tablesorter'><thead><tr><td>AGS</td><td>Name</td><td>Centre ID</td><td>Start Date</td><td>End Date</td></tr></thead><tbody>";
          $.each(data.delegates, function(key, val) {
            tbl = tbl 
            +"<tr>"
            +"<td>"+val.ags+"</td>"
            +"<td>"+val.full_name+"</td>"
            +"<td>"+val.centre_id+"</td>" 
            +"<td>"+val.start_date+"</td>"
            +"<td>"+val.end_date+"</td>"
            +"</tr>";
          });//end each
          tbl = tbl
          +"</tbody></table>";   
        $("#users").append(tbl);
        })//end getJSON 
      }); //button_showUsers

      $("#button_addUsers").click(function(){
        //get the centre id
        var ID = $(this).val();  
        $("#users").html("");
        var tbl ="<table id='myTable' class='tablesorter'><thead><tr><td>AGS</td><td>Name</td><td>Centre ID</td><td>Start Date</td><td>End Date</td></tr></thead><tbody>"
        +"<tr>"
        +"<td><input type=text id='ags'maxlength='8'></input></td>"
        +"<td></td>"
        +"<td></td>"
        +"<td></td>"        
        +"<td></td>"    
        +"</tr></tbody></table>";   
        $("#users").append(tbl);
      }); //button_addUsers

      //log user out when window closes
      $(window).unload( function () { 
         $.get("../php/logout.php", function(data) { }); 
         alert("Bye now!");
      });//end unload

        //log user out when window closes
      $(window).load( function () { 
        $.get("../php/user_details.php", function(data) { }); 
         //alert("Bye now!");
      });//end unload


    }); //end (document).ready

Any guidance is appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It should work.

    1. May be you have initiated the call $(‘#myTable’) before the html is loaded. Try to initialize the tablesorter in document.ready()

    2. The html you shown is loaded to the page later using a ajax call. In that case you need to initialize the tablesorter after the ajax call.

    3. Or you got an element with same id some where before in html and thus it fails. Try $(‘#myTable’) in console and check if its returning the correct element.

    • 0