We Keep Coding

Doubleclick block Bootstrap Modal Window

When I doubleclick quickly, two modal windows open simultaneously and close button is blocked. You can try live demo in http://1card.digital/prb/modalprb1.html
Link to Open Modal
<a class="btn btn-primary btn-block btn-lg" data-toggle="modal" href="#myModalAgrP" id="modallinkAgrP" data-title="ModalPrb1Mdl">Open Modal</a>
JQuery to Open Modal
<script type = "text/javascript" > $(document).ready(function () {
jQuery('#modallinkAgrP').click(function (e) {
$('#myModalAgrP').modal('hide');
$('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
$('#myModalAgrP').modal({
show: true
});
});
});
});
$(document).on("hidden.bs.modal", "#myModalAgrP", function () {
$('#myModalAgrP').remove();
});
</script>
Modal Code
<div class="modal fade" id="myModalAgrP">
<div class="modal-dialog">
<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'><a target="_blank" href="#"><span class="fa fa-question-circle"></span></a> Bootstrap Modal</h4>
</div>
<div class="modal-body">
<div class="callout callout-info">Prueba de Bootstrap Modal</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
Thank's a lot for your answer, this code solve my double click problem...
$('a').on('click', function(e){
var $link = $(e.target);
e.preventDefault();
if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 900) {
console.log('clicked');
// doSomething();
}
$link.data('lockedAt', +new Date());
});

You can specify "static" for a backdrop which doesn't close the modal on click.
For example:
jQuery('#modallinkAgrP').click(function (e) {
$('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
$('#myModalAgrP').modal({
show: true,
backdrop: 'static'
});
});
});

Is there a possibility to bind the Form to a modal bootstrap window without using the load call?

