Develop Reference

Live data search using ajax. How to display another query when input is empty [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I am trying to create a live search using ajax, jquery, php and mysql.
The user enter some inputs, it send the search to form_livesearch.php. I got that part worked. Else if the input is empty, then display other query. (I need help with this part)
<div id="container" class="col-md-12">
<div class="row">
<h2>Quick Search</h2>
<input class='form-control' type="text" id='live_search' placeholder='Search our inventory'>
<br>
<br>
<h2 class="" id="searchresult">
</h2>
</div>
</div>
$(document).ready(function(){
$("#live_search").keyup(function(){
var input = $(this).val();
if(input != ""){
$.ajax({
url:"form_livesearch.php",
method:"POST",
data:{input:input},
success:function(data){
$("#searchresult").html(data);
$("#searchresult").css("display","block");
}
});
} else {
// If the input field is empty
// How display another php query here?
}
});
});
Here is the php and mysql I am trying to display when the input field is empty.
<?php
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_category = 'policy' ORDER BY id ASC";
$result = mysqli_query($db,$query);
if(!$result){
die("Query Failed " . mysqli_error($db));
}
if(mysqli_num_rows($result) > 0){
?>
<h3>Policies</h3>
<ul>
<?php
while($row = mysqli_fetch_assoc($result)){
$id = $row['id'];
$s_url = $row['s_url'];
$s_name = $row['s_name'];
$s_category = $row['s_category'];
?>
<li><?php echo $s_name?> <img src="https://www.xxxxxxx.xxx/xxxx/images/pdf.gif" alt="PDF"></li>
<?php
}
?>
</ul>
<?php
}
?>
form_livesearch.php:
if(isset($_POST['input'])){
$input = $_POST['input'];
//to prevent from mysqli injection
// x'='x
$input = stripcslashes($input);
$input = mysqli_real_escape_string($db, $input);
$input = str_replace('%', ' #', $input);
$input = str_replace("'", ' #', $input);
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_name LIKE '%{$input}%' ORDER BY id ASC";
$result = mysqli_query($db,$query);
if(mysqli_num_rows($result) > 0){?>
<table class="table table-bordered table-striped mt-4">
<!--
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
-->
<tbody>
<?php
while($row = mysqli_fetch_assoc($result)){
$id = $row['id'];
$s_url = $row['s_url'];
$s_name = $row['s_name'];
$s_category = $row['s_category'];
?>
<tr>
<td style="font-size: 14px;"><?php echo $s_name;?> <img src="https://www.xxxxx.xxxx/xxxxx/images/pdf.gif" alt="PDF"></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}else{
echo "<h6 class='text-danger text-center mt-3'>No data Found</h6>";
}
}
?>

You should handle this stuff in the PHP file. and by the way, the input can not be empty as you put the ajax in keyup event.
it just happened when the user use the backspace to delete what he search.
So the form_livesearch.php PHP file should be something like this.
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
$output = "";
if(isset($_POST['input'])){
$input = $_POST['input'];
if(!empty($input)){
$input = str_replace('%', ' #', $input);
$input = str_replace("'", ' #', $input);
$input = "%$input%"; // prepare the $input variable
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_name LIKE ? ORDER BY id ASC";
$stmt = $conn->prepare($query);
$stmt->bind_param("s", $input); // here we can use only a variable
$stmt->execute();
}else{
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_category = 'policy' ORDER BY id ASC";
$stmt = $conn->prepare($query);
$stmt->execute();
}
$result = $stmt->get_result(); // get the mysqli result
if($result->num_rows > 0){
if(empty($input))
$output = '<table class="table table-bordered table-striped mt-4"><tbody>';
else
$output = '<h3>Policies</h3><ul>';
while($row = $result->fetch_assoc()){
$id = $row['id'];
$s_url = $row['s_url'];
$s_name = $row['s_name'];
$s_category = $row['s_category'];
if(empty($input))
$output .= '
<tr>
<td style="font-size: 14px;">' . $s_name .' <img src="https://www.xxxxx.xxxx/xxxxx/images/pdf.gif" alt="PDF"></td>
</tr>';
else
$output .= '<li>' . $s_name . ' <img src="https://www.xxxxxxx.xxx/xxxx/images/pdf.gif" alt="PDF"></li>';
}
if(empty($input))
$output .= '</tbody></table>';
else
$output .= '</ul>';
echo $output;
}else{
echo "<h6 class='text-danger text-center mt-3'>No data Found</h6>";
}
}
?>
You can use a separate file to handle 2 types but as they are all about products it's better to have one file.
It's a good practice to return the data and let the frontend build the HTML output but if you want to build HTML in the PHP file, it's better to wrap them in a string.
Also, use the prepare statement of MySQLi to prevent SQL injection. take a look at this example for more information.
And the html file should be something like this:
<div id="container" class="col-md-12">
<div class="row">
<h2>Quick Search</h2>
<input class='form-control' type="text" id='live_search' placeholder='Search our inventory'>
<br>
<br>
<h2 class="" id="searchresult">
</h2>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// will execute once the page load
getData();
$("#live_search").keyup(function(){
let input = $(this).val();
getData(input);
});
});
function getData(input = ''){
$.ajax({
url:"form_livesearch.php",
method:"POST",
data:{input:input},
success:function(data){
$("#searchresult").html(data);
$("#searchresult").css("display","block");
}
});
}
</script>

