0

このような単純な Web ページがあります。

ここに画像の説明を入力

Load ボタンをクリックすると、コンボボックスの下に小さなフォームが表示されます (そのフォームに与えられた 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()ハンドラー内で使用する必要があり#loadます。

于 2012-09-20T09:07:55.777 に答える
1

この問題は、ページをサーバーに POST し、応答をリロードする送信ボタンが原因で発生します (これにより、フォームを非表示にする行が実行されます)。

これを変更するか、

<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

それは、次の 2 つのステートメントが原因です。

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

これらは、ページが読み込まれるたびに実行されます。これは、Ajax でうまく解決できるものです。

完全なポストバックを使用してこれを解決したくない場合は、表示されているものと表示されていないものを含め、正しい html がサーバー側で処理されるようにする必要があります。

于 2012-09-20T09:12:51.517 に答える