Re: [web2py] bootstrap modal and web2py LOAD()

[LightDot]

I simply did (actual functions etc. are stripped out, so some minor detail 
about displaying the data after it has been processed might be missing):

View:

<div id="some_btn"><a class="btn btn-success btn-mini" data-target=
"#some_modal" data-toggle="modal"><i class="icon-search icon-white"></i>Open 
modal
</a></div>
        <div id="some_modal" class="modal hide fade">
            <div class="modal-header"><button type="button" class="close" 
data-dismiss="modal">&times;</button>&nbsp;</div>
            <div class="modal-body">{{=LOAD('controller','somepage.load', 
ajax=True, ajax_trap=True, user_signature=True)}}</div>
            <div class="modal-footer">&nbsp;</div>
        </div>

Controller:

def somepage():
    form = SQLFORM.factory(
        Field('somefield'),
        Field('anotherfield'),
        formname='some_form',
        formstyle='bootstrap')
    if form.process(session=None, formname='some_form').accepted:
        response.flash = None
        ...do what you need to do...
    elif form.errors:
        response.flash = None
        ...do what you need to do...
    return dict(functionresult=functionresult)

somepage.load:

<form id="some_form_modal" class="form-inline">
    <div class="input-prepend">
        <span class="add-on">www.</span>
        <input name="somefield" type="text" class="input-medium" placeholder
="server">
        <select name="anotherfield" class="span1">...dropdown data...
</select>
        <input type="hidden" name="_formname" value="some_form" />
    </div>
    <button type="submit" class="btn btn-success"><i class="icon-search 
icon-white"></i> ..Submit button txt...</button>
</form>
<div id="some_form_result">
...I'm displaying data processed by a function here...
</div>


I'm not displaying the SQLFORM.factory in the view, since in my case it was 
more efficient to create a custom form. You could display the 
SQLFORM.factory or the fully fledged SQLFORM, if this suits your need.

Regards,
Ales


On Friday, November 2, 2012 8:38:37 AM UTC+1, Annet wrote:
>
> Hi Richard,
>
> Here's how I implemented Bootstrap Modal:
>
> Button in the view:
>
> <a class="btn btn-primary btn-mini" href="{{=URL('event',args=r.id)}}" 
> data-toggle="modal" 
>  data-target="#eventModal">{{=T("View details")}} &raquo;</a>
>
> At the bottom of the same view:
>
> <script type="text/javascript">
>   $("a[data-toggle=modal]").click(function (e) {
>     target = $(this).attr('data-target')
>     url = $(this).attr('href')
>     $(target).load(url);
>   })
> </script>
>
> <div id="eventModal" class="modal hide fade">
> </div> <!-- /modal -->
>
> Kind regards,
>
> Annet
>

--