Strange behaviour of Web2py Component with Bootstrap3 Modal

[Narūnas Krasauskas]

Hi,

I have found this strange behaviour of Web2py components when used with Bootstrap3 Modal.

Adding data-toggle attribute to the A() helper breaks bootstrap.

Please consider the following example.

Controller:

def test_modal():
    return dict()

test_modal.load view:

{{=BEAUTIFY(request.vars)}}

test_modal.html view:

{{extend 'layout.html'}}
{{=A('Open Modal + Load Data', callback=URL('test_modal.load', vars={"var1":"varX","var2":"varY"}), target="tst_modal_data", _href="#tst_modal", _class="btn btn-danger", **{"_data-toggle":"modal"})}}
{{=A('Without data-toggle Attribute', callback=URL('test_modal.load', vars={"var1":"varX","var2":"varY"}), target="tst_modal_data", _href="#tst_modal", _class="btn btn-warning")}}
{{=A('Open Modal', _href="#tst_modal", _class="btn btn-info", **{"_data-toggle":"modal"})}}


<div class="modal fade in" id="tst_modal" tabindex="-1" role="dialog" aria-labelledby="ext_modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="ext_modalTitleLabel">AJAX Modal</h4>
            </div>
            <div class="modal-body" id="tst_modal_data" style="max-height:calc(100vh - 200px); overflow-y:auto; overflow-x:auto;">
                No Data Yet...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

So I have 3 buttons here.

1) By clicking the red one, which includes data-toggle="modal" attribute, I expect a modal to pop up with data loaded from test_modal.load view, but instead I'm redirected to this view.. :(

2) When I click the orange button, which doesn't have data-toggle attribute, I see that indeed data was loaded. Now I can click blue button to open the modal, and data is there.

So somehow data-toggle breaks everything...

Any hint how to solve this problem would be greatly appreciated.

Thanks

[Niphlod]

you can't mix and match ALWAYS web2py's facilities and bootstrap ones.
Specifically, an A(..., callback=something) builds and intercepts any click link on it, as it's supposed to be.
If you want bootstrap to work, use other (their?!) methods, not web2py's one expecting that they work without issues.

BTW: loading via ajax is going to be deprecated, see http://getbootstrap.com/javascript/#modals-usage (the remote argument)

[Narūnas]

Hi,

Thanks for the prompt reply.

It seems I've found a workaround:

{{=A('Working Modal', _href="#tst_modal", _class="btn btn-success", _onclick="ajax('%s', '', 'tst_modal_data')" % URL("test_modal.load", vars={"var1":"varX","var2":"varY"}), **{"_data-toggle":"modal"})}}

So adding an onclick attribute makes my button work as expected. Though it's a shame, it can't be done using the in-house machinery..

Thanks