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
Related
I am trying to open the bootstrap modal by passing the model object dynamically. The modal content is in partial view as follows,
#model int
<div class="modal fade" id="modal-action-id" 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"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<form>
<input type="text" value="#Model" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" >cancel</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" >delete</button>
</div>
</div>
</div>
</div>
And, here is my div which opens modal by passing model object dynamically,
<div>
#{
for (int i = 5; i > 0; i--)
{
<div>
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-id">
<i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete #i
</button>
#await Html.PartialAsync("_MyPartialView", i)
</div>
}
}
</div>
Now, the problem is no matter which button I click here it only passes the value 5 to the partial view. Also, I have only seen #await Html.PartialAsync() portion of code outside of for loop passing static model to the partial view in different applications. Am I missing anything here, conceptually? Any suggestion would be appreciated.
The reason is all _MyPartialView in same id id="modal-action-id", and that's why you click any button only to show same _MyPartialView.
You could change button data-target="#modal-action-#i"
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-#i">
and change div id="modal-action-#Model"
<div class="modal fade" id="modal-action-#Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Then, you can get what you want. All tested.
Today I came across with this, I tried doing what was in the project and came across with the OP's problem about the full screen modal. I saw a solution below about about cutting the div and pasting it in an outer div.
I did what was in the solution but what happens is that the full modal div is retained and the normal popup shows.
If I add it to the script, no popup shows but backdrop changes.
How do I solve this? Thanks in advance
UPDATE
PARENT VIEW BUTTON
<button type="button" class="btn btn-success btn-sm modal-link" data-targeturl="#Url.Action("_Popup","Application",new { MotorId = item.motor_id, Serialno = item.serialno, AppNo = item.application_no, Remarks = item.remarks })"> View
</button>
PARENT MODAL
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
X
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
SCRIPT
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">' + '<div class="modal-content" id="modalbody" >' + data + '</div></div>').modal();
});
});
});
PARTIAL VIEW
#model iVehicle.ViewModel.FranchiseViewModel
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Some content here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
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 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
I have a chart where I want some series not to be clickable in the legend, but others to be clickable. That was easy, because there was a legendItemClick event that I could make do nothing depending on the series. An example is here: http://jsfiddle.net/9PqyG/3/
My problem is that the mouse pointer still changes from the arrow to the clickable-link-hand-pointer, and I don't want anyone thinking that this is clickable. I know that I can change the itemHoverStyle parameter to make the arrow appear for all the legend items, but that will change it for every series.
Can I make this happen only for a particular series?
I would up just using a CSS selector:
.highcharts-legend-item:first-child:hover { cursor:crosshair; }
I make it actually with modal with mouse hover event, This is how you can do this, please insert this code in your chart function:
$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
var seriesName = $(this).text();
if (seriesName === "this_series_name") {
$('#myModal').modal('toggle');
}
});
Then you can make a modal div to open with hover event like this one below
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
your message here
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
this is a demo