Does Bootbox.js have a method for invoking a function upon successfully showing a dialog?
I had originally planned to use it to switch a hidden form from elsewhere in the page into the Bootbox, but that can't be done without a callback or callback analogy. Then I devised a way of moving the hidden form in, and in a forehead-smacking cringe-worthy moment I realized that I still needed a callback (or analogy) to now reveal the form (remove the 'hide' class, add the 'in' class).
The documentation does not seem to show a built in property that will allow me to do this (bootbox.init shows promise, but I don't fully understand it, it is not documented with examples, and it seems to be global. I use many bootboxes). Is there another way I can do this? Does Bootbox publish an event of some sort?
.init() is called on a specific dialog, as I showed someone else here: https://jsfiddle.net/Lu1wp3nn/
A simplified example:
bootbox
.alert('Your message')
.init(function() {
/* do something */
});
Because bootbox.js is just a wrapper over Bootstrap's modals, you have access to the modal events that Bootstrap defines. You're after shown.bs.modal (or show.bs.modal if you want to do something just prior to the dialog being shown).
Here's an example, adapted from the Bootstrap docs:
bootbox
.alert('Your message')
.on('shown.bs.modal', function (e) {
// do something...
})
To general use:
bootbox.alert|confirm({
"title": lang['EMBED'],
"message": content
}).on("shown.bs.modal", function(e) {
alert()
});
Related
In my WebApp I want to show a customized popover that will be triggered when a variable in my controller is set. To achieve this I've created a custom trigger event and set it with $tooltipProvider.setTriggers({"showChat": "hideChat"}]
Here is a plnkr.co of my code that does not working.
I also checked other solutions here on StackOverflow (like AngularJS Bootstrap Tooltip - trigger on event or Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?) that seem to work, but I can't figure out where my code is wrong.
I assume it's just a little thing (like always.. :-) )
Angular-bootstrap seems to use addEventListener to subscribe to this event, which means you cannot trigger it with .trigger(), what you'll need is dispatchEvent:
if(scope.showPopover) {
console.log('trigger showChat')
element.get(0).dispatchEvent(new Event("showChat"));
} else {
console.log('trigger hideChat')
element.get(0).dispatchEvent(new Event("hideChat"));
}
See in this fixed plunker.
Btw: unless you do something more complicated in your app, you can simply use popover-is-open="showPopover" to trigger the popover, like in this plunker
I'm using Bootstrap and using this to show a modal after a click event:
$('#make_selects_modal').appendTo("body").modal('show');
I need to be able to execute a function (called pickClient) when this is shown. I tried something like this, but it doesn't work. Not sure of the correct syntax.
$('#make_selects_modal').appendTo("body").modal('show').pickClient();
When the modal is visible, an event called shown.bs.model is fired.
You can use
$('#make_selects_modal').on('shown.bs.modal', pickClient);
Modal event docs.
From the Bootstrap documentation you can use events for this, specifically in your case the shown.bs.modal event:
$('#make_selects_modal').on('shown.bs.modal', function () {
pickClient();
})
At work we have a popup dialog system that i would like to use to edit the contents of a widget in CKEditor. Is there any way of going about this?
Does CKEditor have a way of calling outside and get a callback setting values on the Widget?
I have googled it for quite a while now with no success :(
When widget is being edited (on its initialisation, on doubleclick, on enter and when the widget.edit() method was called), then the widget#edit event is fired. The start of the code inside the widget.edit method looks like this:
edit: function() {
var evtData = { dialog: this.dialog };
// Edit event was blocked or there's no dialog to be automatically opened.
if ( this.fire( 'edit', evtData ) === false || !evtData.dialog )
return false;
...
}
This means that if the event was cancelled or there's no dialog name set in the widget.definition (your case, I guess), then after the event was fired nothing will happen.
So, to start, listen on the widget#edit event and show your dialog. Then, when the user presses "OK" button use widget.setData(). You also need to fire the editor#saveSnapshot event before and after doing any changes.
Also, read the documentation of the widget.repository#finalizeCreation method which will let you handle widget creation.
I would like to call some implemented validation Javascript method
validatePageProperties = function() {...}
When I click on the Button "Activate Later" (see the pic). Any Idea how to do this?
You will need to overlay the siteadmin at /libs/wcm/core/content/siteadmin. Just copy that node structure and place it at /apps/wcm/core/content/siteadmin. Then navigate to /apps/wcm/core/content/siteadmin/actions/activate/menu/activateLater and place your javascript function in the handler property. You may need your custom javascript handler to call the existing handler when it finishes.
Also your custom javascript will need to be loaded in the admin. You can do this by putting it into a client library (cq:ClientLibraryFolder) and assigning it a category of cq.wcm.admin.
On bootstrap modals, we know that we can bind events for triggers like show or hide using show, shown, hide, hidden, but this event binding only works for general case. What I want is 'specific case' such as:
$("#myModal").modal("show", function(e){
alert("This pops-up after #myModal is shown properly.");
});
or maybe using dictionaries for more options.
Anyway, I want to call some functions as callback after these modal triggers are done.
I do know that there can be alternative implementations, like using setTimeout to wait until the modal is completely shown or hidden, or just unbind the event inside the callback function so the event handler works only for once. Either way, it's not very convenient and ugly.
Can this feature be feasible feature request for bootstrap?
Also, I'm not very satisfied that to change modal's property after its init, I have to change it by directly managing $("#myModal").data("bs.modal").options.
Again, I'm asking about particular situation. I don't want to make callback function called for every show, shown, hide or what ever. Just for specific situation where the modal is triggered manually via javascript.
Here is an example:
Let's say that there are #myModal, and #btn-a, #btn-b.
$(document).ready(function(){
$("#myModal").on("shown.bs.modal", function(e){
console.log("myModal shown.");
})
$("#btn-a").click(function(e){
$("#myModal").modal("show");
});
$("#btn-b").click(function(e){
// There is no such thing like below. It's just pseudo code.
$("#myModal").modal("show", function(e2){
console("myModal shown by b.");
});
});
}
Then if #btn-a is clicked,
myModal shown.
will appear while if #btn-a is clicked,
myModal shown.
myModal shown by b.
will appear.
Again and again, I'm actually not asking how to make it. I already made what I want. What I'm asking is, will this feature be feasible feature request for bootstrap.
Check out the section titled Events here:
http://getbootstrap.com/javascript/#modals
Hopefully, it will give you all the information you need
You can use shown events to detect when the modal has been made visible on the screen:
$('#myModal').on('shown.bs.modal', function (e) {
alert("This pops-up after #myModal is shown properly.");
})
You can check for more information in the events section of modal here.