Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7

    Hide/Show table rows


    The most basic of my issue is, if I assign a class to a row, then define in CSS display: none; it does not work. If instead of class, I do style="display: none;" it works just fine. The goal is half my list is expired items. During list build, if item is expired, I was aiming to add class="void" to those rows, and have them hidden by default at page load. A checkbox was then to be offered that, when checked/unchecked, would toggle the list of expired items. I've tried a handful of thing from other sites that seemed to work for them, even this one on jsFiddle, but it doesn't work for me.
    Here's my current/most recent attempt...

    Javascript:
    Code:
    $(document).ready(function() {    
      $("#togglevoid").change(function () {
        $(".void").toggle();
      });
    })
    HTML:
    Code:
    // The checkbox
    <INPUT type="checkbox" name="togglevoid" value="View Void Prospective Contracts" id="togglevoid" />
    
    // A row to toggle
    <TR class="highlightable" href="?loc=serv&action=viewp&id=80" class="void" style="display: none;"><TD>...</TD><TD>...</TD></TR>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    I did notice the 2 class items, n combined them into a single note...

    class="highlightable void"

    Still same issue...
    Last edited by Triple_Nothing; August 19th, 2013 at 10:36 AM.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    In JavaScript many things only check the declarations in the style attributes. To check all of the styles applied to an element, you have to do things a bit differently. (jQuery makes it much easier.) Also IE implemented the change event on checkboxes and radio buttons differently from other browsers, so it's better to use the click event for consistency.
    Code:
    $(document).ready(function() {
      $("#togglevoid").click(function () {
        $(".void").each(function(){
          if($(this).is(":visible")) $(this).hide();
          else $(this).show();
        });
      });
    })
    However, in this case I would probably do this:
    Code:
    $(document).ready(function() {
      $("#togglevoid").click(function () {
        if(this.checked) $(".void").show();
        else $(".void").hide();
      });
    })
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    Well, I've tried every item below independantly. Tried them with and without including the style= tag in the tr. No luck. Anything I'm overlooking? Usually my huge issues I spend a day or two on end up being a space, or something embarrassingly basic. Heh.

    Code:
    function togglevoid() {
      if( document.getElementByClassName("void").style.display=='none' ){
        document.getElementByClassName("void").style.display = 'table-row';
      }else{
        document.getElementByClassName("void").style.display = 'none';
      }
    }
    $(document).ready(function() {    
      $("#togglevoid").change(function () {
        $(".void").toggle();
      });
    })
    $(document).ready(function() {
      $("#togglevoid").click(function () {
        if(this.checked) $(".void").show();
        else $(".void").hide();
      });
    })
    $(document).ready(function() {
      $("#togglevoid").click(function () {
        $(".void").each(function(){
          if($(this).is(":visible")) $(this).hide();
          else $(this).show();
        });
      });
    })
    I noticed I originally missed the 's' after Element when changed from Id to Class. This still dun work.

    Code:
    function togglevoid() {
      if( document.getElementsByClassName("void").style.display=='none' ){
        document.getElementsByClassName("void").style.display = 'table-row';
      }else{
        document.getElementsByClassName("void").style.display = 'none';
      }
    }
    Code:
    <INPUT type="checkbox" onClick="togglevoid()" id="void" />
    
    // With and without the style attribute
    <TR class="void" style="display: none;" href="?loc=serv&action=viewp&id=53"><TD>Muse Marketing</TD><TD>932-149</TD><TD class="prospective">lburger</TD><TD class="prospective">Central Care</TD><TD class="prospective">Void</TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD></TR>
    Last edited by Triple_Nothing; August 18th, 2013 at 02:52 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Nothing is working? Which browsers are you testing in? Did you remember to load jQuery before that code?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    Yep. Even tossed more my current attempt in above response. Before all my other JS that is successfully working, I have:
    Code:
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    I don't know why I missed it earlier, but the following won't work. getElementsByClassName() returns a NodeList, not a single element. That's part of why jQuery is so handy.
    Code:
    document.getElementsByClassName("void").style.display
    You only answered two of the three questions in my last post.

    The JSFiddle works for me in Firefox 22, IE9, and Safari 5.1, even when I add this:
    Code:
    #hidden {
    display: none;
    }
    I think we need to see a full example page, because all but one of those JS snippets should work.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    Well, this is ALL the javascript present, in case something is perhaps conflicting. All this contains other than my current issue is a calendar offered when a date textbox is selected, getMID to actively build a 2nd drop-down based on choice in first, and make my rows into links.
    Code:
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="includes/sorttable.js"></script>
    <script>
      $(document).ready(function() {
        $(".datepicker").datepicker();
      });
      function getMID(id) {
        $.ajax({
          type: "GET",
          url: "/modules/serv/livecall.php",
          data: "CID=" + id,
          success: function(result){
            $('#MID').html(result);
          }
        });
      };
      $(document).ready(function(){
        $('#table tbody tr').click(function(){
          window.location = $(this).attr('href');
          return false;
        });
      });
      function togglevoid() {
        if( document.getElementsByClassName("void").style.display=='none' ){
          document.getElementsByClassName("void").style.display = 'table-row';
        }else{
          document.getElementsByClassName("void").style.display = 'none';
        }
      }
      //$(document).ready(function() {    
      //  $("#togglevoid").change(function () {
      //    $(".void").toggle();
      //  });
      //})
      //$(document).ready(function() {
      //  $("#togglevoid").click(function () {
      //    if(this.checked) $(".void").show();
      //    else $(".void").hide();
      //  });
      })
      $(document).ready(function() {
        $("#togglevoid").click(function () {
          $(".void").each(function(){
            if($(this).is(":visible")) $(this).hide();
            else $(this).show();
          });
        });
      })
    </script>
    My CSS file is basic with just size, alignments, and:
    Code:
    .highlightable:hover td{
      background-color: lightgray;
    }
    I've been adding 'void' to the class attribute just for javascript's reference to those lines. But, here' the layout for the page:
    Code:
    <TABLE id="heading">
      <TR id="function">
        <TD><INPUT type="button" value="Add New Prospective Contract" onClick="parent.location='?loc=serv&action=add'" /></TD>
        <TD align="right">Logged in as: <?php echo $_SESSION['user']; ?></TD>
        <TD align="right"><INPUT type="button" value=" Close " onClick="parent.location='?loc=main'" /></TD>
      </TR>
      <TR>
        <TD colspan="3"><INPUT type="checkbox" onClick="togglevoid()" id="togglevoid" />View Void Prospective Contracts</TD>
      </TR>
    </TABLE>
    <DIV id="outer">
      <DIV id="inner">
        <TABLE id="table" class="sortable">
          <colgroup>
            <col width="250">
            <col width="70">
            <col width="85">
            <col width="100">
            <col width="70">
            <col width="85">
            <col width="100">
            <col width="70">
            <col width="80">
            <col width="80">
            <col width="70">
          </colgroup>
          <THEAD>
            <TR>
              <TH width="250">Customer</TH>
              <TH width="70">Serial #</TH>
              <TH width="85" class="prospective">Username</TH>
              <TH width="100" class="prospective">Type</TH>
              <TH width="70" class="prospective">Status</TH>
              <TH width="85" class="service">Username</TH>
              <TH width="100" class="service">Type</TH>
              <TH width="70" class="service">Status</TH>
              <TH width="80" class="service">Start Date</TH>
              <TH width="80" class="service">End Date</TH>
              <TH width="70" class="service">Days Left</TH>
            </TR>
          </THEAD>
          <TBODY>
            <?php buildListing(); ?>
          </TBODY>
        </TABLE>
      </DIV>
    </DIV>
    And the function for the buildListing:
    PHP Code:
    function buildListing() {
      global 
    $link;
      
    $statement $link->prepare("SELECT m1.`ID`,
           c.`Customer Name`,
           m2.`Serial Number`,
           u1.`Username`,
           t1.`ContractName`,
           u2.`Username`,
           t2.`ContractName`,
           m1.`StartDate`,
           m1.`PStamp`
    FROM servicecontracts AS m1
    LEFT JOIN customers AS c ON c.`ID`=m1.`CID`
    LEFT JOIN machines AS m2 ON m2.`ID`=m1.`MID`
    LEFT JOIN userpass AS u1 ON u1.`ID`=m1.`PUID`
    LEFT JOIN servicecontracttype AS t1 ON t1.`ID`=m1.`PTID`
    LEFT JOIN userpass AS u2 ON u2.`ID`=m1.`CUID`
    LEFT JOIN servicecontracttype AS t2 ON t2.`ID`=m1.`CTID`
    ORDER BY m1.`ID` DESC;"
    );
      
    $statement->execute();
      
    $statement->bind_result($col1,$col2,$col3,$col4,$col5,$col6,$col7,$col8,$col9);
      
    $current = new DateTime();
      while (
    $statement->fetch()) {
        if(isset(
    $col8)) {
          
    $start DateTime::createFromFormat('Y-m-d'$col8);
          
    $end DateTime::createFromFormat('Y-m-d'$col8);
          
    $end->add(new DateInterval('P1Y'));
          
    $remain $current->diff($end);
          if(
    $end $current) { $count "0"; } elseif($current $start) { $remain $start->diff($end); $count $remain->format('%a'); } else { $count $remain->format('%a'); }
          
    $end->sub(new DateInterval('P1D'));
          echo 
    '                            <TR class="highlightable visible" style="display: table-row;" href="?loc=serv&action=viewa&id=' $col1 '"><TD>' $col2 '</TD><TD>' $col3 '</TD><TD class="prospective">' $col4 '</TD><TD class="prospective">' $col5 '</TD><TD class="prospective">Purchased</TD><TD class="service">' $col6 '</TD><TD class="service">' $col7 '</TD><TD class="service">' . ($current $start "Queued..." : ($start <= $current && $current <= $end "Active" "Expired")) . '</TD><TD class="service">' . ($start $end $start->format('m/d/y') : "") . '</TD><TD class="service">' . ($start $end $end->format('m/d/y') : "") . '</TD><TD class="service">' $count '</TD></TR>' "\n";
        } else {
          
    $PStamp DateTime::createFromFormat('Y-m-d H:i:s'$col9);
          
    $PVoid DateTime::createFromFormat('Y-m-d H:i:s'$col9);
          
    $PVoid->add(new DateInterval('P60D'));
          
    $remain $current->diff($PVoid);
          
    $PStatus = ($remain->format('%a') < 60 "Pending" "Void");
          
    $hidden = ($PStatus == "Void" 'void" style="display: none;"' 'visible" style="display: table-row;"');
          echo 
    '                            <TR class="highlightable ' $hidden ' href="?loc=serv&action=viewp&id=' $col1 '"><TD>' $col2 '</TD><TD>' $col3 '</TD><TD class="prospective">' $col4 '</TD><TD class="prospective">' $col5 '</TD><TD class="prospective">' $PStatus '</TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD><TD class="service"></TD></TR>' "\n";
        }
      }
      
    $statement->close();

    Sorry my rows are so long...

    Complete files...
    Main Page
    Functions
    CSS File
    Last edited by Triple_Nothing; August 19th, 2013 at 11:13 AM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    And now just noticed that like outta nowhere, this stopped making my rows into functional links. Not sure when I lost this ability...
    Code:
    $(document).ready(function(){
      $('#table tbody tr').click(function(){
        window.location = $(this).attr('href');
        return false;
      });
    });
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    You need to find the JS error console in one of the browsers you're testing in and see what errors are being generated. The one that I see just by looking at your code is that the line just below the commented out ones should be commented out too. That's most likely why the click handlers aren't working.

    What editor are you using? Does it support JS syntax highlighting in a PHP file?

    Why are you loading two different versions of jQuery and from different third-parties?

    Why are you using the style attribute to set "display:table-row" on <tr> elements?

    And for a third time, which browsers are you testing in?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    Ok. Lets see if I can finally answer all ur ?'s...

    I commented out that line I missed to clear up that error.

    I use PSPad. Whether I use HTML Multihighliter, or JavaScript, colors just remain 2 colors, black & bronze.

    I am extremely weak in JavaScript, so most items were from things I've found on the net, so as far as including items, that is what was provided per the example that day. I even removed 1 already to find the multiple loads are different, but not sure exactly if the ajax one and the code one were the same.

    As per the style= setting table-row, a couple show/hide examples used the table-row in the 'show' part and none in the 'hide'. *shrugz*

    I am testing in IE9. Totally forgot about the developer console, since I'm used to PHP n just tossing my errors on-screen... ^_^

    And my current error is below w/ its reference. Char # may be wrong since I removed indentation. N just guessing... Ur gonna say this is prolly because of the scripts I've loaded...

    SCRIPT438: Object doesn't support property or method 'datepicker'
    ?loc=serv, line 33 character 27

    Code:
    $(document).ready(function() {
      $("#datepicker").datepicker();
    });
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    You really should test in multiple browsers. Some give more helpful error messages than IE does. I don't see a reason why the datepicker call would cause an error unless you accidentally removed jQuery UI.

    Ah. PSPad is great, but it's not very good at doing syntax highlighting for JS when the JS code is embedded in another file. I recommend editing it in a separate file and then copy it back when done or better yet, just keep it in a JS file in the first place.

    As per the style= setting table-row, a couple show/hide examples used the table-row in the 'show' part and none in the 'hide'. *shrugz*
    That's the default value for that property for <tr> elements (except in IE7 and older). You don't need to set it unless you're overriding another value.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    Well, I figured that as default, but seemed to need it when changing back from 'none'.

    As far as including the foreign js files, is it recommended to stay with version the example offered me, or looking for latest version of something? i.e. It appears I've 3 jQuery scripts. Are these really similar items? Just at different locations? N I should just go grab latest one?
    Last edited by Triple_Nothing; August 19th, 2013 at 03:24 PM.
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    697
    Rep Power
    7
    Well, changed:
    Code:
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="includes/sorttable.js"></script>
    <script>
      $(document).ready(function() {
        $("#datepicker").datepicker();
      });
      function getMID(id) {
        $.ajax({
          type: "GET",
          url: "/modules/serv/livecall.php",
          data: "CID=" + id,
    into:
    Code:
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="includes/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="includes/sorttable.js"></script>
    <script>
      function getMID(id) {
        $.ajax({
          type: "GET",
          url: "/modules/serv/livecall.php",
          data: "CID=" + id,
    and now things seem to work so far, cept the fact I've lost my calendar for my date input. Any recommendations/suggestions on this?

    EDIT: Ah, I seem jQuery UI is its own thing. If I download that, do I reall need to include everything I get?
    Last edited by Triple_Nothing; August 19th, 2013 at 03:49 PM.
  28. #15
  29. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,958
    Rep Power
    4035
    Add the script tags for the jquery ui library back in (using the approiate version) and then add back in your script to initialize the date picker.

    Unless you need jquery 2.0, I'd just fall back to 1.9.1 since that seems to be what is recommended with the latest version of jqueryui.

    Code:
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#datepicker").datepicker();
      });
    </script>
    Recycle your old CD's, don't just trash them



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo