We Keep Coding

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.

Model dialogue open only once

My model dialog with a partial view only an be accessible once, after closing its not opening.
Appreciate your help.
Button :
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="#Url.Action("Create","POPM_Trn_IOU")" id="btnCreateAsset">
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Asset
</button>
Model :
<div class="glyphicon-modal-window" id="createAssetModal" tabindex="-1" role="dialog" aria-labelledby="CreateAssetModal" aria-hidden="true" data-backdrop="static">
<div id="createAssetContainer"></div>
</div>
JS :
$("#btnCreateAsset").on("click", function () {
var url = $(this).data("url");
$.get(url, function (data) {
$('#createAssetContainer').html(data);
$('#createAssetModal').modal('show');
});
});

Jquery clash and jQuery.noConflict(); save the day. thanks all.
$(document).on('click', '#btnCreateAsset', function () {
var url = $(this).data("url"); $.get(url, function (data) {
$('#createAssetContainer').html(data);
event.preventDefault();
jQuery.noConflict();
$('#createAssetModal').modal('show');
});
});

How to add a class to the body of the page, when the menu is open?

I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
https://www.s1biose.com/groupe/recettes-et-astuces
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
How to add a class .overlay-is-navbar-collapse to the body of the page, when the menu is open and delete the class when the menu is closed ?
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});

Use .one to attach a listener to the body right when the body's class gets added:
$('#dropdown-menu-action').on('click', () => {
$('body').addClass('overlay-is-navbar-collapse');
$('body').one('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
});

why don't you try this,
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
$('.dialog-off-canvas-main-canvas').on('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});

Try this,
$('dropdown-menu-action').click(function(){
if($(body).hasClass('overlay-is-navbar-collapse')){
$('body').removeClass('overlay-is-navbar-collapse');
}
else{
$('body').addClass('overlay-is-navbar-collapse');
}
});

Jquery how send hidden value to my script

I use ASP.NET MVC and Jquery. I have icon, when I click on it shows dialog box.
Reports.cshtml:
<a class="dialog-opener" href="#">
<input type="hidden" name="reportID" value="#view.ReportCode"/>
<i class="material-icons right">more_vert</i>
</a>
in this dialog box I have form it is partial view
SubscriptionForm.cshtml:
<div id="dialog-modal" title="Basic model dialog">
#using (Html.BeginForm("SubscriptionForm", "Subscription", FormMethod.Get)) {
#Html.AntiForgeryToken()
...
</div>
_LayoutForAll.chhtml:
$(function () {
$('#dialog-modal').dialog({
dialogClass: 'ui-dialog-osx',
autoOpen: false,
width: 800,
title:"Formularz subskrypcji",
show: {
duration: 1000
},
hide: {
duration: 1000
}
});
$('.dialog-opener').click(function () {
var reportId = $("[type=hidden]").val();
$("#dialog-modal").dialog("open");
alert(reportId);
});
});
I need send reportId from Reports.cshtml and date from form SubscriptionForm to my controller, I don't now how do this.

give ID to your hidden filed and get value using jquery
<a class="dialog-opener" href="#">
<input type="hidden" id="myhiddenfield" name="reportID" value="#view.ReportCode"/>
<i class="material-icons right">more_vert</i>
</a>
below code use for get value from hidden field.
$('.dialog-opener')
.click(function () {
var reportId = $("#myhiddenfield").val();
$("#dialog-modal").dialog("open");
alert(reportId);
});
try above code . its working fine.

How write a script that works on modal popup & on full page

I have the following view which is forced to be displayed as a modal popup using jQuery :-
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" /> | #Html.ActionLink("Back to List", "Index")
</div>
</div>
</div>
}
<span id="progress" class="text-center" style="display: none;">
<img src="~/img/ajax-loaders/ajax-loader-5.gif" alt="wait" />
Wait..
</span>
and i wrote the following script, which will fires if the user click on Create/Edit/Delete links . where the script will show a progree message + disable the submit button:-
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
height: 1000,
width: 1200,
resizable: true,
keyboard: true
}, 'show');
$('#myModalContent').removeData("validator");
$('#myModalContent').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#myModalContent');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('.btn btn-default').prop("disabled", "disabled");
$('#progress').show();
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
but let say the that the user instead of clicking on the link, he chose to "Open link in new browser" , so the view will render insdie the browser (not as modal popup) and the script will not fire, so when the user click on submit button,, the submit button will not be disabled + the progress will not be shown?
So can anyone adivce where i need to place a script that always works ?