How to use ajax requests in table pagination and customization

I have a table that displays the records stored in a database. I have customized my pagination differently from what bootstrap uses to look like phpMyAdmin table pagination. What I have done so far works perfectly but refreshes the page on each user selection. I am stuck on how to use ajax to make the pagination work fine without refreshing the page.
Here's the HTML code to display the table with checkbox, select input and pagination links
<!--DISPLAY TABLE-->
<form class="" name="frmDisplay" id="frmDisplay" method="POST" action="">
<div id="display_table"></div>
<input type="checkbox" name="check" id="check" onchange=""></input> <label for="check">Show All</label>
<label class="clabel">|</label>
<label class="clabel" for="rowno">Number of Rows:</label>
<select class="" id="rowno" name="rowno" style="width:50px;height:25px;margin-bottom:3px;">
<option value='all' hidden disabled>All</option>
<?php
//set the value of $rowno
$rowno = isset($_POST['rowno'])?$_POST['rowno']:5;
if($rowno == 5)
{
$rowno = isset($_GET['limit'])?$_GET['limit']:5;
}
?>
<option value='5' <?=$rowno==5?'selected':''?>>5</option>
<option value='10' <?=$rowno==10?'selected':''?>>10</option>
<option value='15' <?=$rowno==15?'selected':''?>>15</option>
<option value='20' <?=$rowno==20?'selected':''?>>20</option>
<option value='25' <?=$rowno==25?'selected':''?>>25</option>
<option value='30' <?=$rowno==30?'selected':''?>>30</option>
</select>
<label class="clabel">|</label>
<label class="clabel" for="filter">Filter Rows:</label>
<input class="" style="width:50%;height:25px;margin-bottom:10px;" id="filter" name="filter" placeholder="Filter this table" onkeyup="filtertbl();"></input>
<div class='table-responsive-sm' style='width:100%;margin-top:10px;'>
<?php
//code to fetch all records from database on checkbox checked
if(isset($_POST['check']))
{
$sql = "SELECT *FROM evatbl WHERE RegNo = ?";
if($stmt = $con->prepare($sql))
{
$stmt->bind_param("s", $pregno);
$pregno = $_SESSION['regno'];
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
if($num_rows>0)
{
$count = 1;
echo "<table id='t01'' class='table'>
<tr id='tblhead'>
<th>SN</th>
<th>Course Title</th>
<th>Course Code</th>
<th>Credit Unit</th>
<th>Course Lecturer</th>
<th>Rating(%)</th>
</tr>";
while($row = $result->fetch_assoc())
{
$ccode = $row['CourseCode'];
$ctitle = $row['CourseTitle'];
$cunit = $row['CreditUnit'];
$clec = $row['CourseLecturer'];
$crate = $row['Rating'];
echo "
<tr>
<td>$count</td>
<td>$ctitle</td>
<td>$ccode</td>
<td>$cunit</td>
<td>$clec</td>
<td>$crate</td>
</tr>";
$count++;
}
}
else{
echo "<p style='color:darkblue;margin-bottom:0;'>Oops! No records found.</p>";
}
}
}
else
{
//code for pagination
//get current page
$currentpage = isset($_GET['currentpage']) ? $_GET['currentpage'] : 1;
$no_of_records_per_page = $rowno;
$setoff = ($currentpage - 1) * $no_of_records_per_page;
//get total number of records in database
$sqlcount = "SELECT *FROM evatbl WHERE RegNo = ?";
$stmt = $con->prepare($sqlcount);
$stmt->bind_param("s", $pregno);
$pregno = $_SESSION['regno'];
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
$totalpages = ceil($num_rows/$no_of_records_per_page);
//query for pagination
$sqllimit = "SELECT *FROM evatbl WHERE RegNo = ? ORDER BY CourseTitle LIMIT $setoff, $no_of_records_per_page";
if ($stmt = $con->prepare($sqllimit))
{
$stmt = $con->prepare($sqllimit);
$stmt->bind_param("s", $pregno);
$pregno = $_SESSION['regno'];
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
if ($num_rows>0)
{
$count = 1;
echo "<table id='t01' class='table' width='100%'>
<tr id='tblhead'>
<th>SN</th>
<th>Course Title</th>
<th>Course Code</th>
<th>Credit Unit</th>
<th>Course Lecturer</th>
<th>Rating(%)</th>
</tr>";
while($row = $result->fetch_assoc())
{
$ccode = $row['CourseCode'];
$ctitle = $row['CourseTitle'];
$cunit = $row['CreditUnit'];
$clec = $row['CourseLecturer'];
$crate = $row['Rating'];
echo "
<tr>
<td>$count</td>
<td>$ctitle</td>
<td>$ccode</td>
<td>$cunit</td>
<td>$clec</td>
<td>$crate</td>
</tr>";
$count++;
}
}
else{
echo "<p style='color:darkblue;margin-bottom:0;'>Oops! No records found.</p>";
}
echo "</table>";
?><br>
<div class="nav_div">
<?php
//First Page Button
if($currentpage > 1)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".(1)."' title='First'><<</a>";
}
//Previous Page Button
if($currentpage >= 2)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".($currentpage - 1)."' title='Previous'><</a>";
}
?>
<select class='navno' name='navno' id='navno' onchange="pageNav(this)">
<?php
//Link to available number of pages with select drop-down
for($i = 1; $i <= $totalpages; $i++)
{
echo "<option class='bold'";
if ($currentpage==$i)
{
echo "selected";
}
echo " value='view_eva.php?limit=".$rowno."&currentpage=".$i."'>".$i."</option>";
}
?>
</select>
<?php
//Next Page Button
if($currentpage < $totalpages)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".($currentpage + 1)."' title='Next'>></a>";
}
//Last Page Button
if($currentpage <= $totalpages - 1)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".($currentpage = $totalpages)."' title='Last'>>></a>";
}
?>
</div>
<?php
}
}
?>
</form>
</div>
</div>
Here's the javascript that controls form submission on each user selection. I know this is where I'll need to use ajax requests but I can't figure out how. I've been on this for some days now.
<script type="text/javascript">
<?php
/*Using PHP to create a javascript variable that can be used to
add the `selected` attribute to the respective option*/
printf("let rownum='%s'", empty($_POST['rowno']) ? 0 : $_POST['rowno']);
?>
let myForm=document.forms.frmDisplay;
let mySelect=myForm.rowno;
let myCheck=myForm.check;
let myNavSelect=myForm.nav_no;
// find all options and if the POSTed value matches - add the selected attribute
// establish initial display conditions following page load / form submission
if(rownum)
{
if(rownum=='all') myCheck.checked=true;
Array.from(mySelect.querySelectorAll('option')).some(option=>
{
if(rownum==Number(option.value) || rownum=='all')
{
option.selected=true;
return true;
}
});
}
// listen for changes on the checkbox
myCheck.addEventListener('click',function(e)
{
if(myCheck.checked)
{
var msg = confirm('Do you really want to see all of the \nrows? For a big table this could crash \nthe browser.');
if(!msg)
{
myCheck.checked=false;
return false;
}
}
if(mySelect.firstElementChild.value=='all')
{
mySelect.firstElementChild.selected=this.checked;
mySelect.firstElementChild.disabled=!this.checked;
}
myForm.submit();
});
// listen for changes on the select
mySelect.addEventListener('change',function(e)
{
if(myCheck.checked) myCheck.checked=false;
myForm.submit();
});
//load url on the navigate select
function pageNav(option)
{
location.href = option.value;
}
</script>
Please, I need all the help I can get to complete this project. Thank you.

