I have an xpage (viewed via web browser) which has many <xe:dialog...> controls on it, resulting in bootstrap modal dialogue boxes.
I want to run some client-side script when any dialogue is closed.
So I tried ..
$('.modal').on('hide.bs.modal', function() { ...}
However this didn't work, I suspect because when the xpage is loaded there aren't actually any elements with class 'modal', until one is opened. Then a partial refresh injects the relevant HTML.
So I tried running that line above in the event when the modal opens (in the xpages onShow event), but that didn't fire either. I guess the event might be 'when the modal opens but before it's displayed' meaning the elements aren't ont he screen then either.
So I also tried (hack, hack) a setTimeout of 2 seconds to allow the modal to show first, but still no luck.
So .. question is ..
Using xpages bootstrap modals, via the standard xe:dialog control, how can I attach a client-side javascript event whcih will run when the modal is closed / hidden ?
You can use Event Delegation to bind the listener to a parent element of the (non-existing) modals and trigger a function when a click happens on elements matching the .modal selector in that parent element:
$(document).on("hide.bs.modal", ".modal", function () {...});
I do something similar to this, where a button selection on one modal, closes said modal, and then depending on the button that was clicked, opens the next modal. Instead of doing that, could you not run your script in the same way?
var
currentModal = $(this);
//click next
currentModal.find('.btn-close').click(function(){
currentModal.modal('hide');
OTHER STUFF?
EDIT - My full code:
<script type="text/javascript">
$("div[id^='myModal1']").each(function(){
var
currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal3']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal2']").first().modal('show');
});
});
$(window).on('load',function(){
$('#myModal1').modal('show');
});
</script>
Related
I have a JavaScript code to hide and show an upload input using a checkbox inside a bootstrap modal, it is working when modal is fired up the first time, but on the second i open the modal, and click on the checkbox to show the upload input, it shows but then it automatically hides it.
$('.modal').on('loaded.bs.modal', function (e) {
$(".upload_file").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".upload_file").slideToggle();
});
//jquery validation goes here...
});
What am i missing here, hope you guys can help. TIA.
You are creating multiple click events, every time you open the modal it creates a new one.
Change
$('.show_hide').click(function(){
$(".upload_file").slideToggle();
});
to
$('.show_hide').off('click').on('click', function(){
$(".upload_file").slideToggle();
});
This will kill the first click event, and then rebind it.
Alternatively you could move the binding for the click event out of the modal initialisation so it only gets called once.
$('body').on('click','.show_hide',function(){
$(".upload_file").slideToggle();
});
How do you hide a bootstrap popover if the parent element, that triggered this popover, is removed from the dom?
If a user clicks a button on my page, some content will be loaded into a div via ajax. On the next click on a different button, another ajax call will replace the content in this same div.
The content loaded into this div contains elements that act as Bootstrap Popover triggers, like this one:
<a class="infolink" data-toggle="popover" data-title="some title" data-placement="bottom" data-trigger="hover click" ></a>
The popovers get initialized after every successful ajax call:
$(document).ajaxSuccess(function(){
var init = function() {
$('[data-toggle="popover"]').each(function(index) {
initPopover(this); //This is where the popover gets initialized
});
}
window.setTimeout(init,100); // set timeout to prevent function from being executed before content is replaced
});
The problem after a ajax call is, if a popup was visible, it stays visible even after the parent element has been removed. This is not an uncommon issue with popovers or dialogs according to google results, but the solutions I've come across so far did not seem very clean to me.
Two solutions, just to name some:
Hide every popover once an ajax finishes with success. This is not an option, because the content of my popovers is loaded dynamically via ajax once they get opened.
Have an array store all trigger elements. Once a Ajax success event occurs, loop through that array and check if that element is still there.
//Pseudocode
var popoverTriggers = [];
$('[data-toggle="popover"]').each(function(index) {
popoverTriggers.push(this);
}
Doesn't seem very clean to me either.
Does anyone know of a better way to do this?
I added a
$('.popover').remove();
To the event that should trigger the removal of the popover. This worked great for me.
I have several buttons that are generated dynamically.
To handle the click events on those buttons I've been using:
$(document).on('click', '.button-class', function() {
// code here
});
The problem is, if the button is dynamically generated again. The click event seems to be bound to the document or something and so clicking that button again will fire the code inside twice. If the button is dynamically generated again it triggers thrice. That's the big issue here because my site is no refresh. So there is instances where content is generated again.
I could use
$(document).unbind('click').on('click', '.delete-order-btn', function() {
//Code
});
Using the unbind, and applying unbind to all my dynamically generated buttons causes them to no longer trigger if they are generated more than once.
I have a div inside my html with the id pageContent. When users click various buttons, it will load the appropriate content. When a user clicks the javaQuestions button it loads, javaQuestions.html into the div just fine. However, inside, the javaQuestions.html, I have a collapsible list, and I can't figure out a way to "bind" the li collapse/uncollapse without having the user to click TWICE. Right now what I have is:
$("#pageContent").on('click', 'li', function (){
$('.collapsible').collapsible();
});
So I guess what happens is, first the user clicks on the button, and it loads content. Then, the user clicks on any li, and it enables the "collapsible()" function, but does not uncollapse/collapse the content. Only when the user clicks a second time does it works fine. I tried adding the line $('.collapsible').collapsible(); into the event that loads the javaQuestions.html content, but it doesn't do anything. Kind of at a roadblock, any ideas?
EDIT: Here is the code that loads the content:
$("#pageContent").on('click', '#javaQuestions', function (e) {
fadeIn("#pageContent", "../java-questions/javaQuestions.html", 50);
fadeIn("#commentsContent", "../comments/comment-section.html", 500);
});
I also really want to know how this will function once I figure it out. But as you can see, the above function loads the javaquestions.html, and I can't seem to find a way to ALSO bind 'li' to be collapsible in one swoop.
Have you tried using jQuery bind method? You can bind your handler to, say, body and then you don't have to care about loading and attaching a handler after it.
Update: may be this will help:
$(document).ready(function() {
$("body").on('click', '#pageContent li', function (){
$('.collapsible').collapsible();
});
});
Use this DOCUMENT because it is dynamically loaded
$(document).on("click","li #pageContent",function(){
$('.collapsible').collapsible();
});
So when the first modal (this.$avatarModal) is closed, I would like a second modal (this.$modaldata) to open.:
The following sequence works however there are issues with the scrolling of the second modal not functioning:
this.$avatarModal.modal('hide');
this.$modaldata.modal('show');
As a solution to the scrolling issue, the dev on github are recommending to bind the event. However the following code, using .on does not work (the second modal does not open.
this.$avatarModal.modal('hide');
this.$avatarModal.on('hidden.bs.modal', function () {
this.$modaldata.modal('show');
});
However, If i replace the show event with an alert, the alert opens:
this.$avatarModal.modal("hide");
this.$avatarModal.on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
});
This tells me that all the commands here are working, however having the 'show' method within the .on('hidden'... event does not seem to work.
Is there a reason for this incompatibility and how I can correctly open up the second modal after the first modal closes?