0

App Engine Python で Web アプリケーションを開発しています。

システムに登録されているすべてのユーザーを一覧表示する select 要素を含むフォームがあります。

選択の最初のオプションである「ユーザーのロード...」が選択されている場合、ユーザーを登録するためのモーダルウィンドウが表示され、ウィンドウが閉じられた後、コンボボックスが更新され、デフォルトで選択された最新のユーザーで更新されたリストが表示されます。 . フォームにはすでに多くの「空ではない」フィールドがある可能性があるため、ページ全体ではなくコンボボックスを更新したいだけです。

どうすればjQueryでそれを行うことができますか?

4

2 に答える 2

1

私の理解では、モーダル ウィンドウは現在の DOM の一部として生成されます。登録ユーザーのリストを表示するモーダル ウィンドウは、呼び出しページの DOM にアクセスできます。閉じるボタンまたはリンクがクリックされたときに、モーダル ウィンドウのコードで呼び出しページの選択要素を更新することができます。

モーダル ウィンドウ コードでは、送信ボタンにクリック イベントが関連付けられていると仮定します。その関数の最後でフォーム ajax submit を実行して、処理のためにフォームをサーバーに返すことができます。

例えば：

$('#submit').click(function(){
 //some activity
 $("#callingPageForm").ajaxSubmit({url: 'server.php', type: 'post'})
 //close window
});

ajax リクエストでフォームを送信する方法の詳細については、こちらを参照してください。

于 2012-06-24T00:40:46.057 に答える
1 
<select id="users">
    <option value="blah">Select a user</option>
    <option value="load">Load Users...</option>
</select>

Jquery (未テスト):

$('select#users').on('change',function(){
    if($(this).val() == 'load'){
        //show add user dialog
    }
    });

ユーザーの追加リクエストで成功した後:

$('#add-new-user-form').submit(function(){
    //get data from form and make a dataString to post to server
    var username = $('input[name="username"]').val();
    //similar for other fields
    var dataString = 'username='+ username + '&email=' + email + '&pass=' + pass;
    $.ajax({  
        type: "POST",  
        url: "url/to/your/backend/code",  
        data: dataString,  
        success: function(responseData) { 
            //check how to return JSON or any other data using your backend
            var newUser = responseData;
            var newSelect = $('<select id="users"/>');
            newSelect.append('<option value="' + newUser.value + '" >' + newUser.name + '</option>');
            $('#users').replaceWith(newSelect);
            $("#users option[value='" + newUser.value + "']").attr('selected', 'selected');
            }  
    });  
    return false;//prevent default form submission
    }
于 2012-06-24T00:45:59.517 に答える