5

内部にフォームが設​​定されたdivが設定されており、ajaxを使用して投稿するように設定されており、そのようにdivに結果を返します

$(document).ready(function(){
    $("#guestList").validate({
        debug: false,
        submitHandler: function(form) {
            // do other stuff for a valid form
            //$('form').attr('id', 'guestList1')
            $.post('brides_Includes/guestlistDisplay1.php', $("#guestList").serialize(), function(data) {
                $('#results').html(data)
                $("form#guestList")[0].reset();
            });
        }
    });
});

結果が戻ってくると、正しい変更が表示され、フォームが置き換えられます。ただし、フォームを再度投稿すると。関連する変更は適切に行われますが、ページが更新され、投稿された情報がアドレス バーに表示されます。

フォームを投稿して置き換えて、これが起こらないように投稿してスクリプトを再度呼び出すにはどうすればよいですか?

4

1 に答える 1

3

ajax を使用してフォームを返す際の問題は、既にページにある JavaScrip コードが新しいフォームを認識/利用しないことです。これを回避する最善の方法は、ajax を使用して JavaScrip と HTML を戻すことです。

基本的に、新しいフォームを返すたびに以下のコードを返します。IDとリンク (brides_Includes/guestlistDisplay1.php)を更新する必要があります。メイン ページのコードもこのコードに置き換える必要があります。これは、返された JavaScrip を実行するために必要なためです。

<script type="text/javascript">
$(document).ready(function(){
  $("#guestList").validate({
    debug: false,
    submitHandler: function(form) {
      // do other stuff for a valid form
      //$('form').attr('id', 'guestList1')
      $.post('brides_Includes/guestlistDisplay1.php', $("#guestList").serialize(), function(data) {
        $('#results').html(data);

        //This executes the JavaScript passed back by the ajax.
        $("#results").find("script").each(function(i) {
          eval($(this).text());
        });

        $("form#guestList")[0].reset();
      });
    }
  });
});
</script>
于 2013-01-27T15:03:29.537 に答える