How to handle background ajax calls in a web page

Question

I have a situation here:

I have a user login form with a intermediate dialog popup(consists of a dropdown) to validate roles of user which is populated by an ajax call.

The issue is the when i click on submit for form the intermediate dialog popups and dropdown is not populated with roles, it populates after 5-7 secs in which the dropdown is empty.

Can we handle in ajax, using status or when ajax is complete then we can popup the dialog box with dropdown populated.

Below is my code:

Form

<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
                }

            }

Thanks in advance!!!! Cheers...

Answer 1

consider using jQuery.get() function adding the script you want to execute on ajax return in the return function(data):

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

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

});

Where data is your server response.