Trying to delete a row from database(phpmyadmin) onclick

Trying to delete a row after clicking a delete button, but even there's no error, it doesn't work. At first I thought that it has to do with the if statements but nothing changed...Here's my delete code! Is there any other way? Thank you
<?php
echo "<table>
<caption>Λίστα Χρηστών</caption>
<thead>
<tr>
<th scope='col'>Ιd</th>
<th scope='col'>Χρήστης</th>
<th scope='col'>Διαγραφή</th>
</tr>
</thead>";
$servername = "localhost";
$username = "root";
$password = "";
$db = "aws_chat";
// Create connection
$conn = new mysqli($servername, $username, $password,
$db);
// Check connection
$sql = "SELECT username,email,id FROM users WHERE
user_type='user'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
if (isset($_GET['del'])) {
$del = $_GET['del'];
//SQL query for deletion.
$sql_del = "DELETE * FROM users WHERE id=$del";
}
while($row = $result->fetch_assoc()) {
echo "<tbody>
<tr>
<td>".$row["id"]."</td>
<td>".$row["username"] ."</td>
<td><a href='delete_user.php?del=
{$row['id']}'><input type='button' class='btn_del'
value='Delete'/></td>
</tr>
</tbody>
<tfoot>
</tfoot>";
}
} else {
echo "0 results";
}
echo "</table>";
?>
</center></div>

