TwitterBootstrapMvc (3rd): modal dialog state

Question

I use Modal dialogs to submit new records (Asp.Net, MVC).

<div id="modal-dlg" class="modal fade" tabindex="-1"></div>
<div id="banner-add">
   <a class="btn-default  btn" data-toggle="modal" href="@Url.Action("BannerSlideNewModal", "Account", new { Model.Id })" data-target="#modal-dlg" target="profile-banner">Add</a>
</div>

On form submit, after data processing, I hide current dialog:

form.submit(function() {
    button.attr('disabled', true).text('Please wait ...');
    // call service to update/add record
    if ($(this).valid()) {
    $(this).ajaxSubmit(
    {
        success: function(data) {
            .....
            $('#' + context.id).modal('hide');
        }
    });
});

The problem is, when I open modal dialog again, I want to see blank fields for new entry, but all fields are assigned from previous entry. How I can initialize each time new modal dialog instead of reusing same one?

Thanks.

You can clear each field's value manually: http://stackoverflow.com/questions/15827262/how-to-reset-form-body-in-bootstrap-modal-box — Andy T, Nov 18 '13 at 16:57

score 1 · Accepted Answer · answered Nov 18 '13 at 17:00

Just reset your form with reset():

form.submit(function() {
    button.attr('disabled', true).text('Please wait ...');
    // call service to update/add record
    if ($(this).valid()) {
    $(this).ajaxSubmit(
    {
        success: function(data) {
            .....
            $('#' + context.id).modal('hide');
            form.reset();
        }
    });
});

TwitterBootstrapMvc (3rd): modal dialog state

1 Answers1