Auto close a Modal Popup instead of using a button/on-click - javascript

I currently have a page that is refreshing and I want to place a modal popup on the screen that gives the user a message such as "Please wait...". The reload is being performed with a $state.reload().
GenericModalService.confirmationSplit($rootScope, modal);
$state.reload();
function confirmationSplit(scope, modal) {
scope.modal = modal;
scope.modalInstance = $uibModal.open({
templateUrl: 'Scripts/app/Modals/ConfirmationSplit.html',
scope: scope,
size: 'md',
backdrop: modal.backdrop != null ? modal.backdrop : true,
})
}
Is there a way that I can close the modal once the $state.reload(); finishes? If not, is there a way that I can set an auto-timer for about 2-3 seconds and then have the modal close without the need to close/dismiss the modal using a button?

Bootstrap uses a jquery plugin to manually manage modals, I think in your case there are 3 useful methods:
// NOTE: I'm assuming the modal's id is #message
//show a modal:
$('#message').modal('show');
// close a modal:
$('#message').modal('hide');
//capture 'modal shown' event:
$('#message').on('shown.bs.modal', function (e) {
// do something...
})
You can use the above pieces of code to manually show the modal and to hide it after the reload event ended.
if you can't catch the reload ended event you can easily set up an interval once the modal has been shown and close it after a set amount of time like this:
$('#message').on('shown.bs.modal', function (e) {
console.log('modal has been shown');
setTimeout(function () {
console.log('closing modal...');
$('#message').modal('hide');
}, 3000)
})
related bootstrap doc: https://getbootstrap.com/docs/4.0/components/modal/#via-javascript

Related

How can I use document.referrer with two different modals?

