Dynamically loading the answers to faq questions as a response to a click event.

[Terrence Monroe]

Hello, I would like to build upon a previous discussion about creating

a FAQ in web2py:

https://groups.google.com/forum/#!msg/web2py/gzCnwBIlkeM/GJsXi0puHMYJ;context-place=forum/web2py

I like the data model discussed there:

db.define_table('faq',

   Field('question','string'),

   Field('answer','string'),

   Field('arrange','integer')

   )

And I completely understand how to unroll it in a view:

{{for faq in db(db.faq).select():}}

  {{ =H3(T(faq.question))}}

  ...

  {{=DIV(T(faq.answer))}}

  ...

{{pass}}

But one thing I do not know how to do completely would be to only

display the questions upon initial page load and then when the

question (or a plus-sign next to the question) is clicked, the answer

is dynamically retrieved and inserted beneath the question. Sort of

like an accordion.

I would like to step through my thinking towards an answer. But I

would appreciate some help when it comes to registering a Javascript

onclick event and rewriting the DOM via a Javascript tag.

The first thing we need to do is to simply render the question and

create a placeholder div for the ajax-loaded answer:

{{for i, faq in enumerate(db(db.faq).select()):}}

  {{ =H3(T(faq.question))}}

  ...

  {{=DIV(_id='faq_{0}'.format(i))}}

  ...

{{pass}}

The controller would look something like this:

def faq():

    faq = db.faq(request.args(0, cast=int))

    return dict(faq=faq)

And the view/faq.load view would be something like

{{=DIV({{=faq.answer}})}}

But I do not see how to instruct web2py to take a click event on the

FAQ question and pass the faq.id to the controller as a request.args

so that it can retrieve the FAQ and call the .load

component. Furthermore, I dont see how to get the DIV generated in the

load component to replace the specific div that should be replaced in

the view.