I'm using ajax to make a request and open a modal bootstrap window afterwards. The problem is that when I use ajax, I make a request to my controller, and the return (modal content) I load as follows:
//modal loading
$('#contentModalFinanceiroParcela').html(data);
//exibição da modal
$('#modalFinanceiroParcela').modal({
keyboard: true,
}, 'show');
So far, everything perfect. The problem is that from then on, I can't bind the form to register the submit event of the form. In the function bindFormFinanceiroParcela, no matter how much I pass the "dialog", bind does not work.
bindFormFinanceiroParcela(document.getElementById("contentModalFinanceiroParcela"));
Searching the forums, I found that the process works if I load the modal using the "load" command, as below, but I can't do it like that, otherwise it will make a second request to the controller, because previously, I already used ajax .
//That way it works, but I can't use it.
$('#contentModalFinanceiroParcela').load(url, function () {
$('#modalFinanceiroParcela').modal({
keyboard: true
}, 'show');
// Inscreve o evento submit
bindFormFinanceiroParcela(this);
stopLoadPage();
});
Is there a possibility that I can bind the form without using the "load" command mentioned in the script above?
function openModalFinanceiroParcelaSemURL(data) {
startLoadPage();
//Create the modal window block in the body of the page
if (!$("#modalFinanceiroParcela").data('bs.modal'))
CreateModalFinanceiroParcela();
//Load modal content via ajax request
$('#contentModalFinanceiroParcela').html(data);
$('#modalFinanceiroParcela').modal({
keyboard: true,
}, 'show');
bindFormFinanceiroParcela(document.getElementById("contentModalFinanceiroParcela"));
stopLoadPage();
}
function bindFormFinanceiroParcela(dialog) {
$('form', dialog).submit(function (e, i) {
if ($(this).valid() || i) {
startLoadOneMoment();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
window.location = window.location;
} else {
$('#contentModalFinanceiroParcela').html(result);
bindFormFinanceiroParcela();
}
stopLoadOneMoment();
}
});
return false;
} else {
return false;
}
});
function CreateModalFinanceiroParcela() {
var html = '<div class="modal modal-primary modal-system" tabindex="-1" role="dialog" id="modalFinanceiroParcela" data-backdrop="static"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="content-modal-system" id="contentModalFinanceiroParcela"></div></div></div></div>';
$("body").append(html);
}
RAZOR DELETE:
#using Retaguarda.Domain.Enuns
#model Retaguarda.Application.ViewModels.Financeiro.FinanceiroParcela.FinanceiroParcelaViewModel
#{
ViewData["Title"] = "Excluir Parcela";
Layout = null;
}
<div>
<form asp-action="Delete" id="frm-excluir-financeiro-parcela">
#Html.AntiForgeryToken()
<div class="modal-shadow">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4><i class="modal-title text-center glyphicon glyphicon-trash"></i> #ViewData["Title"] </h4>
</div>
<div class="panel">
<div class="panel-body container-fluid pt-15 pl-15 pr-15">
<div class="form-horizontal">
<vc:summary />
<br />
<div class="message-delete">
#Html.HiddenFor(model => model.Id, new { id = "hid-financeiro-parcela-id" })
<i class="icon fa-trash" aria-hidden="true"></i>
<p>
Tem certeza de que deseja excluir a parcela #(Model.Parcela)?<br />
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-offset-2 col-md-10">
<div class="float-right">
<div class="btn-group btn-group-sm mr-auto"
role="group">
<div class="btn-group btn-group-sm" role="group">
#*<button id="btn-excluir-financeiro-parcela" type="submit" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>*#
<button id="btn-excluir-financeiro-parcela" type="button" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>
<button id="btn-cancelar-financeiro-parcela" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Cancelar </button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Ajax call
$('#dtFinanceiroParcela').on('click', 'tr .btn-excluir-financeiro-parcela', function (e) {
e.preventDefault();
startLoadOneMoment();
var id = $(this).attr('data-id');
var data = { id: id };
var dataURL = jQuery.param(data);
$.ajax({
url: "/financeiro-parcela-gerenciar/remover-financeiro-parcela/" + id,
type: "GET",
// data: dataURL,
contentType: "application/json",
async: false,
success: function (result) {
if (typeof result.success !== 'undefined') {
if (!result.success) {
stopLoadOneMoment();
swal("Oops", result.message, "error");
return false;
}
}
// alert(this.url);
stopLoadOneMoment();
openModalFinanceiroParcelaSemURL(result);
return false;
},
error: function () {
stopLoadOneMoment();
alert("Oops! Algo deu errado.");
return false;
}
});

Your form inside razor does not contain any submit button because its commented out.
#*<button id="btn-excluir-financeiro-parcela" type="submit" class="btn btn-success"><i class="icon wb-check"></i> Excluir </button>*#
Remove the comment or change the type of the other button to "submit"
I guess the submit event is attached successfully but never called due to the missing submit button inside your form.

JS function not getting hit when button clicked

I have a button and im trying to fire the function below on click of "Duplicate". Could you guide me through the right way?
Currently, when i click nothing happens! There is no response. I need to fire the function on click.
Thanks in advance
JS
$(document).on('click', '.js-duplicateRoom', function (e) {
var hiddenInput = $(this).parent().find('input[name="roomId"]');
var roomId = hiddenInput.data('id');
var type = 'duplicate';
$.ajax({
type: "GET",
url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
}).done(function (result) {
$('#addRoomResult').html(result);
// Hide Add Room Button
$('#addNewRoom').hide();
$('#backToDetails').hide();
$('#nextPropertyExtras').hide(); // Next button
});
});
HTML
<div class="modal fade" id="duplicateModal" tabindex="-1" role="dialog" aria-labelledby="duplicateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="duplicateModalLabel">Confirm Duplicate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you would like to duplicate this Room?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="js-duplicateRoom" >Duplicate</button>
</div>
</div>
</div>
</div>

The button is identified by an ID, not a class.
So try this instead:
$(document).on('click', '#js-duplicateRoom', function(e) {
var hiddenInput = $(this).parent().find('input[name="roomId"]');
var roomId = hiddenInput.data('id');
var type = 'duplicate';
$.ajax({
type: "GET",
url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
}).done(function(result) {
$('#addRoomResult').html(result); // Hide Add Room Button
$('#addNewRoom').hide();
$('#backToDetails').hide();
$('#nextPropertyExtras').hide(); // Next button
});
});

How to call a partial view within a Modal using Jquery

I have a list of products and you want to display a modal window to edit the parameters of these products
for this you have in each row a button that calls the modal ....
my Edit button in Index.cshtml:
<td>
Editar
</td>
my script in Index.cshtml:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$("#EditModalBody").load(url, function () {
$("#myModalEditar").modal("show");
})
}
</script>
my modal Bootstrap in Index view:
<div class="modal fade" id="myModalEditar">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Editar Producto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="EditModalBody">
</div>
</div>
</div>
</div>
my ActionResult in controller:
public ActionResult EditarProducto (int Kn_CodigoProducto)
{
Producto model = new Producto();
if(Kn_CodigoProducto >= 0)
{
var producto = db.Productoes.Where(c => c.Kn_CodigoProducto == Kn_CodigoProducto).FirstOrDefault();
model.v_Nombre = producto.v_Nombre;
}
return PartialView("_PartialEditar", model);
}
and my partial view that receives the model sent from the controller:
#model Dominio.Producto
<div class="jumbotron">
<label>Esto es una prueba #Model.v_Nombre</label>
</div>
I have the partial view inside the folder along with the Index.cshtml view
Also I have referenced the corresponding scripts, what is happening? What is missing? It is the first time that I work with partial and modal views ... am I doing it correctly?
Expected behavior: when you click on the edit button, the modal opens
Behavior obtained: although when clicking on the edit button it enters the action of my controller, it does not show the modal
any help for me?

Instead of this:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$("#EditModalBody").load(url, function () {
$("#myModalEditar").modal("show");
})
}
</script>
Can you try this:
<script>
var EditarProducto = function (codigoProducto) {
var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;
$.ajax({
url: url,
type: 'GET',
success: function (result) {
$('#EditModalBody').html(result);
$("#myModalEditar").modal("show");
},
error: function (xhr, status) {
alert(status);
}
});
}
</script>

