Jquery filter on php generated Divs -
i can't seem figure out why jquery isn't filtering. jquery function not correct or php using generate divs wrong. each generated div so
each generated div looks so
<div class="content" style="background-color: firebrick"> content </div> this code on page 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>
because you're loading script in head of document need surround 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, shorthand style of handler:
$(function(){ // code here }); here more on .ready() event handler.
Comments
Post a Comment