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) On Tuesday, May 26, 2015 at 12:06:38 AM UTC+2, Narūnas wrote: > > 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">×</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 > -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