change
DELETE * FROM users WHERE id=$del
to
DELETE FROM users WHERE id=$del

//SQL query for deletion.
$sql_del = "DELETE FROM users WHERE id='".$del."' ";
$conn->query($sql_del); // you missed this line which is required to delete the record from database

Hidden table row not displaying correct information

I've having some issue with the Javascript. I have a table that shows the basic information of the customer when an employee conduct a search base on the customer name. When the employee clicks on "View Sales History" the hidden table row of the particular customer's sales history will appear.
I've have no problem displaying the sales history of all the customer's returned from the search when I change the css display to "table-row". However it would only display the first customer's sales history whenever I hide the table row and include the javascript to display the hidden row.
This is what I've tried doing so far, hopefully someone can help me out here.
while($row = mysql_fetch_assoc($result)) {
$id = $row["id"];
$cfname = $row["f_name"];
$clname = $row["l_name"];
$cemail = $row["email"];
$ccompany = $row["company_name"];
$year = $row["year"];
$product = $row["product"];
$employee = $row["employee"];
$status = $row["status"];
echo '<tr>
<td>'.$cfname.' '.$clname.'</td>
<td>'.$cemail.'</td>
<td>'.$ccompany.'</td>
<td> <h4 id="vsalesHistory" onclick="vsalesHistory()">View Sales History</h4></td>
</tr>';
echo '<thead id="salesHistoryHead">
<tr>
<th>Date of Sales</th>
<th>Type of Product</th>
<th>Previous Sales Manager</th>
<th>Job Status</th>
</tr>
</thead>';
echo '<tr id="salesHistory">
<td>'.$year.'</td>
<td>'.$product.'</td>
<td>'.$employee.'</td>
<td>'.$status.'</td>
</tr>';
}
echo '</table>';
and this is my JS script
function vsalesHistory(){
var e = document.getElementById('salesHistoryHead');
var f = document.getElementById('salesHistory');
if(e.style.display == 'table-row'){
e.style.display = 'none';
}else{
e.style.display = 'table-row';
}
if(f.style.display == 'table-row'){
f.style.display = 'none';
}else{
f.style.display = 'table-row';
}
}

