php - my ajax response only works in first table row -
im new ajax , need one. dont have idea how solve this, here problem: want ajax response show made changes on select box inside table. solved how pop out select box whenever select in first select box problem happens in first table row of table. ajax code:
<script type="text/javascript"> function guest() { var rooms = document.getelementbyid("select_rooms").value; var = document.getelementbyid("room_type").value; var url = "guest.php?rooms="+rooms+"&id="+some; var method = "get"; if (window.xmlhttprequest) { xmlhttp=new xmlhttprequest(); } else { xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("guest").innerhtml = xmlhttp.responsetext; } } xmlhttp.open(method, url, true); xmlhttp.send(null); document.getelementbyid("guest").innerhtml = "loading..."; } </script> and table:
<table> <?php $query_roomtype = mysql_query("select * tb_category"); while($row_type = mysql_fetch_array($query_roomtype)){ $query2 = mysql_query("select sum(no_of_room) sum tb_reserve status != 'checkout' , arrival < '$end' , departure > '$start' , category_id = '$row_type[category_id]' or status != 'cancelled' , arrival < '$end' , departure > '$start' , category_id = '$row_type[category_id]'"); $sum_query2 = mysql_fetch_assoc($query2); $ar = $row_type['max_room'] - $sum_query2['sum']; ?> <tr> <td style='width: 40%;'> <h4><?php echo $row_type['category_name']; ?></h4> <img src='<?php echo $row_type['photos']; ?>' width='250' style='border-radius: 5px; border: 2px solid #999;'> <br /><br /> <p style="text-align: left;"> occupancy: <u><?php echo $row_type['max_guest']; ?> guest </u><br /> size: <u><?php echo $row_type['size']; ?> </u><br /> price: <u><?php echo number_format($row_type['price'], 2, '.', ','); ?></u> <br /> </p> </td> <td style="text-align: left;"> <?php echo $row_type['description']; ?> <hr> available rooms: <?php echo $ar . " / " . $row_type['max_room']; ?><br /> <div class="contact-wrap"> <div class="main-reservation-form-caption">select no. of rooms: </div> <div class='select-styling-wrap1' style="border: 1px solid #999; width: 50px;"> <select style="width: 50px; border: 1px solid #999; height: 40px;" id="select_rooms" name="select_rooms" onchange="guest()"> <option value="">0</option> <?php $i = 1; while($i <= $ar){ echo "<option value='$i'>$i</option>"; $i++; } ?> </select> </div> </div> <div style="clear:both"></div> <div class="guest-wrap"> <div id="guest" class="guest"> </div> </div> </td> <?php } ?> </tr> </table>
do not use mysql_ functions
they deprecated. right vulnerable sql injection attacks. please read on either mysqli or pdo. really, important.
only make 1 query database
right making 1 query database per room type. causes unnecacary load on database , makes code slow. not important above point, still worth fixing. use group by:
select sum(tb_reserve.no_of_room) sum, [all fields tb_category want] tb_reserve, tb_category tb_category.category_id = tb_reserve.category_id , [all other conditions] group tb_category.category_id your question
you changes first row of table because of select boxes , guest divs have same id - select_rooms , guest. getelementbyid returns first element id, 1 in first row.
the solution give them different ids, select_rooms_1, select_rooms_2 , son on, , guest_1, guest_2 , on. need inform guest() function row change. can done in many ways.
one way change onchange attribute on every row instead of onchange="guest()" says onchange="guest(1)", onchange="guest(2)" , on. then, change guest() function take parameter:
function guest(room_number) { var rooms = document.getelementbyid("select_rooms_" + room_number).value; ... another way figure out row on using refernce element triggered event, either looking @ id or cutom data-row-number attribute:
<select id="select_rooms_1" data-row-number="1" ...> to able information need reference element fired onchange event. if add event using javascript instead of using inline onclick attribute have access variable this inisde guest() function, this:
var row_number = this.getattribute("data-row-number"); var rooms = document.getelementbyid("select_rooms_" + row_number).value; also, might easier write code using javascript library, jquery.
Comments
Post a Comment