0

添付のスニペットのようなPHPファイルにHTMLフォームがあります。

[詳細を保存]ボタンを押すと、ページにjQueryUIモーダルダイアログが読み込まれます。そのダイアログは、 Ajaxを介してコントローラーアクション（例：savedetails）を実行します。基本的に、コントローラーアクションは「frmEmployees」のすべてのPOST詳細を取得し、Ajaxを介してデータベースに変更を保存します。

Ajaxコンテンツを含むダイアログをロードするロジックに興味があります（コントローラーアクションを介してすべてのPOST変数を取得します。たとえば、Ajaxを介して「/ public / empdetailcontroller」と言います）。これまでのところ、以下のHTMLのようなものがあります。

何か案は？

スニペット：

    <form name="frmEmployees" id="frmEmployees" method="POST" action="">
        <table>
            <tr><td>Name:</td><td><input type="text" name="empName" size="50"></td></tr>
            <tr><td>City:</td><td><input type="text" name="empCity" size="50"></td></tr>
            <tr><td>Country:</td><td><input type="text" name="empCountry" size="50"></td></tr>
            <tr><td colspan=2 align=center><input type="button" name="btnsubmit" value="Save Details"></td></tr>
        </table>
    </form>

    <div id="dialogSaveChanges"
         title="Saving.."
         style="display:none;"><p><span
           class="ui-icon
           ui-icon-info"
           style="float:left; margin:0 7px 20px 0;"
           ></span><span id="dialogText-savechanges"></span></p></div>

    <script language="JavaScript>
        $(document).ready(function() {
            $('#dialogSaveChanges').dialog({
                        autoOpen: false,
                        width: 400,
                        modal: true,
                        title: titleText,
                        closeOnEscape: false,
                        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
                        resizable: false,
                buttons: {
                    Ok: function() {
                        $(this).dialog('close');
                    }
                }
            });
            $('#btnSaveChanges').click(function() {
                $('#dialogSaveChanges').dialog('open');
                $("span#dialogText-savechanges").html("Your Changes have been saved successfully.");
            });
        });
    </script>
4

2 に答える 2

1

フォームの値を送信するには、フォームを送信する必要があります。ロジックは次のようになります。

  1. 関数（submitFormなど）をフォームの送信イベントにバインドし、通常の（AJAX以外の）フォーム送信を防ぐためにfalseを返します。
  2. submitForm関数は$.ajax呼び出しを行います。
  3. AJAX呼び出しは、リクエストが送信される前にダイアログを開くように構成されています（イベント：beforeSend）。
  4. ダイアログボックスに「読み込み中...」というテキスト/画像が表示されます。
  5. ajax呼び出しが成功または失敗すると（イベント：成功/失敗）、ダイアログボックスに結果またはエラーメッセージが表示されます。

コードは次のようになります。

$('#frmEmployees').submit( function() {
  $.ajax({
    url: this.attr('action'), // Make sure your form's action URL is correct.
    method: 'POST',
    data: this.serialize(), // this = $('#frmEmployees')
                            // Add hidden form inputs to send any control
                            // parameters to your server script.
    beforeSend: openDialogFunction,
    success: handleFormSuccess,
    failure: handleFormFailure
  });

  return false; // prevent normal form submission.
});

このようにプログラムすると、ページはjavascriptなしでも機能し、ダイアログボックスが表示されなくなります。

于 2009-12-11T16:43:50.940 に答える
0

あなたがやろうとしていることを完全に理解できるかどうかはわかりませんが、試してみましょう...

したがって、次のことを行います。

  1. フォームの詳細を AJAX 経由でコントローラーに送信します。
  2. コントローラーからフォームデータをDBに保存します。
  3. 成功すると、「成功」メッセージと保存されたアイテムを含むダイアログ ボックスが表示されます。
  4. エラーが発生した場合（これについて言及していませんでした）、別の方法を表示すると思いますよね？

jQuery Ajax メソッドを調べてください。

于 2009-12-11T16:45:17.193 に答える