Angular ui bootstrap modal call close function when closing from overlay - javascript

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'.

Related

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

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

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');?

Angular $scope variable not being shown on Bootstrap modal init

I am using FullCalendar with angular and it has worked well so far. However when I click on an event, I present a modal with information about an event.
eventClick : function(event) {
$scope.clickedEvent = $filter('filter')($scope.events, {eventID: event.id})[0];
console.log($scope.clickedEvent);
GetEvent($scope, $scope.clickedEvent, $filter);
// opening the event modal
$("#eventModal").modal("show");
},
And this works for the most part but for display my event I have lines like
<td class="col-md-6"><label class="horizontal-table-title">{{clickedEvent.eventStatusID}}</label></td>
And these are not filled. In my initial call I am doing a console.log() and this shows my clickedEvent $scope variable and shows that it is filled with the event information.
My GetEvent() function looks like
function GetEvent($scope, event, $filter) {
// Init date and time pickers
InitPickers($scope);
$scope.submitInfo = angular.copy(event)
// Converting the event date to a moment.js object for better display
// Also need to seperate the date and time as it comes in as one string but edited as two
var eventDate = moment($scope.clickedEvent.eventStartDateAndTime).format('MMMM Do YYYY');
var eventTime = moment($scope.clickedEvent.eventStartDateAndTime).format('hh:mm a');
// Modal event info body
$("#claim-id").text($scope.clickedEvent.attachedClaim.claimId);
$("#event-date").text(eventDate);
$("#event-time").text(eventTime);
// Modal event edit body
$("#datepicker").attr("value", eventDate);
$("#timepicker").attr("value", eventTime);
$("#event-edit-status").val($scope.clickedEvent.eventStatusID);
$("#event-edit-description").val($scope.clickedEvent.eventDescription);
$("#event-edit-resource").text($scope.clickedEvent.eventResourceName);
$("#event-edit-resource-address").text($scope.clickedEvent.eventResourceAddress);
}
I also have an function called EventRefresh with is bound to a checkbox that changes the view of the modal from displaying events to being able to edit events.
<label>Change View Type:
<input type="checkbox" ng-model="checkboxModel" ng-click="eventRefresh()">
</label>
Which calls GetEvents()
scope.eventRefresh = function() {
GetEvent($scope, $scope.clickedEvent, $filter)
}
And once this is checked all the information in {{clickedEvent}} is displayed. Only on the initial opening of the modal that nothing shows.
As charlieftl pointed out in his comment above I needed to use
$scope.$apply()
So I wrapped my GetEvent() function with it. My code went from
eventClick : function(event) {
$scope.clickedEvent = $filter('filter')($scope.events, {eventID: event.id})[0];
console.log($scope.clickedEvent);
GetEvent($scope, $scope.clickedEvent, $filter);
// opening the event modal
$("#eventModal").modal("show");
},
To:
eventClick : function(event) {
$scope.clickedEvent = $filter('filter')($scope.events, {eventID: event.id})[0];
console.log($scope.clickedEvent);
$scope.$apply(function() {
GetEvent($scope, $scope.clickedEvent, $filter);
// opening the event modal
$("#eventModal").modal("show");
});
},
Thanks charlieftl!

ionic framework two popups in tandem

I have an ionic app where the user taps a button, then a popup shows up and then the user taps a button in the popup and another one shows up. This works fine in the browser but when I deploy it to an android device, after the second popup closes the page freezes and I can no longer tap the main button on the page.
Here's a short but complete app demonstrating my problem.
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- version 1.0.0-beta.9 -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script>
angular.module("app", ["ionic"])
.controller("controller", function ($scope, $ionicPopup, $timeout) {
var popup1;
$scope.popup1 = function () {
popup1 = $ionicPopup.show({
template: '<button ng-click="popup2()">popup2</button>',
title: 'popup1',
scope: $scope
});
}
$scope.popup2 = function () {
$ionicPopup.alert({
title: "Popup 2"
}).then(function () {
/*
$timeout(function () {
popup1.close();
});
*/
popup1.close();
});
}
});
</script>
</head>
<body ng-app="app" ng-controller="controller">
<button ng-click="popup1()">popup1</button>
</body>
</html>
The reason this isn't working is likely that the second popup is opening before the first one closes, which could be killing Ionic's knowledge that the first one exists. If you kill the first popup before the open the second one, that should solve the issue.
I see a few options:
1. Create your buttons in an Ionic way and use the onTap method
$scope.popup1 = $ionicPopup.show({
template: 'Your template here',
title: 'popup1',
scope: $scope,
buttons: [
{
text: 'Popup2',
onTap: function (e) {
$scope.popup1.close();
return $scope.popup2();
}
}
]
});
2. Close popup1 first thing in popup2()
$scope.popup2 = function () {
$scope.popup1.close();
// Open popup 2
}
3. Open popup2 in a timeout
If the above don't work, put a timeout around the code in popup2 to give Ionic the time to close the first popup.
$scope.popup2 = function () {
// Move to the bottom of the queue to let Ionic close the first popup
$timeout( function () {
// Load popup2
});
};
My solution:
$rootScope.solidAlertPromise = $q.resolve(); // make the very first alert happen immediately
//lets create a reusable function to get rid of static and local problems
window.alert = function(message) {
//chaining does the trick
$rootScope.solidAlertPromise = $rootScope.solidAlertPromise.then(
function() {
//New Popup will rise as soon as the last Popup was closed (resolved).
//but it will rise immediately after closing the last Popup - definitely!
return $ionicPopup.alert({title: 'solidAlert', content: message});
}
);
};
//Now we can call our function sequentially
alert('After max has closed this alert-popup, the next one will rise immediately!');
alert('Next one -press OK to get the nex one-');
alert('and so on');
That's just for eplanation purpose: We should have a look at the rejection-cases etc.!
$ionicPopup.alert
can be replaced with
$ionicPopup.show
I think.

Twitter Bootstrap Popover hides immediately after show

I am trying to use Bootstrap popovers for error showing. The code works well only after first click on the button. During next clicks popover is showing but disappear immediately.
Added simple helper for popover re-usage:
var popoverHelper = function (selector) {
var $element = $(selector);
$element.popover({
placement: "bottom",
trigger: 'manual'
});
return {
showPopover: function (text) {
$element.attr('data-content', text);
$element.popover('show');
},
hidePopover: function () {
$element.popover('hide');
},
destroyPopover: function () {
$element.popover('destroy');
}
};
};
Using helper:
var pHelper = popoverHelper('#postInput');
$('#postButton').click(function (e) {
e.preventDefault();
// hide open popover if open
pHelper.hidePopover();
...
// some functionality
...
// show popover if some errors
pHelper.showPopover('error occurs!!');
});
jQuery used - 2.1.1, Twitter Bootstrap - 3.1.1.
Full sample at jsfiddle.
Small note: If I call popover destroy and if I do popover re-init on show, all works well.
But I think it is not optimal.
Jsfiddle sample.
Check this Demo Fiddle
A better solution would be to hide popover on user action on the error field.
$('input').focus(function(){
pHelper.hidePopover();
});

Categories