Search code examples
jqueryhtmlhtml-tabletablesorter

How to select table id within a div or two?

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.

Solution

  • 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.