CODEWITHSUNDEEP
jquery
Walorn
Walorn

Reputation: 151

Jquery filter on php generated Divs

I can't seem to figure out why this JQuery isn't filtering. Is my JQuery function not correct or is the php I am using to generate the divs wrong. Each generated Div will look like so

Each generated Div looks like so

<div class="content" style="background-color: firebrick"> Some Content </div>

This is the code on the page with the JQuery Function

<html>
<head>
    <link rel="stylesheet" href="css/logged_in.css">
    <?php   
        include("login_php_scripts.php");
    ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $('#filter').keyup(function () { 
        var filter = $("#filter").val();
        $('#warnings').each(function() {
            $(this).find("div:not(:contains('" + filter + "'))").hide();
            $(this).find("div:contains('" + filter + "')").show();
        });
    });
</script>
</head>
<body>

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>

<div id="navigation">
    <a href="index.php?logout">Account</a> 
    <a href="index.php?logout">Logout</a>
</div>

<div id="header">
    <div id="logo"></div>
    <div id="header_text"></div>
</div>

<div id="content_wrapper">
    <div id="list_view">
        <input id = "filter" class = "filter" type = "text" name = "filter" placeholder = "Search. . ."/>
        <div id = "warnings">
            <?php 
                getwarnings();
            ?>
        </div>
    </div>

    <div id="map">
        <script> 
            createmap();
        </script>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

Upvotes: 0

Views: 329

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34426

Because you're loading your script in the head of the document you need to surround it with a document ready handler.

$(document).ready(function){
    $('#filter').keyup(function () { 
        var filter = $("#filter").val();
        $('#warnings').each(function() {
            $(this).find("div:not(:contains('" + filter + "'))").hide();
            $(this).find("div:contains('" + filter + "')").show();
        });
    });
})

Some people, myself included, like the shorthand style of this handler:

$(function(){
    // your code here
});

Here is more on the .ready() event handler.

Upvotes: 1

Related Questions