-1

I have two php pages. The first page queries a database and places some data into a form The second page, grabs the data submited from the previous page and displays the data.

THE ISSUE: On the second page, the information is displayed in a table. At the end of each row, there is a "information" button that allows the user to click and see more details related to the data in that particular column. For some reason, the information button for every record in the table is holding the value of the first record returned in the database query. In other words no matter what button I click on in the table, it always relates to the first record returned in the query.

I'm hoping someone can help me find a solution to linking each "information" button to each unique record. In other words If I click the info button in row one, it will display the data for the record related to row 1...etc. Here's my code.

PAGE 1

<?php

$query = mysql_query ("SELECT  * from cust_data group by cabinet_number ORDER by cabinet_number ASC");

WHILE ($rows = @mysql_fetch_array($query)) {

    if (($rows['account_number']=="") &&
        ($rows['customer_first_name']=="") &&
        ($rows['customer_last_name']=="") &&
        ($rows['company_name']=="")) {

        echo '<form method="GET" action="cabinet_result_page.php">
                <input type="hidden" value="'.$rows['cabinet_number'].'" name="cabinet_number">
                <input type="hidden" value="'.$rows['company_name'].'" name="company_name">
                <img src="images/bulletpoint_green.png">
                <input type="submit" value="'.$rows['cabinet_number'].'" name="'.$rows['cabinet_number'].'" id="submit">
              </form>';

    } else if ($rows['cabinet_number']!=="") {

        echo '<form method="GET" action="cabinet_result_page.php">
                      <input type="hidden" value="'.$rows['cabinet_number'].'" name="cabinet_number">
                      <input type="hidden" value="'.$rows['company_name'].'" name="company_name">
                      <img src="images/bulletpoint_red.png">
                      <input type="submit" value="'.$rows['cabinet_number'].'" name="'.$rows['company_name'].'" id="submit">
              </form>';
    }
  }
}

PAGE 2: GRABS THE DATA IN PAGE ONE AND PLACES IT IN A TABLE. WHEN THE 'INFO' BUTTON IS CLICKED, MORE INFORMATION IS DISPLAYED IN A JQUERY POPUP

db_connect();

$cabinet_number = $_GET['cabinet_number'];
$company_name = $_GET['company_name'];
$query = @mysql_query ("SELECT * FROM cust_data WHERE cabinet_number = '$cabinet_number' ");

WHILE ($rows = @mysql_fetch_array($query)) {

    echo'<tr>
            <td><font size="4">'; echo $rows['account_number']; echo'</font></td>
            <td><font size="4">'; echo $rows['customer_first_name']; echo '</font></td>
            <td><font size="4">'; echo $rows['customer_last_name']; echo '</font></td>
            <td><font size="4">'; echo $rows['company_name']; echo '</font></td>
            <td><font size="4">'; echo $rows['cabinet_number']; echo'</font></td>
            <td><font size="4">'; echo $rows['key_tag_number']; echo'</font></td>';

    if ($rows['switch_and_port1'] =="") {

        echo '';

    } else if ($rows['switch_and_port1'] !== "") {

        echo '<td><font size="4">';
        echo '<input type = "image" src= "images/view_details.png" height="16" width="16" class="my_modal_open">', '</font></td>';

    }

    {
        echo '<td><font size="4">'; echo '<input type = "image" src= "images/view_details.png" height="16" width="16" class="my_modal_open">', '</font></td>';
    }

    echo '</tr>';
    echo '<div  class="well" style="display:none;margin:1em;" class="my_modal">';
    echo '<img src="images/hdc_logo_transparent.png"><br>';
    echo '<div style="height:23px; width:100%; background-color:black"> <h4><font color="#FFFFFF">','&nbsp; ', 'Cabinet: ', $id, '</font></h4></div>';
    echo '<p>';
    echo '<br>';
    echo '<img src="images/bulletpoint_orange.png">';
    echo 'Power: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['power_circuit'];
    echo '<br>';
    echo'<img src="images/bulletpoint_orange.png">';
    echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port1'];

    if ($rows['switch_and_port2'] =="") {

        echo '';

    } else if ($rows['switch_and_port2'] !== "") {
        echo '<br>';
        echo '<img src="images/bulletpoint_orange.png">';
        echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port2'];
    }

    if ($rows['switch_and_port3'] =="") {

        echo '';

    } else if ($rows['switch_and_port3'] !== "") {

        echo '<br>';
        echo '<img src="images/bulletpoint_orange.png">';
        echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port3'];
    }

    if ($rows['switch_and_port4'] =="") {

        echo '';

    } else if ($rows['switch_and_port4'] !== "") {

        echo '<br>';
        echo '<img src="images/bulletpoint_orange.png">';
        echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port4'];
    }

    echo '</p>';
    echo'</div></form>';

}
echo'<script>
                $(document).ready(function() {
                $(".my_modal_open").click(function(){
                $(this).closest("tr").next(".my_modal").popup({"autoopen": true});
                });
                });
                });
                </script>
                </body>
                </html>';
}
4

1 回答 1

0

问题是您为所有模式设置了相同的 id 属性(这是无效的 HTML 标记),并期望按钮上的单击处理程序确定要打开哪个模式。

更新

您的标记的另一个问题是您不能将<div>s 作为表格行的兄弟,这会产生意想不到的结果,因为浏览器会尝试修复标记并重新排列元素,您可以将 div 放在 td 内或使用第二个循环来构建它们。

现在我还在你的弹出插件中做了一些挖掘,我必须说它实现得不是很好,我建议你再找一个。话虽这么说,我确实设法让它工作,这就是你需要做的:

  1. 为每个模态 div 设置一个唯一的 id,如果您的数据库数据中有某种 id,您可以使用它,如果没有,那么您可以在循环内设置一个计数器变量:

    echo '<div class="well" id="my_modal'.$rows['id'].'">';
    
  2. 使用与应该打开模式但添加“_open”作为后缀的按钮的类相同的 id:

    echo '<input type = "image" src="images/view_details.png" height="16" width="16" class="my_modal'.rows['id'].'_open">
    
  3. 您现在可以在 div 上初始化弹出插件,它会自动将打开操作分配给相应的按钮:

    echo'<script>
         $(document).ready(function () {
             $("[id^=\'my_modal\']").each(function () {
                 $(this).popup();
             });
         });
         </script>';
    

那应该可以解决模态问题,这是一个工作演示

现在我对您的代码也有一些观察:

  1. 你应该避免使用内联样式,正如我之前提到的,<font>标签应该被替换为正确的 CSS,我还建议使用 CSS padding/margin 在单词之间添加空格而不是&nbsp;&nbsp;&nbsp;&nbsp;

  2. 这种类型的代码:

    if ($rows['switch_and_port1'] =="") {
        echo '';
    } else if ($rows['switch_and_port1'] !== "") {
        echo 'SOME CONTENT';
    }
    

    可以优化为:

    if ($rows['switch_and_port1'] !== "") {
        echo 'SOME CONTENT';
    }
    

    回显一个空字符串不会产生任何输出,也不需要 elseif

于 2013-09-08T06:19:31.197 回答