javascript - Use AJAX to sort MySQL search results -
i creating flight search page. there's form on first page, when submit button clicked, search results appear in second page.
this first page: http://www.projectmeteor.dx.am/flights.php
please following:
- select origin: guwahati
- select destination: kolkata
- click search fights
something should appear on second page.
now want sort results when click on headers(operator, departs,...).
i know have use ajax. i've seen few examples sort tables using ajax since one's not implemented using tables, i'm not able figure out how started.
please ask code, in case need it.
this first page(flights.php):
<div class="col-sm-12"> <div class="search"> <div class="content"> <form action="flightsearch.php" method="post"> <div class="radiocontainer"> <div class="col-sm-6 text-left"> <input type="radio" name="flighttype" value="one way" id="oneway"> <label for="oneway"><span class="radioleft">one way</span></label> <input type="radio" name="flighttype" value="return trip" id="returntrip" checked> <label for="returntrip"><span class="radioleft">return trip</span></label> </div> <div class="col-sm-6 text-right"> <input type="radio" name="flightclass" value="business class" id="businessclass"> <label for="businessclass"><span class="radioright">business class</span></label> <input type="radio" name="flightclass" value="economy class" id="economyclass" checked> <label for="economyclass"><span class="radioright">economy class</span></label> </div> </div> <!-- radiocontainer --> <div class="col-sm-6"> <div class="form-group"> <label for="origin">origin:<p> </p></label> <select id= "origin" data-live-search="true" class="selectpicker form-control" data-size="5" title="select origin" name="origin"> <option value="new delhi" data-subtext="del" data-tokens="del new delhi">new delhi</option> <option value="mumbai" data-subtext="bom" data-tokens="bom mumbai">mumbai</option> <option value="kolkata" data-subtext="ccu" data-tokens="ccu kolkata">kolkata</option> <option value="bangalore" data-subtext="blr" data-tokens="blr bangalore">bangalore</option> <option value="chennai" data-subtext="maa" data-tokens="maa chennai">chennai</option> <option value="pune" data-subtext="pnq" data-tokens="pnq pune">pune</option> <option value="goa" data-subtext="goi" data-tokens="goi goa">goa</option> <option value="guwahati" data-subtext="gau" data-tokens="gau guwahati">guwahati</option> <option value="gandhinagar" data-subtext="isk" data-tokens="isk gandhinagar">gandhinagar</option> <option value="jammu" data-subtext="ixj" data-tokens="ixj jammu">jammu</option> <option value="bhopal" data-subtext="bho" data-tokens="bhi bhopal">bhopal</option> <option value="agartala" data-subtext="ixa" data-tokens="ixa agartala">agartala</option> </select> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="destination">destination:<p> </p></label> <select id= "destination" data-live-search="true" class="selectpicker form-control" data-size="5" title="select destination" name="destination"> <option value="new delhi" data-subtext="del" data-tokens="del new delhi">new delhi</option> <option value="mumbai" data-subtext="bom" data-tokens="bom mumbai">mumbai</option> <option value="kolkata" data-subtext="ccu" data-tokens="ccu kolkata">kolkata</option> <option value="bangalore" data-subtext="blr" data-tokens="blr bangalore">bangalore</option> <option value="chennai" data-subtext="maa" data-tokens="maa chennai">chennai</option> <option value="pune" data-subtext="pnq" data-tokens="pnq pune">pune</option> <option value="goa" data-subtext="goi" data-tokens="goi goa">goa</option> <option value="guwahati" data-subtext="gau" data-tokens="gau guwahati">guwahati</option> <option value="gandhinagar" data-subtext="isk" data-tokens="isk gandhinagar">gandhinagar</option> <option value="jammu" data-subtext="ixj" data-tokens="ixj jammu">jammu</option> <option value="bhopal" data-subtext="bho" data-tokens="bhi bhopal">bhopal</option> <option value="agartala" data-subtext="ixa" data-tokens="ixa agartala">agartala</option> </select> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label for="datetime1">select departure date:<p> </p></label> <div class="input-group date" id="datetimepicker1"> <input id="datetime1" type="text" class="inputdate form-control" placeholder="select departure date" name="depart"/> <span class="input-group-addon"> <span class="fa fa-calendar"></span> </span> </div> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label for="datetime2">select return date:<p> </p></label> <div class="input-group date" id="datetimepicker2"> <input id="datetime2" type="text" class="inputdate form-control" placeholder="select return date" name="return"/> <span class="input-group-addon"> <span class="fa fa-calendar"></span> </span> </div> </div> </div> <div class="col-sm-3"> <label for="adults">no. of adults:<p> </p></label> <div class="form-group"> <select id= "adults" class="selectpicker form-control" data-size="5" title="aged 18 , above" name="adults"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> </div> <div class="col-sm-3"> <label for="children">no. of children:<p> </p></label> <div class="form-group"> <select id= "children" class="selectpicker form-control" data-size="5" title="aged upto 17" name="children"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> </div> <div class="col-sm-12 text-center"> <input type="submit" class="button" name="searchflights" value="search flights"> </div> </form> </div> <!-- content --> </div> <!-- search --> </div> this second page(flight_search.php):
<?php include("common/header.php"); ?> <?php $type=$_post["flighttype"]; $class=$_post["flightclass"]; $origin=$_post["origin"]; $destination=$_post["destination"]; $depart=$_post["depart"]; if($type=="return trip") { //let's store return value if flighttype return trip $return=$_post["return"]; } $adults=$_post["adults"]; $children=$_post["children"]; if($class=="economy class") $classname="economy"; else $classname="business"; ?> <div class="spacer">a</div> <div class="searchflights"> <div class="query"> <?php echo $type; ?> <?php echo $classname; ?> flights <?php echo $origin; ?> <?php echo $destination; ?> </div> <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "projectmeteor"; // creating connection projectmeteor mysql database $conn = new mysqli($servername, $username, $password, $dbname); // checking if we've connected database if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } $sql = "select * flights origin='$origin' , destination='$destination'"; $result = $conn->query($sql); if ($result->num_rows > 0) { ?> <div class="listitemmenucontainer"> <div class="col-sm-2 text-center"> <div class="headings"> operator </div> </div> <div class="col-sm-2 text-center"> <div class="headings"> departs </div> </div> <div class="col-sm-2 text-center"> <div class="headings"> arrives </div> </div> <div class="col-sm-2 text-center"> <div class="headings"> fare </div> </div> <div class="col-sm-2 text-center"> <div class="headings"> ticket type </div> </div> <div class="col-sm-2 text-center"> <div class="headings"> seats available </div> </div> </div> <!-- listitemmenucontainer --> <div class="spacerlarge">.</div> <!-- dummy class creating space --> </div> <!-- searchflights --> <?php while($row = $result->fetch_assoc()) { ?> <div class="searchflights"> <div class="listitem"> <!-- flight info starts --> <div class="col-sm-2 text-center"> <div class="col-sm-4 text-center"> <div class="operatorlogo text-center"> <img src="images/flights/operatorlogos/indigo.jpg"> </div> </div> <div class="col-sm-8 text-center"> <div class="values flightoperator"> indigo </div> <div class="flightnosubscript"> <?php echo $row["flight_no"]; ?> </div> </div> </div> <!-- flight info ends --> <!-- departs starts --> <div class="col-sm-2 text-center"> <div class="values departs"> 13:25 </div> <div class="departssubscript"> <?php echo $row["origin"]; ?> </div> </div> <!-- departs ends --> <!-- destination starts --> <div class="col-sm-2 text-center"> <div class="values arrives"> 15:49 </div> <div class="arrivessubscript"> <?php echo $row["destination"]; ?> </div> </div> <!-- destination ends --> <!-- fare starts --> <div class="col-sm-2 text-center"> <div class="values fare"> <?php echo $row["fare"]; ?> </div> <div class="faresubscript"> incl. of gst </div> </div> <!-- fare ends --> <!-- type starts --> <div class="col-sm-2 text-center"> <div class="values type"> refundable </div> <div class="typesubscript"> <?php echo $row["class"]; ?> </div> </div> <!-- type ends --> <!-- seats available starts --> <div class="col-sm-2 text-center"> <div class="values availabilitygreen"> <?php echo $row["seats_available"]; ?> </div> <div class="availabilitysubscript"> <input type="submit" class="availabilitybookingbutton" value="book now"> </div> </div> <!-- seats available ends --> </div> <!-- listitem 1 --> </div> <?php } } else { ?> <div class="searchflights"> <div class="noflights"> no flights found. please consider modifying search query. </div> </div> <?php } ?> <?php $conn->close(); //closing connection database ?> <div class="spacerlarge">.</div> <!-- dummy class creating space --> <?php include("common/footer.php"); ?> thanks
first need know better use 1 of solutions don't use ajax, becouse request going use in ajax going make new mysql query , server processing make html.
but if want use ajax have easy idea how it.
1- first need add jquery.js library code if haven't source, can download https://jquery.com/
2 - change code of headings to
<div class="headings" id="order1" data-id="operator"> operator</div> <div class="headings" id="order2" data-id="departs"> departs</div> also think need put results in general div should before while sentence , close after } div 1 should contain results divs when update page ajax going replace div content new content flightprocesor.php return.
<div id="results"> <!-- new tag --> <?php while($row = $result->fetch_assoc()) { ?> <div class="searchflights"> <div class="listitem"> ..... </div> </div><?php }?> </div> <!-- new tag --> 3 - read div order* event , dispatch ajax event
<script language="javascript"> $("div[id*=order]").on('click', function () { var column = $(this).attr('data-id'); var oneway = $('#oneway').val(); var returntrip = $('#returntrip').val(); ..... ..... $.ajax({ type:'post', url:"/flightprocesor.php", data: {orderby: column, oneway: oneway, returntrip: returntrip}, success:function(data) { if(data) { $('#results').html(data); } } }); }); </script> 4 - last step need make flightprocesor.php should make mysql query orderby parameter sending via post order , need create php $html var contain code return:
<?php if ($result->num_rows > 0) { $string_var = ""; //init string var. while($row = $result->fetch_assoc()) { $string_var .= '<div class="searchflights"> <div class="listitem"> <!-- flight info starts --> <div class="col-sm-2 text-center"> <div class="col-sm-4 text-center"> <div class="operatorlogo text-center"><img src="images/flights/operatorlogos/indigo.jpg"></div> </div> <div class="col-sm-8 text-center"> <div class="values flightoperator">indigo</div> <div class="flightnosubscript">'.$row["flight_no"].'</div> </div> </div> <!-- flight info ends --> <!-- departs starts --> <div class="col-sm-2 text-center"> <div class="values departs">13:25</div> <div class="departssubscript">'.$row["origin"].'</div> </div> <!-- departs ends --> <!-- destination starts --> <div class="col-sm-2 text-center"> <div class="values arrives">15:49</div> <div class="arrivessubscript">'.$row["destination"].'</div> </div> <!-- destination ends --> <!-- fare starts --> <div class="col-sm-2 text-center"> <div class="values fare">'.$row["fare"].'</div> <div class="faresubscript">incl. of gst</div> </div> <!-- fare ends --> <!-- type starts --> <div class="col-sm-2 text-center"> <div class="values type">refundable</div> <div class="typesubscript">'.$row["class"].'</div> </div> <!-- type ends --> <!-- seats available starts --> <div class="col-sm-2 text-center"> <div class="values availabilitygreen">'.$row["seats_available"].'</div> <div class="availabilitysubscript"><input type="submit" class="availabilitybookingbutton" value="book now"></div> <!-- maybe need identification value each row in submit --> </div> <!-- seats available ends --> </div> <!-- listitem 1 --> </div>'; } } else { $string_var = '<div class="searchflights"> <div class="noflights">no flights found. please consider modifying search query.</div> </div>'; } return $string_var; ?> edited: } close while need before return. edited: flight procesor php code added.
i hope you.
Comments
Post a Comment