webguync Posted May 19, 2011 Share Posted May 19, 2011 Hi, I am trying to pull data from a MySQL database using PHP and AJAX while displaying with some JQuery functionality. The form works as intended in that the data gets pulled, but my JQuery affects aren't working. A little research in another forum produced that I need to bind the data, but what I have tried so far hasn't worked. Here is the code. <html> <head> <script src="js/jquery.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); $(".stripeMe tr").live('mouseover',function(){$(this).addClass("over");}) .live('mouseout',function(){$(this).removeClass("over");}); //$.get('find.php', function(data){ // insert new html from ajax // $("#search_results").html(data); // $(".stripeMe tr:even").addClass("alt"); //}) function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <title>Novo RPC Results Search Engine</title> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <h1>Search RPC results</h1> <form id="searchform" method="post"> <div> <label for="search_term">Search name/phone</label> <input type="text" name="search_term" id="search_term" /> <input type="submit" value="search" id="search_button" /> </div> </form> <div id="search_results"></div> </body> </html> the commented out get method is what I got from another forum and again I tried it and the Database display doesn't work.Right now the data displays, but I want it to slide in and it doesn't. Quote Link to comment Share on other sites More sharing options...
webguync Posted May 19, 2011 Author Share Posted May 19, 2011 any more ideas on this. Here is my latest attempt with my initial code commented out. <html> <head> <script src="js/jquery.js"></script> <script type='text/javascript'> $.get('find.php', function(data){ // insert new html from ajax $("#search_results").html(data); // html is now in page so can call jQuery methods on it $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}) .mouseout(function(){$(this).removeClass("over");}); $(".stripeMe tr:even").addClass("alt"); }) //function ajax_search(){ // $("#search_results").show(); // var search_val=$("#search_term").val(); // $.post("./find.php", {search_term : search_val}, function(data){ //if (data.length>0){ // $("#search_results").html(data); // } //}) //} </script> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <title> Results Search Engine</title> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <h1>Search results</h1> <form id="searchform" method="get"> <div> <label for="search_term">Search Results</label> <input type="text" name="search_term" id="search_term" /> <input type="submit" value="search" id="search_button" /> </div> </form> <div id="search_results"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
webguync Posted May 20, 2011 Author Share Posted May 20, 2011 I think I just need to add live() to my JQuery syntax, but not sure how I would go about doing that to this. $("#search_results").slideUp(); anyone done something like this previously? Quote Link to comment Share on other sites More sharing options...
webguync Posted May 25, 2011 Author Share Posted May 25, 2011 as an emendment to my problem, I have my row striping working now, but not the slide up. <html> <head> <script src="js/jquery.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length>0){ $("#search_results").html(data); $(document).ready(function(){ $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); $(".stripeMe tr:even").addClass("alt"); }); } }) } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <title>Novo RPC Results Search Engine</title> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <h1>Search RPC participants</h1> <form id="searchform" method="post" action="find.php"> <div> <label for="search_term">Search RPC information</label> <input type="text" name="search_term" id="search_term" /> <input type="submit" value="search" id="search_button" /> </div> </form> <div id="search_results"></div> </body> </html> I tried moving the slide up code after this line $("#search_results").html(data); but the JQuery is broken when I do that. Any ideas on what I need to do to get my slide up to work? I can post a link to my form if needed. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.