我的ajax响应仅适用于第一个表行

时间：2015-07-05 15:10:23

标签： php ajax

我是ajax的新手，我真的需要帮助。我真的不知道如何解决这个问题，这是我的问题：我希望我的ajax响应只显示我在表格中的选择框上进行更改的位置。每当我在第一个选择框中选择时，我已经解决了如何弹出另一个选择框但问题是它只发生在我表的第一个表行中。 我的ajax代码：

<script type="text/javascript">
 function guest() {

        var rooms = document.getElementById("select_rooms").value;
        var some = 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>

和我的桌子：

                        <table>
                            <?php
                                    $query_roomtype = mysql_query("select * from tb_category");
                                    while($row_type = mysql_fetch_array($query_roomtype)){
                                        $query2 = mysql_query("select sum(no_of_room) As sum from tb_reserve where status != 'Checkout' AND arrival < '$end' AND departure > '$start' AND category_id = '$row_type[category_id]' OR status != 'Cancelled' AND arrival < '$end' AND departure > '$start' AND 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>

1 个答案:

答案 0 :(得分：0)

不要使用mysql_函数

他们已被弃用。现在你很容易受到SQL injection attacks的攻击。请阅读MySQLi或PDO。这非常非常重要。

仅对数据库进行一次查询

现在，您正在为每种房型进行一次数据库查询。这会导致数据库上出现不必要的负载并使代码变慢。不像上面那么重要，但仍然值得修复。使用GROUP BY：

SELECT
  SUM(tb_reserve.no_of_room) AS sum,
  [all the fields from tb_category you want]
FROM tb_reserve, tb_category
WHERE
  tb_category.category_id = tb_reserve.category_id AND
  [all your other conditions]
GROUP BY tb_category.category_id

您的问题

您只能更改表格的第一行，因为您的所有选择框和来宾div都具有相同的ID - select_rooms和guest。 getElementById只返回带有该ID的第一个元素，即第一行中的ID。

解决方案是为他们提供不同的ID，例如select_rooms_1，select_rooms_2和儿子，同样guest_1，guest_2等等。然后，您需要通知guest()函数有关要更改的行。这可以通过多种方式完成。

一种方法是简单地更改每一行的onchange属性，而不是onchange="guest()"，而是onchange="guest(1)"，onchange="guest(2)"等等。然后，您更改guest()函数以获取该参数：

function guest(room_number) {
  var rooms = document.getElementById("select_rooms_" + room_number).value;
  ...

另一种方法是通过查看触发事件的元素，通过查看其id或cutom data-row-number属性来确定您正在使用哪一行：

<select id="select_rooms_1" data-row-number="1" ...>

为了能够获取该信息，您需要引用触发onchange事件的元素。如果您add the event using JavaScript而不是使用内联onclick属性，则可以使用this函数访问变量guest()，因此您可以执行以下操作：

var row_number = this.getAttribute("data-row-number");
var rooms = document.getElementById("select_rooms_" + row_number).value;

此外，使用JavaScript库编写此代码可能更容易，例如jQuery。

相关问题
最新问题