Bootstrap: enabling callback functions for modal show or hide.

[theeluwin]

I'm just wondering that if .modal('show') or .modal('hide') takes callback function, then it might be convenient for some cases.

Here is full context of my issue: http://stackoverflow.com/questions/21316834/is-there-any-reason-that-bootstrap-supports-only-event-emitting-rather-than-cal

To summarize the question above, I'm trying to build something like http://jsfiddle.net/theeluwin/dva6L/1/ to implement situations like http://jsfiddle.net/theeluwin/r7Qa2/6/, http://jsfiddle.net/theeluwin/8Vagr/1/ or http://jsfiddle.net/theeluwin/9uFsp/1/.

This stuffs can be done by https://github.com/theeluwin/bootstrap/commit/d48ca2b9ab787fec695b6b44b362844c3438df4e, and I do know that this is just tricky compromise, but at least grunt test gave no errors.

I'm submitting this as an issue rather than pull request because I'm not very sure about my works.

[cvrebert]

The modal show/shown events have a relatedTarget property which is the element that was clicked on to trigger the modal. You can use this to vary the modal content accordingly.

[theeluwin]

Well actually I'm considering about situations in more general, like "a modal should vary by some ajax result", or any variables that cannot be determined by examining the relatedTarget. I do know that this issue is not heavily necessary since there are other ways to do it..

[tmorehouse]

You could do something like this to emulate callbacks when needed:

$('#button').on('click', function(evt){
    $('#myModal').one('shown.bs.modal', function (e) {
        // this handler is detached after it has run once
    }).one('hidden.bs.modal', function(e) {
        // this handler is detached after it has run once
    }).modal(options);
});

Passing data back to the "callback" sections from within the modal might need a bit of thought. Maybe store the data in the opening element or the modal element i.e. via $('#myModa').data(...)

[theeluwin]

@tmorehouse Well, I thought that storing extra variables might be kinda not-meaningful to this callback-style, and maybe using one would be best solution for this situations. I was just wondering if bootstrap would like to use this callback-style API. thanks.

[cvrebert]

@fat Your opinion?

[tmorehouse]

Just thought of a way to pass some relevant data to the pseudo callback one time events:

function evtHidden(evt) {
    // evt.data contains the data object passed in the button click event
}
function evtShown(evt) {
    // evt.data contains the data object passed in the button click event
}
$('#button').on('click', function(evt){
    var data = { 
        foo: 'bar', 
        fiddle: 'sticks'
    };
    $('#myModal')
        .one('shown.bs.modal', data, evtShown) // only called once
        .one('hidden.bs.modal', data, evtHidden) // only called once
        .modal(options); // open the modal
});

I forgot about event data attachment. Still not completely elegant, but is an option.

[fat]

sorry, yeah im really against adding callbacks to our api. events are a more powerful api for a number of reasons… particularly for something like show/hide. And don't want to support both.

thanks though!

[fguillen]

My two cents here, I am facing the same situation that started this thread.

I my case I have a Modal (M1) with some elements that open another Modal (M2). In case the M2 should be shown I have to first hide M1, and when it is hidden then I can show M2. Same thing, when M2 finished its closed action I want to show M1 again.

Playing with events here could be insane because not all M1.hide should trigger a M2.show, and there are multiple M2 so I can't really set up a general M1.hide event to show the proper M2.. All hide/show chains have to be configured individually.

Callbacks here would be very useful.

I am playing with TimeOuts now, which is very fragile solution

Thanks

f.

[robins35]

Just want to drop in and say, I also found my way here after coming across the same problem OP had.

[pushpendraraj]

need some clarity

[rakeshmishrait]

@pushpendraraj : You can direct check using jQuery Model Box is visible then you add bootstrap js of hiding the model that you can use