AJAXリターン、ページ

Question

の更新テーブルには、私は私のデータベース内のすべてのレコードに対して生成され、次は

$allbills = mysql_query("SELECT * FROM outgoings WHERE outgoings.user_id = '$uid'") or die(mysql_error()); 

     echo "<table>"; 
     while($info = mysql_fetch_array($allbills)) 
     { 
     echo "<tr>"; 
     echo "<th>bill id:</th> <td>".$info['id'] . "</td> "; 
     echo "<th>total:</th> <td>".$info['bill'] . "</td> "; 
     echo "<th>bill name:</th> <td>".$info['bill_name'] . "</td> "; 
     echo "<th>bill deposit:</th> <td>".$info['bill_description'] . "</td> "; 
     echo "<th>colour:</th> <td>".$info['bill_colour'] . " </td>"; 
     echo "<th>edit:</th> <td> 

     <form class='bill-upd'> 
      <input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'> 
      <input type='hidden' value='".$info['id']."' name='billid' id='billid'> 
      Total <input type='text' id='total' name='total' /><br /> 
      Bill name<input type='text' id='bill-name' name='bill-name' /><br /> 
      bill descriptiion <input type='text' id='bill-description' name='bill-description' /><br /> 
      bill colour<input type='text' id='bill-colour' name='bill-colour' /> 
     <input type='button' value='submit' class='bill-upd-submit' /> 
     </form> 

     </td>"; 
     echo "</tr>"; 
     } 
     echo "</table>"; 

これはこれは一度AJAX

$(document).ready(function(){ 
    $(".bill-upd-submit").click(function() { 
     var elem = $(this); 
     $.post('update_bill.php', elem.parent('.bill-upd').serialize(), function(data) { 
      elem.append(data); 
     }); 
    }); 
}); 

を使用して、テーブルに自分のユーザレコードを更新していますしかし、ユーザーは結果を見るためにページをリフレッシュする必要があります。更新クエリが実行された後に最新のデータを使用して、ユーザーが編集したテーブルを作成する方法はありますか？

Answer 1

私は別のアプローチをしようとするだろう：

1）あなたのボタンの後に目に見えないのdiv権利を追加します。あなたは、動的にこれを行うことができます。

$(document).ready(function() { 
    $(".bill-upd-submit").after("<div style='display:none'></div>"); 
    // ... 
}); 

2）以下のように今、あなたのポストのイベントは次のようになります。

$(".bill-upd-submit").click(function() { 
     var elem = $(this); 
     $.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data) { 
      elem.next("div").html(data); 
     }); 
}); 

をところで、私は他のボタンが同じページにあることを仮定している、そしてそれはですidの代わりにclass（bill-upd-submit）を使う理由。ボタンが1つだけの場合、IDはより速くなります。また、請求書提出はタイプボタンであると思います。提出するタイプであれば、私はボタンに、それを変更したり、追加のクリックイベントに次のようになります。

function() { 
    // ... the code shown above 
    return false; 
}); 

これは、フォームのが起こることを提出しなくなります。

Answer 2

現在のjavascriptがテーブルではなくフォームを追加しようとしているように見えます。テーブルの一番下に行を追加して、他の行をすべて残しておきたい場合は、これが機能するかもしれません。

 $(".bill-upd-submit").click(function() { 
     $.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data){ 
     $("#table_id tr:last").after(data);    
     }); 
    }); 

そして、ちょうどあなたのPHPファイル（update_bill.phpが）のための適切なTRをエコーするためにそれに組み込まれた適切なHTMLを持っていることを確認してください：HTMLマークアップ（ここで私は、「table_idが」を使用）で、あなたのテーブルIDを与えます君は。