0

私はここに状況があります：

ajax呼び出しによって入力されたユーザーの役割を検証するための中間ダイアログポップアップ（ドロップダウンで構成）を備えたユーザーログインフォームがあります。

問題は、[送信]をクリックして中間ダイアログがポップアップし、ドロップダウンにロールが表示されない場合です。ドロップダウンが空の5〜7秒後に入力されます。

ステータスを使用してajaxで処理できますか、またはajaxが完了したら、ドロップダウンが表示されたダイアログボックスをポップアップできます。

以下は私のコードです：

形

<form name = "loginForm" method="post" action="#">
    <div class = "container">
    <table>
        <tr>
            <td>
                <h1 class = "heading">Enhanced Quality Control 2.0</h1><br>
            </td>
        </tr>
        <tr>
            <td>
                <table class = "maintable">
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <label for="login">Login ID&nbsp;&nbsp;</label>
                                    </td>
                                    <td>    
                                        <input id="login" type="text" onfocus="clearDefault(this.value);" onblur="setDefault();" value="Enter your Login ID" style="position:relative; margin-left: 80px; background-color:#19A053;border:none;width:100%;height:26px;color:#FFFFFF;font-size:20px;padding-left:10px;font-style:italic"/>
                                    </td>
                                </tr>   
                                <tr>
                                    <td>
                                        <br><label for="password" >Password&nbsp;&nbsp;</label>
                                    </td>
                                    <td>
                                        <br>
                                        <input id="password" type="password" onfocus="clearDefault(this.value);" onblur="setDefault();" value="Enter Password" style = "position:relative; margin-left: 80px; background-color:#19A053;border:none;width:100%;height:26px;color:#FFFFFF;font-size:20px;padding-left:10px;font-style:italic"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <br>
                                        <input type = "checkbox" style= "background-color:#19A053" style="position:relative; margin-left: 80px; background-url:images/user.png">&nbsp;&nbsp;Remember me next time</input>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <br>
                                        <img class="submit" src = "images/button.PNG" name = "image" style="position:relative; margin-left: 80px; background-color:#19A053;border:none;" />
                                        <input type="hidden" value="" id="role" />
                                    </td>   
                                </tr>
                            </table>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </div>
    </form>

Intermediate Dialog Code


<div id="dialog" title="Select User Role" style="display:none;">
        <p>You have multiple user roles assigned. Please select any one of the roles and click on the 'Continue' button.</p>
        <table>
            <tr>
                <td>Select user role</td>
                <td>
                    <div class="dropdown" id="dropdown">
                        <select id="roles" name="Select user role" style="z-index: 10;"> //EMPTY DROPDOWN
                    </select>
                </div>
                </td>
            </tr>
        </table>
    </div>

SCRIPT CODE
    **

    $(document).ready(function(){ 
                // Dialog Link
                $('.submit').click(function () {
                    makeGetRequest();           //Call for First Click and shoot ajax call
                });


                function makeGetRequest() { // AJAX CALL METHOD
                    var login = document.getElementById('login').value;
                    var password = document.getElementById('password').value;
                    http.open('get', 'ajax.jsp?login=' + login+ '&password=' + password);
                    http.onreadystatechange = processResponse; //CALLBACK FUNCTION
                    http.send(null);
                }

    //AJAX CALLBACK FUNCTION - Issue is the dialog opens up before the dropdown is populated i need to wait a bit 
                function processResponse() {
                    if(http.readyState == 4 && http.status == 200){
                        var response = http.responseText;

**
                    document.getElementById('roles').innerHTML = response;
                    $('#dialog').dialog('open'); //Dialog Opens before data is ready in my "roles" dropdown
                }

            }

前もって感謝します！！！！乾杯...

4

1 に答える 1

2

jQuery.get（）関数を使用して、 ajaxreturnで実行するスクリプトをreturnfunction（data）に追加することを検討してください。

$.get('ajax/test.html', function(data) {

    $('.result').html(data);
    alert('Load was performed.');

});

データはサーバーの応答です。

于 2012-07-12T12:49:48.150 に答える