SQLFORM inside modal class from stupid.css

[marchaos]

Hello, 

I'm a web2py (2.4.16) newbie and I would like to show a SQLFORM inside a modal div container using stupid.css. however I cannot make it work.

stupid.css works well (orange buttons) but when clicking on buttons nothing happens…

My next step would be to css-customize the SQLFORM. Can somebody please guide me to some reference or examples?

Thanks in advance!

thats my minified app code:

/* 

models/db.py

*/

# -*- coding: utf-8 -*-

db.define_table("thing",

                Field("name", "string"))

/* 

controllers/default.py  

*/

# -*- coding: utf-8 -*-

def index():

    things = db(db.thing).select(orderby=db.thing.name)

    return locals()

def add():

    form = SQLFORM(db.thing)

    if form.process().accepted:

        response.flash = "item added."

        redirect(URL('index'), client_side=True)

    return locals()

def edit():

    this_item = db.thing(request.args(0, cast=int)) or redirect('index')

    form = SQLFORM(db.thing, this_item)

    if form.process().accepted:

        response.flash = "item updated."

        redirect(URL('index'), client_side=True)

    return locals()

/* 

views/default/index.html

*/

{{extend 'layout.html'}}

list of things: <br>

<ul>

{{for thing in things:}}

{{=LI(A(thing.name, _href=URL('edit', args=thing.id), _class="btn orange", cid='editPanel'))}}

{{pass}}

</ul>

<div id="btAddNew">

{{=A('add new ...', _href=URL('add'), cid='editPanel')}}

</div>

<div id="editPanel">

<h2>edit</h2>

<div class="modal" name="formgoeshere"></div>

<a href="#" class="close">x</a>

</div>

/* 

views/default/add.html

*/

{{=form}}

/* 

views/default/edit.html

*/

{{=form}}

[Massimo Di Pierro]

Congratulations! Your code is a perfect web2py example. In fact it works well for me. Not sure why is does not work for me but something else is conflicting with it.

I made an app that works based on your example:

https://dl.dropboxusercontent.com/u/18065445/Tmp/web2py.app.stupid_modals.w2p

I also coalesced add and edit in one action, removed the views for add and edit (you can simply return form) and used the stupid.css modal style.

Massimo