rendering multiple components in ajax call

[Lars]

Hi,

Those are my first steps with ajax, so please indulge me.. :)

I have a list of divs describing objects. Id like to click on one div so that it sends the object id in an ajax call which would open a div at the top with the object description and a form to bid on it. I don't know how to send the id to a LOAD function and the poor result I got so far led to a already submitted form which give the validator error message (here a decimal in range).

So this is what I have so far : cf. test code

so when this code runs it render a new whole page containing the table in the div. If I add the form in the dict, it just renders nothing.

db.py :
db.define_table('objects', Field('name'), Field('price'))
# demo data
db.objects.bulk_insert([dict(name='station', price=52), dict(name='desk', price=52), dict(name='glass', price=52), dict(name='beer', price=52)])

default.py
def index():
    # get objects list
    current_objects = db(db.objects).select().as_list()
    return dict(current_objects=current_objects)


def object_desc():
    oid = request.vars.oid
    # get object description
    object_desc = db(db.objects.id == oid).select()
    name = object_desc[0].name
    price = object_desc[0].price

    object_desc = TABLE(TH('object Details', _colspan="2"),
                        TR('Name : ', TD(name, _colspan="3")),
                        TR('Price : ', TD(price, _colspan="3"))
                        )

    form = SQLFORM(db.bid)
    return dict(oid=oid, object_desc=object_desc)


index.html
{{extend 'layout.html'}}
{{n = 0}}

<div id="object_tools" style="display: none; color: white; background-color: black; width: 500px;height: 500px;">
</div>

<div class="container-fluid">

    <div class="row">
        <div class="col-xs-6">{{=T('Name')}}</div>
        <div class="col-xs-6">{{=T('Price')}}</div>
    </div>

    {{for object_ in current_objects:}}
    {{n += 1}}
    <div class="col-xs-12"
    onclick="$('#object_tools').slideToggle(); var oid={{=object_['id']}}; ajax('object_desc?oid=' + oid, [], 'object_tools');">
        <div class="col-xs-6">{{=object_['name']}}</div>
        <div class="col-xs-6">{{=object_['price']}}</div>
    </div>
    {{pass}}

</div>

Thanks

[Lars]

The solution is to put the table and the form in a div not in a dict. Simple enough.. ^^