You don't need to write jquery to invoke modal popup, instead you can use data-toggle and data-target attribuites.
Editar

Callback to server using ajax

I am trying to do a callback to the server to return a partial view to my modal when i click the "Add Role" button, but nothing happens when I click the button.
JavaScript:
$(".addRole").on("click", function(){
bootbox.dialog({
title: "Create new role",
callback: function () {
$.ajax({
url: "/Uam/CreateRole/",
method: "POST",
success: function(){}
});
}
});
});
View:
#model List<Vidly.Models.AvailableRole>
#{
ViewBag.Title = "CreateRole";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Available Roles</h2>
<div id="addRoleForm">
<button class="btn btn-success pull-right addRole" type="button" data-toggle="modal">New Role</button>
</div>
Controller:
public ActionResult CreateRole(int? id){
if (id == null){
var menuViewModel = new RoleMenuViewModel{
Menus = GetMultiselectItems()
};
return View("SaveRole", menuViewModel);
}

Message attribute is mandatory for bootbox dialog
$(".addRole").on("click", function(){
bootbox.dialog({
message: '<p class="text-center">Please wait while Createing new role...</p>',
title: "Create new role",
callback: function () {
$.ajax({
url: "/Uam/CreateRole/",
method: "POST",
success: function(){}
});
}
});
});
http://bootboxjs.com/examples.html#bb-custom-dialog

I ended up using the basic bootstrap modal with a #html.RenderAction call in the modal body and a reference to the launch button. No JQuery used.
<button id="addRole-btn" class="btn btn-success pull-right btn-lg" data-toggle="modal" data-target="#modal-container">New Role</button>
<div id="modal-container" class="modal fade" role="dialog" width="500px">
<div id="role-container"></div>
<div class="modal-content">
<div class="modal-body">
#if (true)
{
Html.RenderAction("CreateRole", "Uam");
}
</div>
</div>