0

我有一个看起来像这样的简单网页。

在此处输入图像描述

单击“加载”按钮时，它应该在组合框下显示一个小表单（该表单的 id 是frmUpdateService）。

问题是当我单击加载按钮时，它会显示表单，但出现后立即消失！

这是页面的 HTML 代码。

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body id="body_services">

<?php

include_once 'DatabaseHandler.php';
$db = DatabaseHandler::getInstance();

//loading taxi service names for updating combobox
$queryLoadSids = $db->prepare("SELECT * FROM taxi_services ORDER BY SID");
$queryLoadSids->execute();
$dropdown = "<select name='serviceID'>";
while ($row = $queryLoadSids->fetch(PDO::FETCH_ASSOC))
{
    $dropdown .= "\r\n<option value='{$row['SID']}'>{$row['Name']}</option>";
}
$dropdown .= "\r\n</select>";

?>

<?php

if(isset($_POST['btnload']))
{
    $param = $_POST['serviceID'];

    $queryLoadToUpdate = $db->prepare("SELECT * FROM taxi_services WHERE SID = :serviceID");
    $queryLoadToUpdate->bindParam(':serviceID', $param, PDO::PARAM_STR);
    $queryLoadToUpdate->execute();
    $results = $queryLoadToUpdate->fetchAll(PDO::FETCH_ASSOC);

    $loadedSID = $results["SID"];
    $loadedName = $results["Name"];
    $loadedCost = $results["Cost"];
    $loadedActive = $results["Active"];
}

?>

<div id="tasks">
    <ul>
        <li><a id="add" href="#">Add a new taxi service</a></li>
        <li><a id="update" href="#">Update a taxi service</a></li>
        <li><a id="delete" href="#">Delete a taxi service</a></li>
        <li><a id="view" href="#">View taxi services</a></li>
    </ul>
</div>

<form id="cmbServiceIDs" name="sids">
<table width="380" border="0">
  <tr>
    <td><label for="serviceId">Select the Service ID</label></td>
    <td><?php echo $dropdown; ?></td>
    <td><input id="load" type="submit" value="Load" name="btnload" /></td>
  </tr>
</table>
</form>

<form id="frmUpdateService" name="Update" action="" method="post">
<table width="300" border="0">
  <tr>
    <td><label for="sid">Service ID</label></td>
    <td><input type="text" name="sid" value="<?php echo $loadedSID; ?>" /></td>
  </tr>
  <tr>
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" value="<?php echo $loadedName; ?>" /></td>
  </tr>
  <tr>
    <td><label for="cost">Cost</label></td>
    <td><input type="text" name="cost" value="<?php echo $loadedCost; ?>" /></td>
  </tr>
  <tr>
    <td><label for="active">Active</label></td>
    <td><input type="checkbox" name="active" value="<? echo $loadedActive; ?>" <?php echo $loadedActive ? 'checked="checked"' : ''; ?> /></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
  </tr>
</table>
</form>

</body>
</html>

我使用 jQuery 来显示/隐藏效果。

$(function()
{
    $("#frmUpdateService").hide();
    $("#cmbServiceIDs").hide();

    $("#update").click(function()
    {
        $("#cmbServiceIDs").slideDown("slow");
        $("#frmUpdateService").hide();
    });
    $("#load").click(function()
    {
        $("#frmUpdateService").fadeIn("slow");
    });
});

谁能解释为什么会发生这种情况以及如何纠正它？

谢谢你。

4

3 回答 3

2

该#load按钮执行您所要求的操作，然后继续提交页面，刷新所有内容。您应该使用普通按钮或某种可点击的 div，或者preventDefault()在按钮的 clickhandler 中使用#load。

于 2012-09-20T09:07:55.777 回答
1

问题是由提交按钮引起的，该按钮将页面发布到服务器，并重新加载响应（这会导致隐藏表单的行运行）。

要么改变这个

<input id="load" type="submit" value="Load" name="btnload" />

对此

<input id="load" type="button" value="Load" name="btnload" />

或将您的点击事件更改为以下内容：

$("#load").click(function(e)
{
    $("#frmUpdateService").fadeIn("slow");
    e.preventDefault();
});
于 2012-09-20T09:08:53.827 回答
0

是因为这两个说法：

$("#frmUpdateService").hide();
$("#cmbServiceIDs").hide();

他们在每个页面加载时执行。这可以通过 Ajax 很好地解决。

如果你不想使用完整的回发来解决这个问题，你应该确保正确的 html，包括可见和不可见的内容都得到了服务器端的照顾。

于 2012-09-20T09:12:51.517 回答