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()函数在返回函数（数据）中添加要在 ajax 返回时执行的脚本：

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

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

});

其中 data 是您的服务器响应。

于 2012-07-12T12:49:48.150 回答