5487

Dismiss and submit form Bootstrap 3

Question:

I have a bootstrap modal dialog that is inside a form. The form is submitted via AJAX. I want the submit button to also dismiss the modal (otherwise i end up with the modal overlay remaining)

Code for the modal is:

@using (Ajax.BeginForm("SaveConfiguredReport", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "report-details", OnBegin="preProcessing" })) { <div class="modal fade" id="add-filter-dialog" tabindex="-1" role="dialog" aria-labelledby="add-filter-dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4>Add a Filter</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body">

Adding filters allows you to sort what data will be included in the report. These filters will be default for all ongoing usage of this report.

<div id="field-templates"></div> <input type="hidden" id="field-template-id" name="FieldTemplateID" /> @Html.DropDownList("OperatorID", Model.Operators.Select(x => new SelectListItem { Text = x.Name, Value = x.OperatorID.ToString() })) <input type="text" name="FilterValue" class="typeahead" id="filter-value" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success" data-dismiss="modal" name="Command" value="Add">Add Filter</button> </div> </div> </div> </div> } <!-- other code --> <script> function preProcessing() { $('.modal').each(function (index, element) { $(element).modal('hide'); }); } </script>

If i keep the data-dismiss attribute on the submit button, it will dismiss the form but not submit it. If i remove it, the form will be submitted but not dismissed. Anyone had any luck with this?

<strong>EDIT</strong><br /> I have added a pre-processor to the AJAX call to hide all forms at the start. Hiding them at the end did not work because the form was replacing the modal but not the overlay. This is a workaround until a proper solution is suggested

Answer1:

What I usually do is close it via Javascript after the form has been validated and AJAX post/get was successful.

$('#add-filter-dialog').modal('hide');

See more options here <a href="http://getbootstrap.com/javascript/#modals-usage" rel="nofollow">http://getbootstrap.com/javascript/#modals-usage</a>

Recommend

  • How to get an error shown when using non strings as strings (instead of an automatic use of ToString
  • Loading Images with Glide and FirebaseUI in newest Firebase Version (10.2.4)
  • Related to ion-infinite-scroll in Ionic2
  • Change listview adapter to recycler view adapter
  • Qt 5 : Mouse Wheel event behaviour for zooming image
  • Getting values from parameter store in AWS
  • How to show dropdown only when inserting @ character on MultiAutoCompleteTextView in android
  • How to deploy web service as a single dll? C#
  • TYPO3 distribution.png issue when posting images
  • Some value are null AJAX call to controller ASP.Net Core
  • htaccess merge 2 segments with underscore
  • c# selenium chrome-webdrive clicking button using class and title
  • How to bind caliburn.micro view model to WP8 LongListSelector control?
  • Querying a collection of embeddable elements using eclipselink
  • JSF with Enum 'Validation Error: Value is not valid'
  • Joining across databases with dbplyr
  • MVC3 Extension for ValidatorMessage
  • GTK3 + OpenGL for windows: multiple GtkGLArea (ie. OpenGL contexts)
  • Multiple table join MySQL multiple foreign keys
  • Java Collections.shuffle() weird behaviour [closed]
  • Annotate objects in a queryset with next and previous object ids
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • how to run ejabberd with Erlang on Heroku?
  • How to specify generic type when the type is only known at runtime?
  • Will this work on all screen sizes?
  • How to integrate angular2-material (alpha 8.2) with angular2-Quickstart app
  • Why isn't stemDocument stemming?
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Functions by reference or by variable, which to use when?
  • Comma decimal separator is ignored by ASP.NET MVC model binder
  • Capture SIGFPE from SIMD instruction
  • Using Service Component Runtime
  • How do I use TagLib-Sharp to write custom (PRIV) ID3 frames?
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web