I have two different modals on my website, one with specific domains to target, the other to target all pages with domain website.com. Both modals are targeting the document.referrer and each modal has a different id (#closureModal and #parkModal).
My issue is that the #parkModal is firing on all pages (rather than specific pages: website.com/parks/park1, website.com/acitivies/park1, etc) since it starts with the domain website.com.
How can I allow two different modals target the document.referrer without one appearing where it's not meant to? How can I use document.referrer with two different modals?
here is #closureModal's code:
const tsp = ["website.com"];
const closureReferrer = document.referrer;
const referrer_hostname = closureReferrer !== "" ? new URL(closureReferrer).hostname : "";
if (tsp.includes(referrer_hostname)) {
console.log("Don't Show Modal", closureReferrer);
} else {
console.log("Show Modal", closureReferrer);
$( window ).on('load', function() {
console.log("closure modal firing");
$('#closureModal .closure').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
}
the #parkModal is similar code:
const domains = ["https://website.com/parks/park1", "https://website.com/parks/events/park1", "https://website.com/parks/events/park1", "https://website.com/parks/promotions/park1", "https://website.com/parks/go-green/park1", "https://website.com/parks/info/park1", "https://website.com/parks/activities/park1", "https://website.com/parks/events/park1/#/?park=park1"];
const parkReferrer = document.referrer;
if (domains.includes(parkReferrer)) {
console.log("Don't Show Modal - from Cummins page", parkReferrer);
} else {
console.log("Show Modal - From other Page", parkReferrer);
$( window ).on('load', function() {
console.log("park modal firing");
$('#parkModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
}
I don't immediately see the issue but I do have some advice on what may help you move closer to both better code and something that is easier to diagnose.
I see a lot of code duplication. Is it necessary to have two different window onload events that both look at the referrer and then decide which modal to display? My recommendation is do it all in one onload handler that looks at document.referrer only once, then determines what modal to display (if any).
Something kinda like:
$( window ).on('load', function() {
console.log("park modal firing");
// define your parkReferrers and closureReferrers here
const referrer = document.referrer;
const displayParkReferrerModal = parkReferrers.includes(referrer);
const displayClosureModal = closureReferrers.includes(referrer);
let modalToDisplay;
if (displayParkReferrerModal) {
modalToDisplay = '#parkModal';
} else if (displayClosureModal) {
modalToDisplay = '#closureModal .closure';
}
if (modalToDisplay) {
console.log(modalToDisplay);
$(modalToDisplay).modal({
backdrop: 'static',
keyboard: false,
show: true
});
return;
}
console.log('no matching modal to display');
return;
});
Hope this is helpful. You could also abstract this to a handleReferrerModal function that you then invoke in the load event handler. That might be cleaner if you have multiple different things happening on load.

modal-open class gets dropped when opening a modal from a modal

I have a modal link inside a modal. The idea is to close that modal when it's fired and open another modal. The problem is, the modal-open class gets dropped when doing this which then causes scrolling issues inside the modal. Is there any way around this?
The link inside the Modal 1 is
Open Modal 2
And the code:
$( document ).on( "click", ".edit_item", function() {
var id=$(this).attr("rel");
var row=$(this).data("row");
var params="action=viewItem&item_id="+id+"&tbl=viewRow&row="+row;
$('.modal').modal('hide');
// Needed to wipe the content due to the different IDs ..
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).find('.modal-body').empty();
});
// Opening Modal 2 here ..
open_box_edit(params,row);
});
And the modal firing:
function open_box_edit(params,row_id)
{
var URL=ajax_url+"/?"+params;
console.log(params);
console.log(row_id);
var modal = $('#modal_edit');
modal
.find('.modal-body')
.load(URL, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.modal("show");
}
});
}
How can I make sure that modal-open stays even after firing $('.modal').modal('hide');?

Bootstrap-confirmation not respecting options

Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.
Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.

Angular ui bootstrap modal call close function when closing from overlay

How can i run the same function when the user is closing the modal from the overlay?
For example now i have close button with this function:
close() {
this.$modalInstance.close();
this.AlertService.reset();
}
But when the user close the modal from the overlay this function does not run.
Take a look at the angular bootstrap documentation.
$modal.open returns a modal instance, with one parameter being 'result'. This is a promise triggered when the modal is dismissed.
var $modalInstance = $modal.open({ ... });
$modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Also, note the modal.closing event which is broadcast before closing, and can be used to prevent closing with 'event.preventDefault'.

stop and later persue javascript event in jquery ui modal dialog

I want to stop an event show a modal dialog and if the user presses yes persue this event. event.run() brings an error in firefox.
jQuery(element).click(function(event) {
event.preventDefault();
dialog.dialog({
buttons: {
'Ja': function() {
event.run();
},
'Nein': function() {
jQuery(this).dialog('close');
}
}
}).dialog('open');
});
Thanks to a friend and hashbrown I managed to solve this problem. An event cannot be paused and persued. If it is paused it will block the whole DOM. Try:
jQuery(link).click(function(){while(true)});
When using jQuery its possible to set additional event parameters what I did:
jQuery(element).click(function(event, show_dialog) {
var that = jQuery(this);
if(!show_dialog) {
dialog.dialog({
buttons: {
'Yes': function() {
that.trigger(event.type, [true]);
},
'No': function() {
jQuery(this).dialog('close');
}
}
}).dialog('open');
return false;
} else {
dialog.dialog('close');
return true;
}
});
First click show_dialog is undefined and modal dialog is shown. Clicking on Yes in modal dialog triggers the event.type (click) with the additional parameter true for show_dialog. http://api.jquery.com/trigger/#trigger-eventType-extraParameters
It was not possible to that.trigger(event, [true]);. I think cause events default action was prevented before.
That is because immediately after creating the popup the function returns and the event expires.
What you'll have to do is .trigger() a new event.
Note: set some sort of global variable to ignore this second event firing in your anonymous function (infinite loop problem).
Can I ask why you want to do this; what would click go off and do if you let it?
If it just fires off a different function, why not just call that function instead of attempting event.run()?

Categories