How to get xpages modal to fire a close event

0
votes

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 ?

2
javascriptjquerytwitter-bootstrapxpagesbootstrap-modal

2 Answers

1
votes

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 () {...});
1
votes

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>