Handling Errors Within a Modal - javascript

I have modal's that are loaded with a link (see below). Whenever there is an error loading the modal (i.e. loading the data in the modal via a wcf service call), there is just a grey screen, as if a modal is trying to open and no modal is loaded. An error is shown in chrome developer tools console which is expected
Additionally, if I click a modal link that loads properly, close that modal, and then click a modal link that generates an error, the previous modal is loaded.
How can I have it so either an error modal is loaded or so a user is redirected to the error page when an error occurs?
Layout (partial view)
<div class="container">
<div class="row">
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content col-sm-8 col-lg-offset-2">
</div>
</div>
</div>
</div>
</div>
// some code here...
$(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);
});
$('body').on('click', '.modal-link', function(e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function() {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');

Related

Modal BootStrap can not get variable asp from codebehind

In MinhasVendas2.aspx :
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
Forma de Pagamento
<%-- <%# Eval("desc_tp_pagamento") %>
teste--%>
</div>
<div class="modal-body">
Dados Pagto: <%=id_imobiliaria_pagamento%>
<label id="lblteste"></label>
</div>
<!-- dialog buttons -->
<div class="modal-footer"><button type="button" id="a.btn" class="btn btn-primary"data-dismiss="modal">OK</button></div>
</div>
</div>
</div>
<%--#modalformapagto fim--%>
codebehind:
public void gdvPagamentos_SelectIndexChanged(object sender, EventArgs e)
{
try
{
System.Threading.Thread.Sleep(1000);
List<pagamento> pagto = new List<pagamento>();
var id_imobiliaria_pagamento = gdvPagamentos.SelectedRow.Cells[0].Text;
//ClientScript.RegisterClientScriptBlock(this.GetType(), "", "myModal();", true);
ScriptManager.RegisterStartupScript
(Page,
this.GetType(),
"script",
"myModal();",
true);
}
catch(Exception ex){ }
}
Here is the script being triggered via codebehind:
<script type="text/javascript">
function myModal() {
$("#myModal").modal();
$("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function (e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
})
};
function myModalHide() {
$("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
})
};
function myModalHidden() {
$("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop": "static",
"keyboard": true,
"show": true // ensure the modal is shown immediately
})
}
;
</script>
I declare the variable id_imobiliaria_pagamento also outside the method and the data is recovered normal in codebehind.
But this same variable, with the modal open, and called in the html code inside the modal, shows nothing. Can anybody help me?
In the codebehind, inside the method I had declared the variable in a form (example var xxxxx) and out of the method I had defined as string ... with this was occurring the problem of not displaying it ... Strange that did not accuse error . I corrected for tb string inside the method and the contents of the variables came to be displayed.

Modal is transitioning error with bootstrap4 alpha6 modal

I am using bootstrap4 alpha 6 Modal, I am getting:
Error: Modal is transitioning
That happen when I am trying to re-trigger the same modal again with dynamic data through JavaScript function as following:
function openModal(title, text) {
$('.modal-title').text(title);
$('.modal-body p').text(text);
$('#modalAlert').modal('show');
}
I tried to use setTimeout function, but didn't work as in this article:
https://github.com/twbs/bootstrap/issues/21687
Any suggestions?
The quickest solution is to remove the modal 'fade' class which is throwing this error. It seems to be a known issue of the Bootsrap v6 that will be fixed in a next released.
See here
Worked with removing fade from parent div class.
Final Modal code ( Adding here for posterity ) :
HTML
<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<img src="ico/4.svg">
</div>
</div>
</div>
</div>
</div>
JS
$.ajax({
type: "GET",
url: "/getTimeline",
data: {
'dateTime': selected
},
async: true,
beforeSend: function () {
$('#applemodal').modal({
backdrop: 'static',
keyboard: false
});
},
success: function(data) {
$('#applemodal').modal('toggle');
}
});
i am using bootstrap 4 Modal too, My solution;
$(document).on('show.bs.modal', '.modal', function (event) {
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);
});
First open the modal and then try to find the DOM elements that's inside modal (eg. $('.modal-title') and $('.modal-body p'))
Changing the order of executing your function might work:
function openModal(title, text) {
$('#modalAlert').modal('show');
$('.modal-title').text(title);
$('.modal-body p').text(text);
}
Finally, make sure that modal is open/visible in the screen when you access HTML that's inside the modal.
Please set your button type='submit' to type='button'
My solution was to open the model programmatically rather than through the link.
Instead of:
Open My Modal
Use:
Open My Modal
$('#myLink').on('click', function(){
$('#myModal').modal('show');
})

