Develop Reference

Hide a Bootstrap Modal after a Patial View return from an Ajax call

When I make an ajax call, I show my modal (options.beforeSend). But, when I get an ajax result error (options.error) I would like to hide this modal. I've tryied but no success.
Index.cshtml
#* Modal - load spin *#
<div class="modal fade" id="itemLoader" tabindex="-1" role="dialog" aria-labelledby="ModalLabel2" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body d-inline text-center">
<div class="spinner-border spinner-border-sm text-info" role="status">
<span class="sr-only small"></span>
</div>
<span class="far fa-dizzy fa-3x text-secondary" style="display:none;"></span>
<label id="ModalStatus">Loading...</label>
</div>
</div>
</div>
</div>
Before send I toggle/show the modal:
options.beforeSend = function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
// My modal (works fine)
$('#itemLoader').modal('toggle');
$('#itemLoader').modal('show');
};
options.success = function (data) {
if (data.idOrder!= null) {
window.location.href = "/app/order/order?Id=" + data.idOrder;
}
};
If error (after a partial view return, from ModelState is not valid), I am trying to hide the modal, but I can't:
options.error = function (res) {
// When my modelState is not valid, return partial view with required messages (working fine)
$('#chkForm').html(res.responseText);
// But I can't hide the modal (does not work)
var modal = $("#itemLoader");
modal.hide();
// hide modal (does not work)
$('#itemLoader').modal('hide');
$('#itemLoader').hide();
};
I have tryied the close button on modal, but no sucess as well:
<button id="btnclosemodal" class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
// Does not work
$('#btnclosemodal').click();
// Does not work
$("#btnclosemodal").trigger("click");

error function will be called if the request fails. I think here it will not enter the error function since it return the partial view normally. You can use f12 and debug it in the source tab.
Instead, I think you should hide the modal in the success function.

You can try to toggle the modal on error, like this:
$('#itemLoader').modal('toggle');

How to pop up the modal div MVC

I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>

Open modal dialogue in catch block

I have this code in my action
var singedUser = HttpContext.User.Identity.Name;
try
{
_purchaseService.PurchaseCard(singedUser, cardName);
}
catch
{
}
And I want this to open ONLY if the code enters the catch block
<div id="Modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Purchasing Card</h4>
</div>
<div class="modal-body">
<p>You have unsufficient funds!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
And here is my button
<a class="button btn btn-success"
asp-controller="Store" asp-action="Buy"
asp-route-data ="#card.Name">Buy (#card.Price coins)</a>
I would appreciate if someone would tell me how I can open this dialogue box in the same page only if the code enters the catch block

You can also use an ajax call to return the partial view and add it to the DOM. Setting up a modal to load a partial view is actually pretty straight forward :
Create partial view : _ModalContent.cshtml
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Purchasing Card</h4>
</div>
<div class="modal-body">
<p>You have unsufficient funds!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
Modify your Index page :
<a id="button1" class="button btn btn-success"
asp-controller="Store" asp-action="Buy"
asp-route-data ="#card.Name">Buy (#card.Price coins)</a>
<div id="myModal"></div>
#section Scripts{
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("#button1").on("click", function (e) {
$('#myModal').load(this.href, function () {
$('#Modal').modal({
keyboard: true
}, 'show');
});
return false;
});
});
</script>
}
Controller function :
public IActionResult buy(string data)
{
.....
{
return PartialView("_ModalContent");
}
}

I would pass a variable through the ViewBag on the controller/action. Something like this in the controller:
var singedUser = HttpContext.User.Identity.Name;
try
{
_purchaseService.PurchaseCard(singedUser, cardName);
}
catch
{
ViewBag.ShowModal = false;
}
Then toggle whether or not to trigger JQuery to show the Modal in the scripts section of the view:
#section Scripts{
<script>
#if(ViewBag.ShowModal == true){
#Html.Raw("$('#Modal').modal('show');");
}
</script>
}

repetition of modal windows with different buttons

