I fetched record from mysql database when i enter any keyword in search box. up to this everything run properly and also shows result of that particular keyword. My query is the fetched result will shows just below the search box instead of that i should show results on popup and the popup should be responsive also. plz suggest me, Below is the code
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="pt" dir="ltr"><head><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script></head> <body>
<div style="text-align:center;">
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
<div id="search_results"></div>
</div></body></html>
db_query.php
<?php $con=mysqli_connect("localhost","root", "","u871197953_shope") or die("Error connecting to database: ".mysql_error()); mysqli_select_db($con,"u871197953_shope") or die(mysql_error()); $query = mysqli_query($con,"select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$_POST['value']."%' LIMIT 20"); if(mysqli_num_rows($query) > 0)
{
?>
<div class="input-group col-sm-10 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover" style="text-align:center;">
<thead>
<tr bgcolor="#1E90FF" >
<th>Products</th>
<th style="text-align:center;">Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysqli_fetch_array($query))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:60px;width:80px;" /></td>
<td><?php echo "<p style='font-size:12px;'>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:30px;width:100px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td><a href="<?php echo $results['deeplink']; ?>" style="background-color:#ff8c21;" class="btn btn-warning btn-sm">Buy now</a></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
else
{ // if there is no matching rows do following
echo "No results found...";
} ?>
By default bootstrap popup/modal window is responsive. Dont worry about that.
Add modal window html codes in yor page.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
After loading the result as add the result in model body
$('#myModal .modal-body').html(data);
Then trigger model using:
$('#myModal').modal(options);
- Use standard bootstrap options in the modal function.