javascript - How to create FILTER BY LOCATION (Using checkboxes) engine using php and ajax -


i have few checkboxes on hotels webpage . want make simple filter location filter engine . ---here image

the result should combination of checkboxes. problem have tried code this way couldnt achive wanted.when check on first checkbox shows result same when uncheck displayed data doesnt change default. need add sql queries dont know add (logic). please ... here html - 

<div class="container main-section" id="main">         <div class="row">             <div class="col-md-4">                 <h4>filter location </h4>                 <input type="checkbox" id="calangute" name="calangute" />                 <label for="calangute"> calangute</label><br>                 <input type="checkbox" id="baga" name="baga">                 <label for="baga"> baga</label><br>                 <input type="checkbox" id="morjim" name="morjim">                 <label for="morjim"> morjim</label><br>                 <input type="checkbox" id="candolim" name="candolim">                 <label for="candolim"> candolim</label><br>                 <input type="checkbox" id="anjuna" name="anjuna">                 <label for="anjuna"> anjuna</label><br>             </div>         </div>     </div>     <div class="display">     </div>

here jquery--

$(document).ready(function(){ getallrooms(); // getting data on page load function getallrooms(){     $.ajax({         url:'action.php',         method: 'post',         data:{rooms:1},         success:function(response){             $('.display').html(response);         }     }); }

//here getting data on checking checkboxes

function getrooms(){         var calangute = $('#calangute').is(':checked') ? 'calangute' : '';         var baga = $('#baga').is(':checked') ? 'baga' : '';         var morjim = $('#morjim').is(':checked') ? 'morjim' : '';         var candolim = $('#candolim').is(':checked') ? 'candolim' : '';         var anjuna = $('#anjuna').is(':checked') ? 'anjuna' : '';         $.ajax({             url: 'action.php',             method: 'post',             data: {                 calangute  : calangute,                 baga : baga,                 morjim : morjim,                 candolim : candolim,                 anjuna : anjuna,             },             success:function(response){                 $('.display').html(response);             }         });       }     $('#calangute').change(function(){         getrooms();     });     $('#baga').change(function(){         getrooms();     });     $('#morjim').change(function(){         getrooms();     });     $('#candolim').change(function(){         getrooms();     });     $('#anjuna').change(function(){         getrooms();     });   });

here php --

   <?php $conn=mysqli_connect('localhost','cms_user','12345','rooms');  // getting data on page load if (isset($_post['rooms'])){     if (isset($_post['rooms'])){         $query_all = "select * rooms order rand() ";     }         $query_run = mysqli_query($conn,$query_all);     if (mysqli_num_rows($query_run)>0){         while ($row = mysqli_fetch_array($query_run)){             $room_id = $row['id'];             $room_name = $row['name'];             $location = $row['location'];             $stay_type = $row['stay_type'];             $room_type = ucfirst($row['room_type']);             $image = $row['image'];             $price = $row['price'];              echo "             <div class='container rooms'>             <div class='row'>             <div class='col-md-4'>             <img src='img/$image' alt='room' width='100%'>         </div>         <div class='col-md-6'>             <h2>$room_name</h2>             <p>$stay_type</p>             <h4 class='text-success'>$location</h4>          </div>         <div class='col-md-2'>            <br><br><br><br>             <h4 class='text-primary'>$room_type</h4>             <h4>rs : $price </h4>            <a href='#'><input type='submit' name='book' value='book now' class='btn btn-success'></a>         </div>             </div></div>             ";         }     } else {         echo "<center><h3>no properties available</h3></center>";     }  }  //this getting data filtered checkboxes  if (isset($_post['calangute'])){     $query = "select * rooms location = 'calangute' ";     $run = mysqli_query($conn, $query);     if (mysqli_num_rows($run)>0){         while ($row = mysqli_fetch_array($run)){             $room_id = $row['id'];             $room_name = $row['name'];             $location = $row['location'];             $stay_type = $row['stay_type'];             $room_type = ucfirst($row['room_type']);             $image = $row['image'];             $price = $row['price'];              echo "             <div class='container rooms'>             <div class='row'>             <div class='col-md-4'>             <img src='img/$image' alt='room' width='100%'>         </div>         <div class='col-md-6'>             <h2>$room_name</h2>             <p>$stay_type</p>             <h4 class='text-success'>$location</h4>          </div>         <div class='col-md-2'>            <br><br><br><br>             <h4 class='text-primary'>$room_type</h4>             <h4>rs : $price </h4>            <a href='#'><input type='submit' name='book' value='book now' class='btn btn-success'></a>         </div>             </div></div>             ";         }     }else {         echo "<center><h3>no properties available search </h3></center>";     } }  ?>

  1. never order rand() if don't need random order, quereis not cached.

  2. doing bunch of ifs not best idea. imagine you'll have 400 filters on page. how code like? :)

