Dynamic Link on search result

Question

I want to automatically fill out the div with id= id, name, email, company.. after a click on any search result. The id from the search result is used as filter to get the appropriate row from Mysql data is coming from the same table used in search.php

here is my 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 the search    criteria..." onkeydown="searchq();"/>
  <input type="submit" value ="serach"/>

</form>
//Serach result//
<div id="output"> </div>

//Data to populate upon click on any search result//
    <div id="id"></div> 
    <div id="name"></div>
    <div id="email"></div>
    <div id="company_name"></div>

</body>

** I created a 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 the data attribute we used above in the a tag we 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 also 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 * FROM oz2ts_users WHERE oz2ts_users.id LIKE '%$searchq%' OR oz2ts_users.name LIKE '%$searchq%'") or die("Could not search"); 
  $count = mysql_num_rows($query);
  if($count == 0){
     $output = 'There is no result to 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 is the 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 FROM oz2ts_users WHERE oz2ts_users.id =      $id") or die("Could not search"); 
    // since we expect only one result we don't need a loop
    $row = mysqli_fetch_assoc($result);
    // let's return the $row in json format
    // first let's prepare the http header
    header('Content-Type: application/json');
    // and now we return the json payload
    echo json_encode($row);
}

?>

[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Sep 30 '15 at 19:15
If you can, you should [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really not hard](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Sep 30 '15 at 19:15

score 0 · Answer 1 · answered Sep 30 '15 at 19:41

0

You are on the right path and although you haven't tried anything yourself, here's something to get you moving along:

You should return something like this and populate your search result list

$output .= '<div><a class="resultItem" data-id="' . $id . '">'   
           . $name . ' '.$username.'</a></div>';

Next you need an additional ajax call to populate the bottom info so here's the javascript bit, pay attention to the way the click event is bound to the dynamically created element using the body on construct:

$('body').on('click', 'a.resultItem', function(e) {
    e.preventDefault();
    $.ajax({
        url: "getItem.php",
        method: 'post',
        data : $(this).data('id') // see the data attribute we used above in the a tag we constructed
    }).done(function(data) {
        $("#id").html(data.id);
        $("#name").html(data.name);
        $("#email").html(data.email);
        $("#company_name").html(data.company);
    });
});

And now you just need the getItem.php which can be something like this:

<?php
include '../db/connect6.php';

if(isset($_POST['id'])) {
    $id = intval($_POST['id']);
    $result = mysqli_query("SELECT id,name,email,company FROM yourtable WHERE yourtable.id = $id") or die("Could not search"); 
    // since we expect only one result we don't need a loop
    $row = mysqli_fetch_assoc($result);
    // let's return the $row in json format
    // first let's prepare the http header
    header('Content-Type: application/json');
    // and now we return the json payload
    echo json_encode($row);
}

answered Sep 30 '15 at 19:41

Alex Andrei

7,315
3
28
42

Thank you Alex. I did all you suggested. I am getting the search result but no link on it when I hover the mouse on the items. What am I missing? – user3758187 Oct 01 '15 at 14:11
When I inspect one line of result, I get this. choou choudja – user3758187 Oct 01 '15 at 19:29
there you go, you have the link on each item, now you can click on it – Alex Andrei Oct 02 '15 at 10:02
Have you change something? Still doesn't work. No link, nothing happened when I click on any item. I will post below all I did – user3758187 Oct 02 '15 at 18:44
I Edited my initial post to show what I did. It still doesn't work. Can you please take a look when you have 1 min to see if I did something wrong? – user3758187 Oct 02 '15 at 19:17
Help me please. I have tried many change without any success. – user3758187 Oct 05 '15 at 17:53
what doesn't work, do you get results, can you click on them? – Alex Andrei Oct 05 '15 at 19:22
I get the search result but no result item is clickable. you can see it here: http://onlinepcdoc.com/index.php/member-records search result is on the right. Do not pay attention on what is showing at the bottom. – user3758187 Oct 05 '15 at 22:45
Every time you click on a search result, bottom or right, you get a javascript error. You can see it in the browser console. *Uncaught TypeError: this.format is not a function in mootools-more.js * This is most-likely caused by having a conflict between jquery and mootools, see this question on how to fix this http://stackoverflow.com/questions/2810399/jquery-and-mootools-conflict also here http://davidwalsh.name/jquery-mootools – Alex Andrei Oct 06 '15 at 05:25
I changed to `jQuery('body').on('click', 'a.resultItem', function(e) { e.preventDefault(); $.ajax({ url: "../action/subs/getItem.php", method: 'post', data : $(this).data('id') // see the data attribute we used above in the a tag we 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); }); });` but I am getting the error `TypeError: this.format is not a function` when I click on the link. – user3758187 Oct 06 '15 at 19:43
you need to replace all instances of `$` with `jQuery` including here `$.ajax` and `$(this)` – Alex Andrei Oct 06 '15 at 19:45
did the above change now I am getting this error. `TypeError: this.format is not a function` I am also getting this error when the form loads `Use of getPreventDefault() is deprecated. Use defaultPrevented instead.` I don't see where is comming from – user3758187 Oct 07 '15 at 00:37
here is what I did to get the above error `jQuery('body').on('click', 'a.resultItem', function(e) { e.preventDefault(); jQuery.ajax({ url: "../action/subs/getItem.php", method: 'post', data : jQuery(this).data('id') // see the data attribute we used above in the a tag we 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); }); });` – user3758187 Oct 07 '15 at 00:49
that should be a warning only not an error, does it work? – Alex Andrei Oct 07 '15 at 05:39
Still Doesn't work. I keep getting `TypeError: this.format is not a function` – user3758187 Oct 07 '15 at 11:03

Dynamic Link on search result

1 Answers1