Update dropdown list in SQLFORM.grid based on selection in another dropdown list

[Tom Clerckx]

Hi,

Considering the sample code below.

I have manually populated the books table with a number of books for different genres.

Now I can create an entry in the shelves table, using the SQLFORM.grid

The shelve_items will be shown as a dropdown list with the books that I've added

What I would like is to update the contents of the shelve_items dropdown list in the form, based on the selected genre in that same form.

In the past I did something similar, using a SELECT() box and adding an onchange=ajax(...) call to update a DIV elsewhere in the page.

I was wondering however, if there is a better way to do this directly in the SQLFORM.grid()

===========

index.html

===========

{{extend 'layout.html'}}

{{=form}}

===========

default.py

===========

def index():

    form = SQLFORM.grid(db.shelves, user_signature=False)

    return dict(form=form)

======

db.py

======

genres = ['thriller', 'sf', 'roman', 'fantasy']

db.define_table('books',

      Field('name', 'string'),

      Field('author', 'string'),

      Field('genre', 'string', requires=IS_IN_SET(genres)),

      format='%(name)s'

      )

db.define_table('shelves',

      Field('genre', 'string', requires=IS_IN_SET(genres)),

      Field('shelve_items', 'reference books'),

      )

[Tom Clerckx]

OK, I was able to do it with SQLFORM.grid(), using jQuery by:
* registering a change function on the #shelves_genre field

* execute an XMLHttpRequest upon a change of #shelves_genre that updates the innerHTML of #shelves_shelve_items

It would be nice however if something similar (registering form-events onchange/onselect/...) could be achieved when e.g. creating the form, so that you can do it in python instead of having to add the javascript functions.

[AGRogers]

Glad you got it working.

I send javascript from my controller back to the view for some custom control widgets. That sounds similar to what you want to do.

I dont know where i found the original code sample to do that - not in the book I dont think. This page http://www.web2pyslices.com/slice/show/1446/widget-select-or-add-option you will see an example of how it can be done. To be honest I dont fully understand how the wrapper works. But i got some nice custom controls working nonetheless :)

    def widget(self, field, value):
        #generate the standard widget for this field
        select_widget = OptionsWidget.widget(field, value)

        #get the widget's id (need to know later on so can tell receiving controller what to update)
        my_select_id = select_widget.attributes.get('_id', None) 
        add_args = [my_select_id] 
        #create a div that will load the specified controller via ajax
        form_loader_div = DIV(LOAD(c=self.controller, f=self.function, args=add_args,ajax=True), _id=my_select_id+"_dialog-form", _title=self.form_title)
        #generate the "add" button that will appear next the options widget and open our dialog
        activator_button = A(T(self.button_text), _id=my_select_id+"_option_add_trigger")
        #create javascript for creating and opening the dialog
        js = '$( "#%s_dialog-form" ).dialog({autoOpen: false, show: "blind", hide: "explode", width: %s});' % (my_select_id, self.dialog_width)
        js += '$( "#%s_option_add_trigger" ).click(function() { $( "#%s_dialog-form" ).dialog( "open" );return false;}); ' % (my_select_id, my_select_id)        #decorate our activator button for good measure
        js += '$(function() { $( "#%s_option_add_trigger" ).button({text: true, icons: { primary: "ui-icon-circle-plus"} }); });' % (my_select_id) 
        jq_script=SCRIPT(js, _type="text/javascript")

        wrapper = DIV(_id=my_select_id+"_adder_wrapper")
        wrapper.components.extend([select_widget, form_loader_div, activator_button, jq_script])
        return wrapper

___________________________

www.TenOutOfTen.org

roge...@gmail.com

(+95) 09 250018669 (Myanmar)

--
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 web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/61c5b124-cf09-4df5-aa58-dd6589bc63b8n%40googlegroups.com.

[Tom Clerckx]

Thanks for sharing this.

Best regards,

Tom.