Using bootstrap on confirm message onclick()

I'm new with bootstrap, and I've code for message confirmation.
How can I put my onclick() using this code below?
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
Html of bootbox:
HTML (image)
onclick() input:
<input type='submit' name='actualiza_noticia' class='button' onClick="" value='Atualizar notícia'>
You can use either use the jQuery function $(elem).modal('show') function, or the Bootstrap html data attributes:
Using data attributes:
<input type='submit' data-toggle="modal" data-target="#myModal" name='actualiza_noticia' class='button' value='Atualizar notícia' >
Using Jquery function:
<input onclick="$('#myModal').modal('show')" type='submit' name='actualiza_noticia' class='button' value='Atualizar notícia' >
These shuold both trigger your events, although the 'show' event is 'shown.bs.modal' to be in compliance with Bootstrap 3:
$("#myModal").on('shown.bs.modal', function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
Read more about bootstrap modal here.
According to the image that reports your html my proposal is:
change $("#myModal").on("show", function() { to `$("#myModal").on("shown.bs.modal", function() {
change $("#myModal a.btn").on("click", function(e) { to $("#myModal button.button.btn.btn-primary").on("click", function(e) {
change $("#myModal").on("hide", function() { to $("#myModal").on("hide.bs.modal", function() {
change $("#myModal a.btn").off("click"); to $("#myModal button.btn.btn-primary").off("click");
For details see bootstrap modals
$(function () {
$("#myModal").on("shown.bs.modal", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal button.btn.btn-primary").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide.bs.modal", function() { // remove the event listeners when the dialog is dismissed
$("#myModal button.btn.btn-primary").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog box -->
<div class="modal-body">
<button type="btn btn-default" class="close" data-dismiss="modal">×</button>
Hello world!
</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button type="btn btn-default" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>

Focus on Input when Bootstrap Modal closes

After a blur event on an input field "bootbox1", I want to use a Bootstrap Modal for an message, after the modal closes the focus would go to the input field "bootbox2". But the input field does not get focus.
What am I doing wrong?
Demo
HTML
<input type="text" id="bootbox" />
<input type="text" id="bootbox2" />
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>Hello world!</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
JS
$('#bootbox').on('blur', function checkSelection(e) {
$("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function (e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide');
$('#bootbox2').focus();
// dismiss the dialog
});
});
$("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
$('#bootbox2').focus();
});
$("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop": "static",
"keyboard": true,
"show": true // ensure the modal is shown immediately
});
});
//this works
$('#bootbox2').on('blur', function checkSelection(e) {
$('#bootbox').focus();
});
You need to wait for the hidden.bs.modal event to fire, not the hide.bs.modal.
According to the Bootstrap Docs for the event hide.bs.modal
This event is fired immediately when the hide instance method has been
called.
Whereas hidden.bs.modal
This event is fired when the modal has finished being hidden from the
user (will wait for CSS transitions to complete).
Since your focus is being called before the overlay has been removed the input cannot take the keyboard focus yet.

js not working in bs3 ajax modal

I am having some trouble with js inside my bs3 modals - it does not work. I am opening the modals with ajax.
main page
<i class="fa fa-plus-circle"></i> Activate this computer';
<div class="modal fade" id="modal-ajax" tabindex="-1" role="basic" aria-hidden="true">
<img src="/assets/img/ajax-modal-loading.gif" alt="" class="loading">
</div>
<script src="/assets/scripts/custom/custom.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
Custom.init();
});
</script>
custom.js
var Custom = function () {
// private functions & variables
// external window links
var externalWindows = function() {
$("a[data-window='external']").on('click', function() {
window.open($(this).attr('href'));
return false;
});
}
// public functions
return {
//main function
init: function () {
//initialize something here
externalWindows(); // external window links
}
};
}();
the link in the modal page
<a class="btn btn-primary" href="http://www.somesite.com/" data-window="external" onClick="$('#modal-ajax').modal('hide');"><i class="fa fa-shopping-cart"></i> Purchase Now</a>
All this does is open any link with data-window="external" in a new window in the browser. Since the modal page is opened with ajax the js from the main page doesn't 'pick it up' on load. I can add the function on my modal page as well, but then it causes issues with the main page.
What can I do here?
You can use event delegation so that the dynamically loaded links trigger your handler:
var externalWindows = function () {
function openWindow() {
window.open($(this).attr('href'));
return false;
}
$("a[data-window='external").click(openWindow);
$("#modal-ajax").on('click', "a[data-window='external']", openWindow);
};

Categories

Resources