jQuery UI multiselect

564 views
Skip to first unread message

Annet

unread,
Feb 15, 2012, 3:38:04 AM2/15/12
to web2py-users
I have the following function:

def index():
form=SQLFORM.factory(
Field('word',length=128,requires=IS_NOT_EMPTY()),

Field('locality',length=64,requires=IS_NOT_EMPTY()),separator=False)
rows=[]
if form.accepts(request.vars,session,keepvalues=True):
rows=db().select()
elif form.errors:
response.flash=response.flash_searcherror
else:
response.flash=response.flash_searchform
return dict(form=form,rows=rows)


Field 'word' should be a multiselect, Field 'locality' an
autocomplete:

def keywords_multiselect():
rows=db(db.NetworkKeyword.networkID==session.hubnetworkID)\
.select(db.NetworkKeyword.word,distinct=True,orderby=db.NetworkKeyword.word).as_list()
result=[r['word']for r in rows]
return response.json(result)

def locality_autocomplete():

rows=db((db.NodeKeyword.word==???)&(db.NodeKeyword.nodeID==db.Address.nodeID)&
\
(db.Address.locality.like(request.vars.term+'%')))\
.select(db.Address.locality,distinct=True,orderby=db.Address.locality).as_list()
result=[r['locality']for r in rows]
return response.json(result)


In the view I have the following code:

<script type="text/javascript">
$(document).ready(function(){
$("#word").multiselect();
});

$(function() {
$("#no_table_locality").autocomplete({
source: "{{=URL('hubaddressbook', 'locality_autocomplete')}}",
minLength: 2
});
});
</script>


I had a look at the list:reference example in chapter 6 of the book to
get the options for the multiselect, however, in my case the options
are the result of a query. How do I get the result of
keywords_multiselect(): function in the word Field multiselect?

When the user selects a word, that word should replace the ??? in the
locality_autocomplete(): function. How would I get that to work?


Kind regards,

Annet.

Alan Etkin

unread,
Feb 15, 2012, 9:43:53 AM2/15/12
to web2py-users
Are .autocomplete() and .autocomplete() jQuery functions? If so, the
correct web2py output depends on the jQuery interface
specification. What HTML elements do that functions handle? OPTION,
UL, LI, ...?

Annet

unread,
Feb 15, 2012, 11:37:28 AM2/15/12
to web2py-users
Hi Alan,

Thanks for your reply.

.multiselect() and .autocomplete() are jQuery functions. .autocomplete
works, the locality_autocomplete() function in the hubaddressbook
controller provides a list: ["Amsterdam", "Rotterdam", "Utrecht"]
which is alright for the jQuery UI autocomplete.

.multiselect() needs this:

<select id="word" name="word" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select

See:
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

... which is what list:reference provides, however, list:reference
needs a table and in my case the options are the fields of a multiple
fields table.

I hope I provided sufficient information to help me solve the problem.


Kind regards,

Annet

Alan Etkin

unread,
Feb 16, 2012, 7:03:49 AM2/16/12
to web2py-users
So it seems that you need to retrieve a select element with options
via ajax somewhere in the page's javascript, instead of a json data
payload, and place it in the document dinamically. I think that you
could modify the controller to return a select object with a .load
view and then append it to the document using the web2py.js javascript
function web2py_ajax_page('get',action,null,target)

action is the .load url that returns the raw html string
target is the id reference of the container tag.

the .load view should create the needed tags with helpers and the
database data with something like:

{{ =SELECT(*[OPTION(...) for option in options]) }}

Alan Etkin

unread,
Feb 16, 2012, 8:39:25 AM2/16/12
to web2py-users
Wait, you mean you must return a field name option list?

Then you can query the DAL table to return the list of field names:

field_names = db.mytable.fields

On 15 feb, 13:37, Annet <anneve...@googlemail.com> wrote:

Annet

unread,
Feb 17, 2012, 5:33:58 AM2/17/12
to web2py-users
Hi Alan,

Thanks for your replies. They pointed me in the right direction to
solve the multiselect problem. I am left with one small problem.

The form that contains the multiselect also contains an autocomplete
function:

def index():
....
form=SQLFORM.factory(
Field('word',label='Trefwoord',length=128,requires=\

IS_IN_DB(db(db.NetworkKeyword.networkID==session.hubnetworkID),db.NetworkKeyword.word,'%
(word)s',\
zero='Select a value')),

Field('locality_args',label='Plaats',length=64,requires=IS_NOT_EMPTY()),separator=False)
....
return dict(form=form,rows=rows)


def locality_args_autocomplete():

rows=db((db.NodeKeyword.word==request.args(0))&(db.NodeKeyword.nodeID==db.Address.nodeID)&
\
(db.Address.locality.like(request.vars.term+'%')))\
.select(db.Address.locality,distinct=True,orderby=db.Address.locality).as_list()
result=[r['locality']for r in rows]
return response.json(result)


.... and in the view:


<script type="text/javascript">
$(function() {
$("#no_table_locality_args").autocomplete({
source: "{{=URL('hubaddressbook',
'locality_args_autocomplete',args='javascript:$
(select#no_table_word).val();')}}",
minLength: 2
});
});
</script>

... which gives me an invalid path (args) error.


When I set args='software engineer' in the source and
db.NodeKeyword.word=='software engineer' in the
locality_args_autocomplete() function, the code works, however, with
form.vars.word in the view and request.args(0) in the function it
doesn't. Do you know with what code I have to replace 'software
engineer' to get both functions to work.


Kind regards,

Annet.

Alan Etkin

unread,
Feb 17, 2012, 6:58:21 AM2/17/12
to web2py-users
If the controller function is expecting a form field value, it should
be retrieved with request.vars.<name>, where <name> is the field name
in the form. You can also retrieve the form fields values with
form.vars.<name> after .process() (if the form passes validation)
or .accepts()

Anyway, I don't know how are you sending the arguments, if by a web2py
form or within an ajax request. If the case is the second, you should
make sure the parameters in the url are correct. As the server
receives the requested url, each request argument is separated by a
"/" for GET method.
Message has been deleted

Annet

unread,
Feb 20, 2012, 2:11:28 AM2/20/12
to web2py-users
Hi Alan,

Thanks for your help. I started a new thread for this last post:

http://groups.google.com/group/web2py/browse_thread/thread/af5664321fb9a9a

Kind regards,

Annet.
Reply all
Reply to author
Forward
0 new messages