0

jQuery Ajax を使用して以下のフォームを送信するたびに、自動更新テーブルを作成したいと考えています。

これが私のフォームです

<form id="submitDataToElection">
  <table border="0">
  <tr>
    <td><label for="electionName">Election Name:</label></td>
    <td><input type="text" name="electionName" id="electionName" spellcheck="true" required></td>
  </tr>
  <tr>
    <td><label for="electionDate">Election Date:</label></td>
    <td><input type="text" name="electionDate" id="electionDate" required></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="Reset" type="reset" value="Reset" id="resetInAddElection"><input type="submit" value="Submit" id="submitInAddElection"></td>
  </tr>
  </table>
</form>

フォームの jQuery

$("#submitDataToElection").submit(function(event) {
    $("#resetInAddElection, #submitInAddElection").attr("disabled",true);
    event.preventDefault();
    var values = $(this).serialize();
    $.ajax({
      url: "storeDataToElection.php",
      type: "post",
      data: values,
      success: function(data){
          $('#addElection').dialog('close');              alert(data);
          $("#resetInAddElection, #submitInAddElection").attr("disabled",false);
          $("#electionName,#electionDate").val("");
          $("#electionName").focus();
      },
      error:function(data){
          $("#resetInAddElection, #submitInAddElection").attr("disabled",false);
          alert("failure");
      }   
    }); 
});

ここに storeDataToElection.php のコードがあります

mysql_connect("localhost", "root", "");
mysql_select_db("automated_election");
$name = $_POST['electionName'];
$date = $_POST['electionDate'];

mysql_query("UPDATE election SET is_active = 'no' WHERE is_active = 'yes'")or die(mysql_error());
$insert = mysql_query("INSERT INTO election
    (election_name ,
    election_date ,
    is_active)
    VALUES('$name', '$date', 'yes')");
if(!$insert) die(mysql_error());
else die("Success");

これが自動更新したいテーブルです

$result = mysql_query("SELECT * FROM election WHERE is_active = 'yes'");
echo '<hr><table style="font-size:14px;" id="viewElectionTable">';
while ($data = mysql_fetch_assoc($result)) {
    $date = explode("-",$data['election_date']);
    switch($date[1]){
        case 1:
            $month = "January";
            break;
        case 2:
            $month = "February";
            break;
        case 3:
            $month = "March";
            break;
        case 4:
            $month = "April";
            break;
        case 5:
            $month = "May";
            break;
        case 6:
            $month = "June";
            break;
        case 7:
            $month = "July";
            break;
        case 8:
            $month = "August";
            break;
        case 9:
            $month = "September";
            break;
        case 10:
            $month = "October";
            break;
        case 11:
            $month = "November";
            break;
        case 12:
            $month = "December";
            break;
    }
    echo '<tr>';
    echo "<td>Election Name: &nbsp;&nbsp;</td><td>".$data['election_name'].'</td>';
    echo '</tr><tr>';   
    echo "<td>Election Date: &nbsp;</td><td>".$month." ".$date[2].", ".$date[0].'</td>';
    echo '</tr>'; 
}
echo '</table><hr>';
4

1 に答える 1

1

一般的な考え方は、ajax がヒットしたファイルを使用して、新しいテーブル HTML を出力することです。次に、ajax 呼び出しに返された HTML 出力を使用して、ページ上の既存のテーブルを置き換えます。

例えば：

更新するテーブルを div 内に配置し、その div に参照する ID を指定します。以下の私の例では、私は使用しています

<div id="tableHolder"><!-- TABLE GOES HERE --></div>

storeDataToElection.php で、データベースに書き込んだ後、新しいテーブル HTML を出力します。この HTML 出力は、ajax 呼び出しの「成功」関数に返されます。

次に、次のようにしてテーブルを新しいコンテンツに置き換えることができます。

success : function(updatedTable) {
  ...
  $('div#tableHolder').html(updatedTable);
  ...
}
于 2013-01-15T19:51:00.977 に答える