Tuesday, 17 May 2016

How to load Product on price change using Ajax Jquery with PHP Mysql

           , , ,      5 comments   


This post covers one more points on eCommerce site and it covers how to load product from two range of price using Ajax with JQuery PHP and Mysql. Suppose you have working on eCommerce site and you have display product on that page with price of that product. On that page you have use input type rand element for filtering product based on price. When user want to show product with less than particular price, so when user select price range then at that time only product load less than set price from database without refreshing of page. For this I have fetch product data from Mysql table by using Jquery Ajax() method with PHP code. When user change the price range from input type range element then at change event of range element then at time ajax method will be call and it will send request to server for fetching product with price less than selected of range of price. This whole things done withour refreshing event of page. You can get more description from Web development video tutorial which I have attached with this post.

Source Code

Product Table


 --  
 -- Table structure for table `product`  
 --  
 CREATE TABLE IF NOT EXISTS `product` (  
  `product_id` int(11) NOT NULL AUTO_INCREMENT,  
  `product_name` varchar(250) NOT NULL,  
  `brand_id` int(11) NOT NULL,  
  `product_price` float NOT NULL,  
  `product_image` varchar(150) NOT NULL,  
  PRIMARY KEY (`product_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;  
 --  
 -- Dumping data for table `product`  
 --  
 INSERT INTO `product` (`product_id`, `product_name`, `brand_id`, `product_price`, `product_image`) VALUES  
 (1, 'Samsung Galaxy A9', 1, 36000, 'Samsung_Galaxy_A9_L_1.jpg'),  
 (2, 'Samsung Galaxy S7', 1, 25000, 'samsung-galaxy-s7--.jpg'),  
 (3, 'Samsung Galaxy S6 edge', 1, 51000, 'Samsung-Galaxy-S6-Edge-32-SDL982046267-1-e60ad.jpg'),  
 (4, 'Xperia Z5 Premium', 2, 40000, 'Sony-Xperia-Z5-Premium-3.jpg'),  
 (5, 'Xperia M5 Dual', 2, 20000, '83201512213PM_635_sony_xperia_m5_dual.jpeg'),  
 (6, 'Xperia C5 uplta', 2, 15000, 'Sony-Xperia-C5-Ultra.jpg'),  
 (7, 'Moto G Turbo', 3, 10500, 'moto-g-turbo-black-540.png'),  
 (8, 'Moto X Force', 3, 35000, '1029201574637PM_635_moto_x_force.jpeg'),  
 (9, 'Redmi 3 Pro', 4, 12000, 'xiaomi-redmi-3-pro.png'),  
 (10, 'Mi 5', 4, 25000, '224201614903PM_635_xiaomi_mi_5_front_side.jpeg');

html5_range.php


 <?php   
 $connect = mysqli_connect("localhost", "root", "", "zzz");  
 $query = "SELECT * FROM product ORDER BY product_price desc";  
 $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | How to load Product on price change using Ajax Jquery with PHP Mysql</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:800px;">  
                <br />  
                <h3 align="center">Load Product on price change using Ajax Jquery with PHP Mysql</h3>  
                <br />  
                <div align="center">  
                     <input type="range" min="10000" max="55000" step="1000" value="10000" id="min_price" name="min_price" />  
                     <span id="price_range"></span>  
                </div>  
                <br /><br /><br />  
                <div id="product_loading">  
                <?php  
                if(mysqli_num_rows($result) > 0)  
                {  
                     while($row = mysqli_fetch_array($result))  
                     {  
                ?>  
                <div class="col-md-4">  
                     <div style="border:1px solid #ccc; padding:12px; margin-bottom:16px; height:375px;" align="center">  
                          <img src="<?php echo $row["product_image"];?>" class="img-responsive" />  
                          <h3><?php echo $row["product_name"]; ?></h3>  
                          <h4>Price - <?php echo $row["product_price"]; ?></h4>  
                     </div>  
                </div>  
                <?php  
                     }  
                }  
                ?>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#min_price').change(function(){  
           var price = $(this).val();  
           $("#price_range").text("Product under Price Rs." + price);  
           $.ajax({  
                url:"load_product.php",  
                method:"POST",  
                data:{price:price},  
                success:function(data){  
                     $("#product_loading").fadeIn(500).html(data);  
                }  
           });  
      });  
 });  
 </script>

load_product.php


 <?php  
 //load_product.php  
 $connect = mysqli_connect("localhost", "root", "", "zzz");  
 if(isset($_POST["price"]))  
 {  
      $output = '';  
      $query = "SELECT * FROM product WHERE product_price <= ".$_POST['price']." ORDER BY product_price desc";  
      $result = mysqli_query($connect, $query);  
      if(mysqli_num_rows($result) > 0)  
      {  
           while($row = mysqli_fetch_array($result))  
           {  
                $output .= '  
                     <div class="col-md-4">  
                          <div style="border:1px solid #ccc; padding:12px; margin-bottom:16px; height:375px;" align="center">  
                               <img src="'.$row["product_image"].'" class="img-responsive" />  
                               <h3>'.$row["product_name"].'</h3>  
                               <h4>Price - '.$row["product_price"].'</h4>  
                          </div>  
                     </div>  
                ';  
           }  
      }  
      else  
      {  
           $output = "No Product Found";  
      }  
      echo $output;  
 }  
 ?>

5 comments: