Question

I’m developing a web application on App Engine Python.

I have a form with a select element that will list all registered users on the system.

If the first option of the select, ‘load user…’, is selected, a modal windows
for registering users should display and after the windows is closed,
the combobox should be updated showing the updated list with the newest
user selected by default. I just want the combo box to be updated and not the whole
page since there already could be many ‘not empty’ fields on the form.

How could I do that in jQuery?

Answer 1

<select id="users">
    <option value="blah">Select a user</option>
    <option value="load">Load Users...</option>
</select>

Jquery(not Tested):

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

After getting success on add user request:

$('#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
    }