here how that:

wrap filter values in container:

$.ajax({     url: 'action.php',     method: 'post',     data: {         locations: {             calangute  : calangute,             baga : baga,             morjim : morjim,             candolim : candolim,             anjuna : anjuna,         }     },     success:function(response){         $('.display').html(response);     } });

then on server side:

<?php  // remove empty values $filter = isset($_post['locations']) ? array_filter($_post['locations']) : [];  $query = empty($filter)     ? "select * rooms"     : "select * rooms location in ('".implode("', ", $filter)."')";  $run = mysqli_query($conn, $query); if (mysqli_num_rows($run) > 0) {// display data }

and several more things, not directly relevant:

  1. consider using pdo
  2. my example doesn't include data sanitation , validation.

Comments

Post a Comment

Popular posts from this blog

python - Operations inside variables -

this question has answer here: evaluating mathematical expression in string 12 answers i want make python script finds maximum possible output using 2 operations. problem says there syntax error @ 2nd last line, in b in there. how can fix it? x = 0 = int(input("1st number:")) c = int(input("2nd number:" )) e = int(input("3rd number:" )) in range(4): if == 0: b = "+" elif == 1: b = "-" elif == 2: b = "/" else: b = "*" j in range(4): if j == 0: d = "+" elif j == 1: d = "-" elif j == 2: d = "/" else: d = "*" k = b c d e print(k) if you're after variables e on single line, couldn...
Read more

Generic Map Parameter java -

i having lot of methods of type: public static list<eduusers> getdetails(class c, map<string, integer> params) { list<eduusers> details = null; session session = hibernateutil.getsessionfactory().opensession(); transaction tx = null; try { tx = session.begintransaction(); criteria cr = session.createcriteria(c); (map.entry<string, integer> entry : params.entryset()) { cr.add(restrictions.eq(entry.getkey(), entry.getvalue())); } details = cr.list(); tx.commit(); } catch (exception asd) { log.debug(asd.getmessage()); if (tx != null) { tx.commit(); } } { session.close(); } return details; } i trying have generic method them , have written far: public static <t> list<t> getdetails(class<t> c, class<t> b) { l...
Read more

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -

what arrayindexoutofboundsexception mean , how rid of it? here code sample triggers exception: string[] name = {"tom", "dick", "harry"}; for(int = 0; i<=name.length; i++) { system.out.print(name[i] +'\n'); } your first port of call should documentation explains reasonably clearly: thrown indicate array has been accessed illegal index. index either negative or greater or equal size of array. so example: int[] array = new int[5]; int boom = array[10]; // throws exception as how avoid it... um, don't that. careful array indexes. one problem people run thinking arrays 1-indexed, e.g. int[] array = new int[5]; // ... populate array here ... (int index = 1; index <= array.length; index++) { system.out.println(array[index]); } that miss out first element (index 0) , throw exception when index 5. valid indexes here 0-4 inclusive. correct, idiomatic for statement here be: for (int index = 0; index <...
Read more