I have two buttons in a view that call different modal windows ("AgregarProducto") and ("CargarOrden")
Cargar O. de Compra <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
Agregar Producto <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
These are loaded using the following Javascript code:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#AgregarProducto.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#AgregarProducto').modal('show');
}
else {
$.get(url, function (data) {
$('#AgregarProducto .te').html(data);
$('#AgregarProducto').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#CargarOrden.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#CargarOrden').modal('show');
}
else {
$.get(url, function (data) {
$('#CargarOrden .te').html(data);
$('#CargarOrden').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
}
The problem is that clicking on a button loads the window twice! (I attach a photo)
in my controllers I made sure to call a partial type view
[HttpGet]
public ActionResult AgregarProducto()
{
return PartialView();
}
[HttpGet]
public ActionResult CargarOrden()
{
return PartialView();
}
I'm using bootstrap to call my views "AddProduct" and "LoadOrder" from my main view ... my two containers:
div class="modal fade" id="AgregarProducto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body"><div class="te">Espere Porfavor...</div></div>
</div>
</div>
</div>
<div class="modal fade" id="CargarOrden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body"><div class="te">Espere Porfavor...</div></div>
</div>
</div>
</div>
I have never worked with modal windows, what happens? what am I doing wrong? any help for me?

You have 2 scripts, one which opens the AgregarProducto modal, and the one which opens the CargarOrden modal.
Because both scripts are executed when ever you click on a link with class="dialog-window", (which both your links have), then both scripts are executed, and both modals are displayed.
A simple solution is to just give your links an id attribute, say id="cargarorden" for the first link and id="agregarproduct" for the second, then change the scripts to
$('#cargarorden').click(function(e) {
.... // you code that opens the CargarOrden modal
});
$('#agregarproduct').click(function(e) {
.... // you code that opens the AgregarProducto modal
});
Note that since the links are not loaded dynamically, then there is no need to use event delegation using .on().
A better alternative would be to identify the associated modal in the link using a data- attribute so that only one script is required
<a data-dialog="CargarOrden" href="#Url.Action("CargarOrden", "Entradas")" ...>
and then
$('.dialog-window').click(function(e) {
// Get the associated dialog
var dialog = $('#' + $(this).data('dialog'));
....
});
and within that script, use dialog as your selector, i.e.
dialog.find('.modal-title').html(title); // instead of
dialog.modal('show'); // instead of $('#CargarOrden').modal('show');
dialog.find('.te').html(data); // instead of $('#CargarOrden .te').html(data);

error in opening Ajax Modal

I'm currently building a webapp in MVC C#. I want to open a popup window, where the user can enter lots of information, so he can make a new 'user'. However I have trouble making the window actually pop up. Later on, I'd also like to close the window, though I doubt that'll be much trouble after I got this. Below is my code so far:
<button class='btn btn-lg btn-default giveMeSomeSpace leaveMeAlone createUser dialog' onclick='createNewApplication()'>Create a new application</button>
<div class="modal" id="modal-new-app" tabindex="-1" role="dialog" aria-labelledby="modal-new-app" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
...
<div class="modal-body">
</div>
</div>
</div>
</div>
...
function createNewApplication() {
$.ajax({
url: '#Html.Raw(#Url.Action("Create", "User"))',
success: function (data) {
$("#modal-body").html(data);
},
cache: false
});
$('#modal-new-app').modal('show');
}
EDIT: corrected a typo, though that wasn't the error. Additionally, the error I get in Console of Chrome dev tools:
Uncaught TypeError: undefined is not a function
referring to
$('#modal-new-app').modal('show');

My and my college have been looking and we got it working.
<div class="modal" id="modal-new-app" tabindex="-1" role="dialog" aria-labelledby="modal-new-app" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span>
<span class="sr-only">Close</span></button>
<h4 class="modal-title">Create a new user</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
.
$(document).ready(function () {
createNewApplication();
$('#tableApps').DataTable();
});
function createNewApplication() {
$.get('#Html.Raw(#Url.Action("Create", "UserIS"))', function (data) {
$('#modal-new-app .modal-body').html(data);
});
}