Last post Apr 08, 2020 09:30 PM by mgebhard
Apr 08, 2020 07:25 PMemail@example.com|LINK
I want to display a bootstrap modal to ask for some data when i push the dismiss button on the modal form it must submit the data to my controller via an ajax form:
<div class="modal fade" id="myModalAjax">
<form data-ajax="true" data-ajax-mode="replace" data-ajax-update="#partial" asp-action="mypartial" asp-controller="home" role="form" data-ajax-method="post">
<div class="modal-dialog" id="MyDialog">
<!-- Modal content-->
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
<button type="submit" id="btnclick" class="btn btn-default">Close</button>
When I run the code as is the partial view is update and the modal goes away but the background remains greyed out and i can not do anything on the web page until i refresh it completely.
If i add data-dismiss="modal" to the submit button then the modal goes away but the post never happens. Any help here would be much appreciated.
Apr 08, 2020 07:41 PM|mgebhard|LINK
Use a standard form not an AJAX form. A standard submit will cause the browser to refresh the page which closes the modal.
Secondly, submitting the form when the dismiss button is pressed is not user friendly. Users click the dismiss button because they want to cancel what they are doing and perhaps start over. What if there are validation
errors and the user just gets frustrated and closes the window because your design does not let the user cancel?
Lastly, the modal does not contain a user inputs.
Apr 08, 2020 07:53 PMfirstname.lastname@example.org|LINK
Basically I have a table. I want the user to add/edit or update data in the table via a modal box. There are two buttons on the modal box one for cancel which just closes and the other for submitting. When the user pushes the submit button on the modal
form the form must go away . The table is one section of data on a larger page wrapped in a div. I do not want to refresh the entire page I only want to refresh the table data in that div . So basically the modal box asks for new or updated data and then when
the user pushes the submit button on the form it must post the new data to the server and refresh that table div with the new data .
Apr 08, 2020 09:30 PM|mgebhard|LINK
send/receive JSON data as well as populate HTML elements.
I would start by taking a look at the Bootstrap documentation. The docs show how to populate a modal form with data from the current page using data- attributes. https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
Once you get the bit above working then you can work on how to update the UI. I recommend using data- attributes in the markup to identify the records by id. Doing so makes it easier to update the UI.