How to reload a select element in a form after a modal window for inserting data is closed?

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?

post some code and I can give more insight. – David Cheung Jun 24 '12 at 00:44 — David Cheung, Jun 24 '12 at 00:44

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

From my understanding the modal window is generated as part of your current DOM.The modal window displaying the list of registered users will have access to the DOM of the calling page. You can have your code for the modal window do an update on your select element on the calling page when the close button or link is clicked.

In your modal window code, I assume you have a click event attached to the submit button, you can do a form ajax submit at the end of that function to return the form to your server for processing.

For Example:

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

More info on submitting a form in an ajax request here.

edited May 23 '17 at 12:12

Community

1
1

answered Jun 24 '12 at 00:40

David Cheung

848
4
8

thanks Davis! I have a form with a select element that display a list of registered users, and the first option of the select should redirect to a modal window. That modal window will contain a form for inserting a new user. When its 'submit' button is clicked, the modal should close and the select element of the original form should be updated with the new list of users... – Lucas Jun 24 '12 at 01:05
@Nord Should the submit of modal be submitted to sever or just update the select menu in previous form? – sabithpocker Jun 24 '12 at 01:14
@sabithpocker I need to submit to server in order to make the update there, but then the select element should display the updated list... – Lucas Jun 24 '12 at 01:21

sabithpocker · Accepted Answer · 2012-06-24T01:34:34.130

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
    }

edited Jun 24 '12 at 01:34

answered Jun 24 '12 at 00:45

sabithpocker

15,274
1
42
75

@Nord if you have many users use a loop when adding options. And set the appropriate ona as selected, first or last item in the list of users. – sabithpocker Jun 24 '12 at 00:57
hey @sabithpocker, should not be used some ajax to retrieve the list of users? and in your loadNewUser() method, how should I get the list of users from the server? – Lucas Jun 24 '12 at 01:12
@Nord It depends on how you have implemented things in server, yes sure you can use ajax to submit and recieve data. – sabithpocker Jun 24 '12 at 01:18
@Nord you should then submit the form with ajax and write code on server to respond with the details of newly added users. Once the response is arrived you can trigger change on select. I will edit answer with this, but not the server side codes. – sabithpocker Jun 24 '12 at 01:25
thanks @sabithpocker, after you post the edited answer I'll try to implement it =) – Lucas Jun 24 '12 at 01:28

How to reload a select element in a form after a modal window for inserting data is closed?

2 Answers2