1

フォームがあり、そのフォームにはレコードのテーブルがあります。各レコードは mysql データベースからのもので、各レコードはデータベース内で独自の一意の ID を持っています。私は Jquery UI ダイアログ ライブラリを使用しています。各レコードの横に編集リンクがあります。ユーザーが [編集] をクリックすると、ダイアログが呼び出されて開き、その特定のレコードを編集するためのフォームのモーダル ウィンドウが表示されます。私の質問は、ダイアログ ボックスが開いたときに jquery/ajax を介して呼び出しを行い、そのレコードのデータベースから最新のデータを取得して、ダイアログ フォーム内のフィールドに入力するにはどうすればよいですか? 現在、リンクがクリックされたときにダイアログを開くだけです。

$("a.editlink").click(function() {

    $("#edit-form").dialog("open");

    return false;

});
4

3 に答える 3

0

タグに、編集フォームが利用可能なページに設定された href 値を持たせます。クエリ文字列を使用してこのページにレコードの ID を渡し、そのレコードの詳細を編集フォームにロードできるようにします。

<a href="edtiuser.php?userid=1">Edit User 1</a>
<a href="edtiuser.php?userid=2">Edit User 2</a>

このスクリプトがあります。

$(function(){
        $("a.editlink").click(function (e) {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({                       
                        close: function (event, ui) {                            
                            dialog.remove();
                        },
                        modal: true,
                        width: 460
                    });
                }
            );           
            return false;           
        });
  });

したがって、anchror タグをクリックすると、edituser.php ページのコンテンツがダイアログに読み込まれます。jQuery と jQuery UI がページに適切にロードされていると仮定すると、これは正常に機能するはずです。

于 2012-04-17T01:47:45.140 に答える
0

クリック関数内では、Ajax 呼び出しを実行して、 http://api.jquery.com/jQuery.ajax/を使用して情報を取得する必要があります。

ajax 呼び出しの成功メソッドでは、返された値をフォームの入力フィールドに割り当てることができます。

あなたのバックエンドがどのような技術なのかわからないので、それが読み取り可能な方法 (つまり JSON) で値を返すことを確認する必要があります。

考慮すべき唯一のことは、ユーザーが編集をクリックしたときにこれが遅くなることです。ページにあまり多くのデータがない場合は、クリックされたアンカー タグに追加の属性を保存して、編集フォームにすぐに入力できるようにすることをお勧めします。

すなわち。次のようなアンカー タグがあります。

<a class="editlink" data-field1='stuff' data-field2='stuff' data-field3='stuff'>Text</a>
于 2012-04-17T01:36:13.150 に答える
0

ダイアログ js コードの OPEN セクションに ajax 呼び出しを配置する必要があります。

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {

                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
                    $( this ).dialog( "close" );
        },
                    open: function(){ 
         PUT AJAX CALL HERE
        }
    });

そして、innerHTML を ajax の成功に入れ、結果をダイアログ フォームに入れます。

function ajaxSuccess(data){
                     dialogformfields.innerHTML=data.info;
                     }

それがあなたが知る必要があることを願っています!

于 2012-04-17T01:38:55.103 に答える