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">×</button>
</div>
<div class="modal-body">
<p>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.</p>
<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?
EDIT
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
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 http://getbootstrap.com/javascript/#modals-usage
Related
I am using a bootastrap modal inside a .Net MVC Razor page which uses Vue JS
The modal popup is initiated with a button click event like below
<div>
<button type="button" class="btn" v-on:click="rejectModal(item)">Reject Popup</button>
</div>
rejectModal: function (item) {
this.selectedItemReject = item; //set a property
console.log(this.selectedItemReject);
$('#declineModal').modal('show'); //show modal
},
This shows the popup and text area to enter a comment and when i am trying to click on SAVE Button , The click event seems to be not firing. I am planning to add the notes property to selectedItemReject object and proceed with an ajax call and hide popup on SAVE button click. But no idea why the button click event is firing
<div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="declineModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="declineModalLabel">Decline Note</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<textarea name="decline-notes" v-model="rejectNote" placeholder="Add a note..." rows="4" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" v-on:click="reject">SAVE</button>
</div>
</div>
</div>
</div>
reject: function () {
console.log("reject"); // NOT FIRING
}
Based on some suggestions already tried removing data-dismiss="modal" from close button , but no differece
I have the following code:
#using (Html.BeginForm(new { id = "createForm" }))
{
#Html.AntiForgeryToken()
#Html.Hidden("SortField", info.SortField)
#Html.Hidden("SortDirection", info.SortDirection)
#Html.Hidden("CurrentPageIndex", info.CurrentPageIndex)
#Html.HiddenFor(model => model.FormID)
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body wrap">
Body Content
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="btnActive">SUBMIT</button>
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
</div>
</div>
</div>
</div>
On submit, it goes to the default POST controller action item. I like to direct it to a specific action item though. Any way to specify what it should be. Thank you in advance.
spec the action and controller here:
#using(Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "createForm" }))
I have a form inside a bootsrap modal. When I click submit it posts the data and hides the modal. GREAT! However, if I click the cancel button that has data-dismiss attribute it also submits the form. I tried explicit type="button" but it still submits the form. I'd like for the "Cancel" button to just close the modal and not do postback. Any suggestions?
<div Class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div Class="modal-dialog" role="document">
<div Class="modal-content">
<div Class="modal-header">
<h4 Class="modal-title">Change User</h4>
</div>
<div Class="modal-body">
#If Model.impersonate.isAllowed Or Model.isAdmin Then
#<form action='#Url.Action("Parent")' id="frmChangeUser" method="post">
#If Model.isAdmin Then
#<Label Class="lbl">Enter RACF Or EIN</Label>
#Html.EditorFor(Function(m) Model.userRacf, New With {.class = "form-control"})
Else
#<Label Class="lbl">Select an Operator</Label>
#<select id="select" class="form-control" onchange="$("#userRacf").val($(this).val());">
#For Each item In Model.impersonate.AccessList
#<option value="#item.Value.ToString">#item.Text.ToString</option>
Next
</select>
#<input type="text" id="userRacf" name="userRacf"/>
End If
<div Class="modal-footer">
<Button Class="btn-green" type="submit" id="getUser">Get</button>
<Button Class="btn-grey" type="button" data-dismiss>Cancel</button>
</div>
</form>
Else
#<label>You are not currently registered for impersonation, to request access fill out form on homepage</label>
#<Button Class="btn-grey" data-dissmiss="modal">OK</button>
End If
</div>
</div>
</div>
</div>
Your modal-footer button is missing "modal" should be -
<Button Class="btn-grey" type="button" data-dismiss="modal">Cancel</button>
I followed a great little solution over at CodeProject for injecting partial views into bootstrap modals with no explicit ajax calls required...
https://www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa
In a nutshell, the author does this (UPDATE: I have added modal-dialog, which the author doesn't do but is required):
_Layout
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
</div>
</div>
<script>
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
</script>
UPDATE - Here's the _Partial
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
... and by doing so makes any link with class="modal-link" inject its result to the modal automatically.
Seems wonderfully simple and elegant, but just one problem: The data-target he specifies is the <div id="modal-container">. Really? Why? The content should be injected into the <div class="modal-content">, shouldn't it? But nearly everyone has no problem, and no one mentions this conundrum. For me, the solution does exactly what he's told it to, it injects into <div id="modal-container">, thereby overwriting <div class="modal-content"> with my modal-body, etc. that are the contents of my partial view, so the display is messed up -- full width of the window and transparent, because it's not going into the modal-content.
Am I missing something here?
UPDATE
One of Stom's answers below is correct (I've marked it). However, as I've shown in updates above, I actually already had the <div class="modal-dialog" role="document"> in the _Layout and <div class="modal-header">, body, and footer in the _Partial. Ultimately, after this issue persisted for days, I woke up today and it just started working with no changes! Seriously? Frustrating. The problem previously was that the data-toggle was causing it to actually inject into the #modal-container, not the .modal-content. But now it started to function as Stom says the documentation says, which is that even though you set the data-toggle as the #modal-container, Bootstrap should inject it into the .modal-content. Why that was not happening before but is now, I haven't the foggiest. I haven't upgraded versions overnight or anything. Ghost problem ---
The content should be injected into the ,
shouldn't it?
Before version 3.1 it should be injected root element of modal i.e your modal-container But on version 3.1 it has changed. And now the bootstrap docs says it will be injected in modal-content.
modal-content with my modal-body, etc. that are the
contents of my partial view, so the display is messed up , Why?
Because your partial view should contain modal-body and not modal-content.
Also Adding modal-dialog inside model root element solves the syling issue.
So below setup should work for you:
Action Methods
public ActionResult Index()
{
return View();
}
public ActionResult GetPartialData()
{
return PartialView("_ExamplePartial");
}
Index View
<!-- Button trigger modal -->
<a data-toggle="modal" href="#Url.Action("GetPartialData","Home")" data-target="#myModal">Click me</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
_ExamplePartial View
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1>Remote Partial Content</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Note:
This option is deprecated since v3.3.0 and has been removed in v4.
Reference:
1.
2.
Below Setup should work to inject partial view content into modal body and it doesn't mess up with your default bootstrap modal style.
Action Methods
public ActionResult Index()
{
return View();
}
public PartialViewResult GetSomeData()
{
System.Threading.Thread.Sleep(2000); // Just to show delay to Get data
ViewBag.Message = "Example Data from Server"; //Using ViewBag Just for example, use ViewModel Instead
return PartialView("~/Views/Shared/_ExamplePartial.cshtml");
}
Index View
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" id="btnGetData">
Get Modal With Partial
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="partialViewContent">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
_ExamplePartial View
<h2>Partial View Contents</h2>
<h3>#ViewBag.Message</h3>
<p>Some More Static Content</p>
Script:
<script>
$(document).ready(function () {
$('#btnGetData').click(function () {
var requestUrl = '#Url.Action("GetSomeData", "Home")';
$.get(requestUrl)
.done(function (responsedata) {
console.log("success");
$("#partialViewContent").html(responsedata);
$('#myModal').modal('show')
})
.fail(function () {
alert("error");
})
.always(function () {
console.log("finished");
});
})
});
</script>
I'm using ASP.net MVC5 with Bootstrap 3
I have the following View
#model WilhanWebsite.Models.PhotoViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Gallery</h2>
<p>
#Html.ActionLink("Upload Photo", "Create")
<br/>
#for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
<a data-toggle="modal" data-target="#img-thumbnail#i" class="img_modal" href="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
<img id="img-thumbnail#i" class="img-thumbnail" src="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="#Model.DownloadedImages[i].Description" />
</a>
}
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</p>
When I click an image from the gallery I would like it to display in a modal window.
My problem is, when I click the link, the modal window displays without the image. All the examples I've seen use images from the file system whereas my site uses images from a db via a byte array. I guess the fix may be to change the line of javascript that is assigning the source attribute on the modal image but I've tried various things here without a result. The problem can be seen at the following address: Problem page
** EDIT **
Updated view to use for loop to identify images as suggested. Problem changed, now rather than displaying a blank modal page, the image is displayed on a blank page.
** EDIT Working View **
#model WilhanWebsite.Models.PhotoViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Gallery</h2>
<p>
#Html.ActionLink("Upload Photo", "Create")
<br/>
#for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
<a data-toggle="modal" data-target="#img-thumbnail#i" class="img_modal" href="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
<img id="img-thumbnail#i" class="img-thumbnail" src="data:image/jpg;base64,#(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="#Model.DownloadedImages[i].Description" />
</a>
}
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</p>
<script type="text/javascript">
$('.img_modal').on('click', function (e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$("#modal").removeClass("hide");
$('#modal').modal('show');
});
</script>
You need to add the toggle and target to the link:
<a ... data-toggle="modal" data-target="#img-thumbnail1"
Then add the target id to the image:
<img id="img-thumbnail1" class="img-thumbnail"
This means that you will have to add an incrementing number to the loop so that id's are unique.
You can do this like this:
#for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
<a data-toggle="modal" data-target="#img-thumbnail#i" class="img_modal" href="data:image/jpg;base64,#(Convert.ToBase64String(photo.ImageData))">
<img id="img-thumbnail#i" class="img-thumbnail" src="data:image/jpg;base64,#(Convert.ToBase64String(photo.ImageData))" alt="#photo.Description" />
</a>
}
The problem is with your jquery, as you are getting the "#modal_img_target" src value correctly. Your onClick event is hiding the image.
Try this :-
<script type="text/javascript">
$('.img_modal').on('click', function (e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$("#modal").removeClass("hide");
$('#modal').modal('show');
});
</script>