javascript - Dynamic Link on search result -
i want automatically fill out div id= id, name, email, company.. after click on search result. id search result used filter appropriate row mysql data coming same table used in search.php
here form
<link href="../action/css/onlinecustom.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script src="./action/scripts/global2.js" type="text/javascript"></script> <script> function searchq() { var searchtxt = $("input[name='search']").val(); $.post("../action/subs/search.php/", {searchval: searchtxt}, function(output) { $("#output").html(output); }); } </script> <title>search</title> <body> <form action="http://comiut.com/index.php/user-records" method="post"> <input type="text" name="search" placeholder="enter search criteria..." onkeydown="searchq();"/> <input type="submit" value ="serach"/> </form> //serach result// <div id="output"> </div> //data populate upon click on search result// <div id="id"></div> <div id="name"></div> <div id="email"></div> <div id="company_name"></div> </body> ** created global2.js file **
jquery('body').on('click', 'a.resultitem', function(e) { e.preventdefault(); jquery.ajax({ url: "http://onlinepcdoc.com/action/subs/getitem.php", method: 'post', data : jquery(this).data('id') // see data attribute used above in tag constructed }).done(function(data) { jquery("#id").html(data.id); jquery("#name").html(data.name); jquery("#email").html(data.email); jquery("#company_name").html(data.company); }); }); i created search.php
<?php include '../db/connect6.php'; if(isset($_post['searchval'])) { $searchq = $_post['searchval']; $searchq = preg_replace ("#[^0-9a-z]#i","",$searchq); $query = mysql_query("select * oz2ts_users oz2ts_users.id '%$searchq%' or oz2ts_users.name '%$searchq%'") or die("could not search"); $count = mysql_num_rows($query); if($count == 0){ $output = 'there no result show!'; } else{ while($row = mysql_fetch_array ($query)) { $id = $row['id']; $name = $row['name']; $username = $row['username']; $output .= '<div><a class="resultitem" data-id="' . $id . '">' . $name . ' '.$username.'</a></div>'; } } } echo($output); ?> ** here getitem.php **
<?php include '../db/connect6.php'; if(isset($_post['id'])) { $id = intval($_post['id']); $result = mysqli_query("select oz2ts_users.id, oz2ts_users.name, oz2ts_users.username, oz2ts_users.email oz2ts_users oz2ts_users.id = $id") or die("could not search"); // since expect 1 result don't need loop $row = mysqli_fetch_assoc($result); // let's return $row in json format // first let's prepare http header header('content-type: application/json'); // , return json payload echo json_encode($row); } ?>
you on right path , although haven't tried yourself, here's moving along:
you should return , populate search result list
$output .= '<div><a class="resultitem" data-id="' . $id . '">' . $name . ' '.$username.'</a></div>'; next need additional ajax call populate bottom info here's javascript bit, pay attention way click event bound dynamically created element using body on construct:
$('body').on('click', 'a.resultitem', function(e) { e.preventdefault(); $.ajax({ url: "getitem.php", method: 'post', data : $(this).data('id') // see data attribute used above in tag constructed }).done(function(data) { $("#id").html(data.id); $("#name").html(data.name); $("#email").html(data.email); $("#company_name").html(data.company); }); }); and need getitem.php can this:
<?php include '../db/connect6.php'; if(isset($_post['id'])) { $id = intval($_post['id']); $result = mysqli_query("select id,name,email,company yourtable yourtable.id = $id") or die("could not search"); // since expect 1 result don't need loop $row = mysqli_fetch_assoc($result); // let's return $row in json format // first let's prepare http header header('content-type: application/json'); // , return json payload echo json_encode($row); }
Comments
Post a Comment