I have a button with some validation function written in click event of jquery, which needs to trigger a modal window on successful validation.I have placed my modal trigger function within an IF condition which is not triggering my modal window. Can you please help me to find the issue and solve.
Note: when placing my modal trigger function on the very first line within the document.ready function the same modal window works, but not triggering when placed in click function.
Header and html code of modal
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</head>
<div id="submit_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jquery code for click function
$(".subdomain_check").click(function(){
var form = $("#msform");
form.validate();
if(form.valid() === true){
var doamin_check = $("#subdomain_input").val();
if (doamin_check == '' ) {
$("#subdomain_available").text("");
$("#subdomain_error").text("Please Enter a domain name");
return false;
}
else {
$("#submit_modal").modal('show'); // Modal triger function
$("#subdomain_error").text("");
$("#subdomain_available").text("Domain Available");
current_fs = $(this).parent();
next_fs = $(this).parent().next();
}
}
});
Related
I am using bootstrap 4 modal, when I click on "Ok" button I call function and after that the modal disappear, but the back-ground still remains. whereas for the close button the modal and the back-ground dissapers its because I am using "data-dismiss="modal", but if I use this same for "Ok" button this is not working. I have used (data-backdrop="false"), but it completely removes the back-ground which i donot want. so can someone please tell me how to do that. I have uploaded the following code.
<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{question}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="onConfirm($event)">Ok</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
.ts File
export class ModalComponent {
#Input() question: string = ''
#Input() title: string = ''
#Output() confirm = new EventEmitter<void>()
constructor() { }
onConfirm(event: Event) {
event.stopPropagation()
this.confirm.emit()
}
}
I have a modal which can be viewed by button click but I need to make it display on Url.Action as a part of the header file in that way it will display on all pages.
I followed some tutorials but non of them worked for me as they represented different scenarios that do not apply to mine.
Below is Rolles.cshtml code for the modal
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Rolles";
}
<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">
<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">
...BLABLA
</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>
Below is the controller code
public ActionResult Betingelser()
{
return PartialView("Rolles");
}
Below is the Head.cshtml code where I call the Modal to display.
header class="header" role="banner">
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Betingelser")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to
DivContainer
$('#exampleModal').modal('show'); //Once loaded,
show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
<div class="portal-header">
<div class="container portal-header-inner">
<!-- 1B: Portal header: info + actions-->
</div>
</div>
<!--2A: Solutiuon header -->
<div class="solution-header">
<div class="container solution-header-inner">
<div class="overlay"></div>
<nav role="navigation" class=" nav">
<ul class="nav-primary">
<a class="nav-link" id="btnTrigger" href="#">
<span>Betingelser</span></a>
</ul>
<div id="divContainer"></div>
</div>
</div>
I want to be able to click on the the rolles Url.Action to display the modal from any page in my solution.
What am I missing here?
I see you are just throwing the html to the view with the ActionResult, and after i guess you are going to change the values with JS or Jquery... Why dont you transfer the modal to the view directly and show it with jquery instead?
It could be more easy to do, and practical.
It would be hard to trigger a modal since Url.Action will redirect you to a new page. The best way to do this is to use AJAX.
First create a container where your partial view or HTML elements will be loaded. On this case, I created a div here namely divContainer where I will put the HTML contents once someone has triggered the button namely btnTrigger.
<ul class="nav-primary">
<li>
<a class="nav-link" id="btnTrigger" href="#"><span>Rolles</span></a>
</li>
</ul>
<div id="divContainer"></div>
Then on the same page where you place this code, add a script which will contain your AJAX functionality. What it does is that when someone clicks your link, on this case btnTrigger (with the code above), this will call the Betingelser ActionResult and will load your Rolles.cshtml which contains your Modal HTML code.
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then on your Rolles.cshtml, I edited your Modal based on Bootstrap documentation, you can edit this if you want:
#{
ViewBag.Title = "Rolles";
}
<!-- Modal -->
<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">
<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>
<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>
Your controller code is still the same:
public ActionResult Betingelser()
{
return PartialView("Rolles");
}
I have 2 modals that are triggered by selection of a drop down menu. If I have the "multi-part-delete modal" first and the "multi-part-move" modal second then the "multi-part-move" one does not show. The screen goes dark but the modal does not appear.
If I swap them around then the move one works and the delete one doesn't show. Anyone know how I can get them both to work.
<!-- Multi-Part Delete Modal -->
<div class="modal fade" id="multipartdeletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Delete Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Are you sure you want to delete these parts?<br>
This process cannot be undone</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multidelete">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multidelete" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Multi-Part Move Modal -->
<div class="modal fade" id="multimovemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Move Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Please select group?</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multimove">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multimove" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
use this IIFE function and you will have mulitple stackable modal support on bootstrap 4
(function multiple_modal() {
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
})()
Yes, stacked modals are currently not working in Bootstrap 4.1. What I did was make them sequentially close/open each other. For example, when a child("stacked") modal opens from a parent modal, the parent modal closes, and when a child modal closes, it re-opens a parent(previously opened) modal - so there's always one modal open at a time.
On the child modal, I have a data attribute data-parent-modal="#parentExampleModal"
I have the Javascript as below:
$('.modal').on('shown.bs.modal', function (e) {
let $this = $(this),
$parentModal = $this.parent().find($this.data('parent-modal') + '.modal');
if ($parentModal.length) {
$parentModal.modal('hide');
$this.on('hidden.bs.modal', function (e) {
$parentModal.modal('show');
});
}
});
If you need further explanation, please let me know.
You could do it with CSS by selecting the second modal
.modal:nth-of-type(even) {z-index: 1052 !important;}
.modal-backdrop.show:nth-of-type(even) {z-index: 1051 !important;}
I have a created a button when you click it a modal appears.
Here is the code:
<li style="float: right;">
<button id="myBtn" data-target="#myModal" ng-click="printDivModal('rollup-tab')">Modal Test</button>
</li>
In the js, the ng-click should open a model which contains data from stackModal.html
Here is the code in the js file:
$scope.printDivModal = function(divName) {
console.log('opening pop up');
var ModalInstance = $uibModal.open({
//animation: $ctrl.animationsEnabled,
templateUrl: 'app/views/modals/stackedModal.html',
size: 'lg',
/*
controller: function($scope) {
$scope.name = 'top';
}
*/
});
}
Here is the code for the model (stackedModal.html):
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I click the Model-Test button, all I see is a small white rectangle show on the screen. Nothing appears from the stackedModal html page. Why is this? Thanks.
Just remove modal wrappers div's, bootstrap-modal does it for you.
You just need to put modal content:
stackedModal.html:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I want a model to open when I click on a button in a web-grid. I have created a button which targets a modal by its ID. For each item in the model(a list), I want to create a modal with the id of the item. Below is my code:
<div id="divCurrentRented">
#{
WebGrid obj = new WebGrid(Model, rowsPerPage: 5);
}
#obj.Table(htmlAttributes: new
{
id="tableCurrentRented",
#class = "table"
},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: obj.Columns(
obj.Column("Title", header: "Title"),
obj.Column("Author", header: "Author"),
obj.Column("Avaible", header: "Available", canSort:false),
obj.Column(header: "Rent", format:#<button type="button" class="btn btn-default" data-toggle="modal" data-target="##item.BookID">Yes</button>)
))
As you can see the data target of the button is equal to the id of the item.
my modal code as below:
<div class="modal fade" id="#Model.First().BookID" ( role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Return confirmation</h4>
</div>
<div class="modal-body">
<p class="modalBody">Are you sure you want to return this book?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As you can see in the first line, I am fetching the bookID of the first item. What I need is to fetch the id for each item of the list so that each button click would open its corresponding modal. Any idea how to do that?
To pass information from page to modal while staying to same page, you can do with bootstrap modal event listener show or shown and pass the data attributes value to modal
e.g to pass id and title to modal as data attributes inside modal trigger button.
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
and use event property relatedTarget to get the data-attribute value e.g id inside modal event listener
var id = $(e.relatedTarget).data('id');
and pass it to modal e.g to <div class="modal-body"></div>
$(".modal-body").html(id);
example with id and title as data attributes passing to modal
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
var title = $(e.relatedTarget).data('title');
//pass date-title to modal header
$(".modal-title").html(title);
//Pass Id to modal body or any element in modal
$(".modal-body").html(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="456" data-title="I'm Second Modal Title">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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" aria-labellbyid="writeLabel"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer" id="edit-footer">
<input type="submit" data-dismiss="modal" class="btn btn-success" value="Submit">
</div>
</div>
</div>
</div>
Fiddle