AhKing AhKing - 4 months ago 15
Ajax Question

How to make ajax show table list without clicking the text field

I have created a live search using ajax and it worked perfectly well. However the problem is that I need to click the input field first to show all the listed data. The reason for this may be the

keyup
function. I don't know what to replace that. I did tried to change to focus and so on but then ajax not showing my data at all. I am not familiar with ajax.

Here is my input code and ajax.

<p style="text-align: center">Enter your search here: <input type="text" id="search" name="search" placeholder="Enter your search here">&nbsp;&nbsp;<b><i>ex: d1234567891.. hazwan.. etc.. </i></b></p>
<div id="result" class="login"></div>
<script type="text/javascript">
$(document).ready(function(e) {
$("#search").keyup(function() {
$("#result").show();
var x = $(this).val();
$.ajax({
type:'POST',
url:'res.php',
data:'q='+x,
cache:false,
success:function(data){
$("#result").html(data)
}
});
});
});

</script>
</div>


and here is my database code and display result.

//print_r($_GET);
$q=$_POST['q'];
$query="SELECT *
FROM
viewlibrary
WHERE
studentname LIKE :q OR
matricno LIKE :q OR
title LIKE :q OR
programme LIKE :q OR
serialno LIKE :q
ORDER BY studentname ASC";

$stmt = $db->prepare($query);
$stmt->bindValue(':q','%'.$q.'%');
$stmt->execute();

$a = 0;

if($stmt->rowCount() > 0){
$r=$stmt->fetchAll();
echo "<table class='tablesorter' id='myTable' style='width:97%; table-border: 1'>";
echo "<thead>";
echo "<tr>";
echo "<th>No.</th>";
echo "<th>No.Matric</th>";
echo "<th>Name</th>";
echo "<th>Programme</th>";
echo "<th>Title</th>";
echo "<th>Serial Number</th>";
echo "<th>Availability</th>";
echo "<th>Edit</th>";
echo "<th>Delete</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";

foreach($r as $row){

echo "<tr align='center'><td>". ($a+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td><td><a href='editpage.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/edit-icon.png' width=15px></a></td><td><a href='deletepage.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/remove-icon-png-15.png' width=15px></a></td></tr>";
$a++;
}
echo "</tbody>";
echo "</table>";
}
else{
echo "<p align='center'>Nothing to show you :( I am really sorry for this T_T </p>";
}
?>


The thing everytime I do some editing towards ajax code, its not running anymore. I try looking on the internet but can't find one suitable with ajax.
So what I want actually is to show all data listed when the page loaded and not after the user click the input field.

Please help.

Answer

Have you tried moving the ajax to a separate function?

Ex.

function ajaxSearchUpdater(){
    $("#result").show();
    var x = $('#search').val();
    $.ajax({
        type:'POST',
        url:'res.php',
        data:'q='+x,
        cache:false,
        success:function(data){
            $("#result").html(data)
        }
    });
}
$(document).ready(function(e) {
    ajaxSearchUpdater();               // fires on document.ready
    $("#search").keyup(function() {
        ajaxSearchUpdater();           // your function call
    }
}