#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    694
    Rep Power
    7

    Loading/Referencing incorrectly?


    I trying to impliment a search/filter to actively filter a table. When I attempt to use it, nothing happens. The item I wish to add is: http://jsfiddle.net/7BUmG/2/ and have included the jquery library as well.

    My page can be viewed at: http://projects.hellzoneinc.com/rolodex

    And the 3 files that build this module: (index.php functions.php rolodex.css)
    Module edited just to run independantly for this.
    PHP Code:
    <HTML>
      <HEAD>
        <link href="rolodex.css" rel="stylesheet" type="text/css">
      </HEAD>
      <BODY>
                          <?php include('functions.php'); ?>
                          Search: <INPUT type="text" id="search" placeholder="Type to search" />
                          <INPUT type="button" value=" Add New " />
                          <INPUT type="button" value=" Close " onClick="parent.location='?loc=main'" />
                          <TABLE id="heading">
                            <TR>
                              <TD>Company</TD>
                              <TD>Name</TD>
                              <TD>Position</TD>
                              <TD>Number</TD>
                              <TD>Type</TD>
                              <TD>E-Mail</TD>
                              <TD>Notes</TD>
                            </TR>
                            <TR>
                              <TD><INPUT type="text" name="company" class="company" /></TD>
                              <TD><INPUT type="text" name="name" class="name" /></TD>
                              <TD><INPUT type="text" name="position" class="position" /></TD>
                              <TD><INPUT type="text" name="number" class="number" /></TD>
                              <TD><INPUT type="text" name="type" class="type" /></TD>
                              <TD><INPUT type="text" name="email" class="email" /></TD>
                              <TD><INPUT type="text" name="notes" class="notes" /></TD>
                            </TR>
                          </TABLE>
                          <DIV id="listing">
                            <TABLE id="table">
                              <TR><TD id="company">1 Comp</TD><TD id="name">Terry</TD><TD id="position">Co-Owner</TD><TD id="number">1-234-277-6513</TD><TD id="type">Business</TD><TD id="email">terry@1comp.com</TD><TD id="note">Cell - 369-364-6878</TD></TR>
                              <TR><TD id="company">1 Comp</TD><TD id="name">Tom</TD><TD id="position">Co-Owner</TD><TD id="number">1-234-277-6513</TD><TD id="type">Business</TD><TD id="email">tom@1comp.com</TD><TD id="note">Cell - 369-742-7822</TD></TR>
                              <TR><TD id="company">AAA Place</TD><TD id="name">Travis</TD><TD id="position">?</TD><TD id="number">1-946-623-9106</TD><TD id="type">Cell</TD><TD id="email">aaatrophytravis@yahoo.com</TD><TD id="note">None Entered</TD></TR>
                              <TR><TD id="company">Adidas Group / SLD</TD><TD id="name">Ashley</TD><TD id="position">Art Department</TD><TD id="number">337-924-7381</TD><TD id="type">Business</TD><TD id="email">ashley.zimmermann@adidas-group.com</TD><TD id="note">None Entered</TD></TR>
                              <TR><TD id="company">Advertising People</TD><TD id="name">Vincent</TD><TD id="position">Digital Operator</TD><TD id="number">?</TD><TD id="type">n/a</TD><TD id="email">digital@advedge.com</TD><TD id="note">None Entered</TD></TR>
    <?php //buildListing(); ?>
                            </TABLE>
                          </DIV>
    PHP Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
                          <script>
                            var $rows = $('#table tr');
                            $('#search').keyup(function() {
                                var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                                
                                $rows.show().filter(function() {
                                    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                                    return !~text.indexOf(val);
                                }).hide();
                            });
                          </script>
    <?php

    function buildListing() {
      global 
    $link;
      
    $statement $link->prepare("SELECT customers.`Customer Name`,rolodex.`FLName`,rolodex.`Position`,rolodex.`Number`,rolodex.`Type`,rolodex.`E-mail`,rolodex.`Note` FROM `rolodex` INNER JOIN `customers` ON rolodex.`CustomerID`=customers.`ID` ORDER BY customers.`Customer Name`");
      
    $statement->execute();
      
    $statement->bind_result($col1,$col2,$col3,$col4,$col5,$col6,$col7);
      while (
    $statement->fetch()) {
        echo 
    '                          <TR><TD id="company">' $col1 '</TD><TD id="name">' $col2 '</TD><TD id="position">' $col3 '</TD><TD id="number">' $col4 '</TD><TD id="type">' $col5 '</TD><TD id="email">' $col6 '</TD><TD id="note">' $col7 "</TD></TR>\n";
      }
      
    $statement->close();
    }
    Code:
    #heading {
      text-align: left;
    }
    
    .company {
      width: 289px;
    }
    
    .name {
      width: 159px;
    }
    
    .position {
      width: 109px;
    }
    
    .number {
      width: 169px;
    }
    
    .type {
      width: 89px;
    }
    
    .email {
      width: 249px;
    }
    
    .notes {
      width: 99px;
    }
    
    #listing {
      border-top: thin solid black;
      border-bottom: thin solid black;
      border-right: thin solid black;
      height: 500px;
      overflow: auto;
      width: 1190px;
    }
    
    #listing table {
      table-layout: fixed;
      width: 1170px;
    }
    
    #listing table tr td {
      border-left: 1px solid black;
      overflow: hidden;
      padding-left: 2px;
      text-align: left;
      white-space: nowrap;
    }
    
    #company {
      width: 290px;
    }
    
    #name {
      width: 160px;
    }
    
    #position {
      width: 110px;
    }
    
    #number {
      width: 170px;
    }
    
    #type {
      width: 90px;
    }
    
    #email {
      width: 250px;
    }
    Last edited by Triple_Nothing; February 13th, 2013 at 01:08 PM.
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    you try to select the HTML elements when they don't even exist (the script is before the body).

    You either need to move the script element down or -- which is cleaner -- defer the actions until the page is loaded:
    Code:
    <script>
    	$(function () {
    		var $rows = $('#table tr');
    		...
    	});
    </script>
    I'd actually move the JavaScript code in separate files.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    694
    Rep Power
    7
    What do you mean when they don't exist? I reference a 'table' and 'search' id which are present roughly 20 lines below the </script> :-S

    As far as cleanliness, this is not the true script. I just tossed some thingss together so it would run on its own. Otherwise this is just to be a module to the overall.
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Originally Posted by Triple_Nothing
    What do you mean when they don't exist? I reference a 'table' and 'search' id which are present roughly 20 lines below the </script> :-S
    Yes, they are below the script element, which means they are not present at the time the script is executed. The HTML source is interpreted top down.

    That is, you either need to physically move the script element below the elements you want to reference. Or you have to defer the script execution (which is the standard way).
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    694
    Rep Power
    7
    Ah, thank you very much. I felt this was similar to defining a function in PHP, and the searchbox was kinda what was calling it. Works great. Thanks!
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Originally Posted by Triple_Nothing
    I felt this was similar to defining a function in PHP, and the searchbox was kinda what was calling it.
    JavaScript is executed as each <script> element loads. The script in each can only access the elements that have already been loaded (added to the page's document object model). Correct me if I'm wrong, but a better analogy might be trying to call a PHP function defined in another file before the call to include(_once) or require(_once). Does calling a method from a PHP class work when the class is defined later in the code?

    By the way, the same ID should not be used for multiple elements in the same document. In other words, any two or more elements on a page may not have the same ID. You could use a class instead.

    Originally Posted by Jacques1
    you either need to physically move the script element below the elements you want to reference. Or you have to defer the script execution (which is the standard way).
    Both are common. Placing/moving <script> elements near the end of the page is growing in popularity because of the page loading performance benefits.
    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).

IMN logo majestic logo threadwatch logo seochat tools logo