You are creating multiple rows with the same ID, which is not a good idea. Instead, use the row ID to create unique iDs, like:
echo '<thead id="salesHistoryHead' . $id . '">
<tr>
<th>Date of Sales</th>
<th>Type of Product</th>
<th>Previous Sales Manager</th>
<th>Job Status</th>
</tr>
</thead>';
echo '<tr id="salesHistory' . $id . '">
<td>'.$year.'</td>
<td>'.$product.'</td>
<td>'.$employee.'</td>
<td>'.$status.'</td>
</tr>';
Then pass the ID with the button action, e.g.
<td> <h4 id="vsalesHistory" onclick="vsalesHistory(' . $id . ')">View Sales History</h4></td>
If $id is a string, you would need to quote it in the call to vsalesHistory.
Now you can use the ID in your Javascript to pick the single right set of information.
For example:
function vsalesHistory(id){
var e = document.getElementById('salesHistoryHead'+id);
var f = document.getElementById('salesHistory'+id);
...

slide show using javascript using php variable

I am trying to get member photos from my sql and show as a slide. i am trying this with DHTML slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) check the basic code here basic code
now i change the code to get the image url from mysql using php
my code :
Here is the html and script code.
<html>
<head>
<script type="text/javascript">
/***********************************************
* DHTML slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var photos = new Array()
<?php
$mid=$_POST['mid'];
//echo $mid;
$mid=$_POST['mid'];
require_once("datacon.php");
$result = $data->query("SELECT * FROM tempregist where id= $mid ");
$row = mysqli_fetch_array($result) or die(mysqli_error());
$folde= "uploads/thumb/";
$folder=utf8_encode($folde);
//echo $folder;
$mid1 =$row['mid'];
require_once("datacon.php");
$result = $data->query("SELECT image_name FROM tbl_images where mid= '$mid1' ");
$phparray = array();
$count = mysqli_num_rows($result);
if($count>=1)
{
while($crow = mysqli_fetch_array($result))
{
$i=0;
$phparray[$i] = $folder. $crow['image_name'];
$i++;
?>
photos<?php echo"[".$i."]" ;?> = <?php echo '"'. implode( $phparray) . '"'."\n" ;
} }
?>
var photoslink = new array
var x
x =<?php echo json_encode($count) ?>;
var which=0
/
//Specify whether images should be linked or not (1=linked)
var linkornot=0
Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""
//do NOT edit pass this line
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}
function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}
function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}
function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}
function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
function transport(){
window.location=photoslink[which]
}
</script>
</head>
<body>
<div align="center">
<img src="images/logo.jpg" border = "2" align="center" alt="no logo">
</div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
</tr>
<tr>
<td width="50%" height="21"><p align="left">Previous Slide</td>
<td width="50%" height="21"><p align="right">Next Slide</td>
</tr>
</table>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
Dynamic Drive</font></p>
</body>
</html>
Now i am getting out put as follows
var photos = new Array()
photos[0] = "uploads/thumb/220816_1412135472.jpeg"
photos[0] = "uploads/thumb/312840_1412135511.jpeg"
photos[0] = "uploads/thumb/589453_1412135511.jpeg"
photos[0] = "uploads/thumb/467341_1412135630.jpeg"
photos[0] = "uploads/thumb/800658_1412135790.jpeg"
photos[0] = "uploads/thumb/366793_1412135826.jpeg"
But i need the out put like this
photos[0] = "uploads/thumb/220816_1412135472.jpeg"
photos[1] = "uploads/thumb/312840_1412135511.jpeg"
photos[2] = "uploads/thumb/589453_1412135511.jpeg"
photos[3] = "uploads/thumb/467341_1412135630.jpeg"
photos[4] = "uploads/thumb/800658_1412135790.jpeg"
photos[5] = "uploads/thumb/366793_1412135826.jpeg"
i tried so much. please any one help.

while($crow = mysqli_fetch_array($result))
{
$i=0;
You're resetting $i in your loop

$result = $data->query("SELECT image_name FROM tbl_images where mid= '$mid1' ");
{
$count = mysqli_num_rows($result);
if($count>=1)
{
$i=0;
while($crow = mysqli_fetch_array($result))
{
$phparray[$i] = $folder. $crow['image_name'];
echo $i. "\n";
$i++;
}
}
use $i=0 initialization outside while

finally i found it with help of Hammerstein and Dhanush Bala. i mingled two persons suggestion i got it here is the answer
$phparray = array();
$count = mysqli_num_rows($result);
if($count>=1)
{
$b=0;
while($crow = mysqli_fetch_array($result))
{
$i=0;
$phparray[$i] = $folder. $crow['image_name'];
$i++;
$b++;
?>
photos<?php echo"[".$b."]" ;?> = <?php echo '"'. implode( $phparray) . '"'."\n" ;
} }
now the out put is:
photos[1] = "uploads/thumb/220816_1412135472.jpeg"
photos[2] = "uploads/thumb/312840_1412135511.jpeg"
photos[3] = "uploads/thumb/589453_1412135511.jpeg"
photos[4] = "uploads/thumb/467341_1412135630.jpeg"
photos[5] = "uploads/thumb/800658_1412135790.jpeg"
photos[6] = "uploads/thumb/366793_1412135826.jpeg"
thanks Hammerstein and Dhanush Bala