you need bootstrap 2.3.2 (not tested with BS3, but I am pretty sure it is
not working, too differents)...
Did you try it with a recent web2py setup? I would suggest you try with
web2py 2.9.5 which is what I use actually and it works...
Richard
On Thu, May 7, 2015 at 9:20 AM, LoveWeb2py <atayloru...@gmail.com> wrote:
> Another observation:
>
> All of this code:
>
>
>
>> js += '$(function() {' \
>> ' $("#%s_option_add_trigger").button({' \
>> ' text: true,' \
>> ' icons: {' \
>> ' primary: "ui-icon-circle-plus"' \
>> ' }' \
>> ' });' \
>> '});' % (my_select_id)
>> js += '$(function() { ' \
>> ' $( "#%s_option_add_trigger" ).css("margin-left",
>> "+=5"); ' \
>> '});' % (my_select_id)
>> js +=
>> '$("#{modal_id}").appendTo("body");'.format(modal_id=my_select_id
>> + "_modal-form")
>>
>>>
>>> Get's commented out when it's rendered so it ends up looking like this
> <!-- $(document).read(function() .... .appendTo("body");}); //-->
>
> Any idea why that could be happening and would that impact the button
> showing the modal
>
> On Thursday, May 7, 2015 at 8:45:49 AM UTC-4, LoveWeb2py wrote:
>
>> Hi Richard!
>>
>> I think I'm getting close. No more errors, and I applied the widget to
>> the field successfully. I see the + sign next to my field, but nothing
>> happens when I click it so I'm going over the javascript with a fine tooth
>> comb. Is there any additional .js or .css files I need to include?
>>
>> This is really looking promising!
>>
>> On Wednesday, May 6, 2015 at 12:42:34 PM UTC-4, Richard wrote:
>>
>> Let say the FK field is field2 :
>>
>> Field('field2','reference main_table', # Better syntax thand
>> "db.main_table"
>> widget=AutocompleteWidgetSelectOrAddOption(
>> request=request,
>>
>> field=db.main_table.field1, # which is you reprensting field
>> id_field=db.main_table.id
>> ,
>> limitby=(0, 10), # how
>> much records you want in the dropbox
>> min_length=6, # when you
>> want the autocomplete pop in or how many caracters user have to entered
>> before the autocomplete kickin
>> form_title=T('Add new
>> title'),
>> controller="controler
>> name that contains the below function",
>> function="your add
>> function name",
>> button_text=T('Add new'),
>> placeholder=T('Start
>> typing...'))
>>
>> Richard
>>
>> On Wed, May 6, 2015 at 12:34 PM, LoveWeb2py <atayl...@gmail.com> wrote:
>>
>> Thank you, Richard. I think i'm getting closer. Could you show me an
>> example of how you apply this to a specific field in SQLFORM?
>>
>> Going back to my original model:
>>
>> db.define_table('main_table',
>> Field('field1','string'),
>> Field('field2','string'),
>> migrate=False)
>>
>> db.define_table('second_table',
>> Field('field1','db.main_table'),
>> Field('field2','db.main_table')
>> migrate=False)
>>
>> How could I integrate your widget with field 2 for a SQLFORM?
>>
>>
>>
>>
>>
>>
>> On Wednesday, May 6, 2015 at 9:40:02 AM UTC-4, Richard wrote:
>>
>> The id field and what field you want to show as a representation of the
>> id field of the referenced table...
>>
>> Start by putting the widget class in model file even if it not a good
>> thing to see if you can make it works...
>>
>> In the module I have these imports :
>>
>> from gluon.html import *
>> from gluon.sqlhtml import *
>> from gluon import current
>> from gluon.compileapp import LOAD
>>
>>
>> Which may not be related to the widget class...
>>
>> Richard
>>
>>
>> On Tue, May 5, 2015 at 4:28 PM, LoveWeb2py <atayl...@gmail.com> wrote:
>>
>> Hi Richard,
>>
>> I'm trying to get this setup, but am receiving an error self.url =
>> URL(args=request.args)\nNameError: global name \'URL\' is not defined\n'.
>> I'm wondering if this is because the gluon hasn't been imported yet.
>>
>> Also, could you ellaborate more on this?
>>
>>
>> field=db.table.representing_field,
>>
>> id_field=db.table.id_field,
>>
>> id_field should be the foreignkey table if I am not mistaking?
>> db.table.representing field, and db.table2.id_field (with foreign key) does
>> that sound right?
>>
>>
>> On Wednesday, April 29, 2015 at 10:04:35 AM UTC-4, Richard wrote:
>>
>> *# In a modules :*
>>
>> class AutocompleteWidgetSelectOrAddOption(object):
>> _class = 'string'
>>
>> def __init__(self,
>> request,
>> field,
>> id_field=None,
>> db=None,
>> orderby=None,
>> limitby=(0, 10),
>> keyword='_autocomplete_%(fieldname)s',
>> min_length=2,
>> #
>> -------------------------------------------------------------
>> # From : SelectOrAddOption
>> controller=None, function=None, form_title=None,
>> button_text = None, dialog_width=1000,
>> #
>> -------------------------------------------------------------
>> placeholder=None
>> ):
>> self.request = request
>> self.keyword = keyword % dict(fieldname=field.name)
>> self.db = db or field._db
>> self.orderby = orderby
>> self.limitby = limitby
>> self.min_length = min_length
>> self.fields = [field]
>> self.placeholder = placeholder
>> if id_field:
>> self.is_reference = True
>> self.fields.append(id_field)
>> else:
>> self.is_reference = False
>> if hasattr(request, 'application'):
>> self.url = URL(args=request.args)
>> self.callback()
>> else:
>> self.url = request
>> #
>> ----------------------------------------------------------------------
>> # From : SelectOrAddOption
>> if form_title is None:
>> self.form_title = current.T('Add New')
>> else:
>> self.form_title = current.T(form_title)
>> if button_text is None:
>> self.button_text = current.T('Add')
>> else:
>> self.button_text = current.T(button_text)
>> self.dialog_width = dialog_width
>>
>> self.controller = controller
>> self.function = function
>> #
>> ----------------------------------------------------------------------
>>
>> def callback(self):
>> if self.keyword in self.request.vars:
>> field = self.fields[0]
>> rows = self.db(field.like(self.request.vars[self.keyword]+'%')
>> ).select(orderby=self.orderby,
>> limitby=self.limitby, *self.fields)
>> if rows:
>> if self.is_reference:
>> id_field = self.fields[1]
>> raise HTTP(200, SELECT(_id=self.keyword,
>> _class='autocomplete',
>> _size=len(rows),
>> _multiple=(len(rows) == 1),
>> *[OPTION(s[field.name],
>> _value=s[id_field.name],
>> _selected=(k == 0))
>> for k, s in
>> enumerate(rows)]).xml())
>> else:
>> raise HTTP(200, SELECT(_id=self.keyword,
>> _class='autocomplete',
>> _size=len(rows),
>> _multiple=(len(rows) == 1),
>> *[OPTION(s[field.name],
>> _selected=(k == 0))
>> for k, s in
>> enumerate(rows)]).xml())
>> else:
>>
>> raise HTTP(200, '')
>>
>> def __call__(self, field, value, **attributes):
>> #
>> ----------------------------------------------------------------------
>> # From : SelectOrAddOption
>> my_select_id = '%s_%s' % (field._tablename, field.name)
>> # 'test_ph_eregistry_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)
>> form_loader_div = DIV(DIV(BUTTON('x', _type='button',
>> _class='close',
>> **{'_data-dismiss': 'modal',
>> '_aria-hidden': 'true'}),
>> H3(self.form_title,
>> _id='myModalLabel'), _class='modal-header'),
>> DIV(LOAD(c=self.controller,
>> f=self.function, args=add_args, ajax=True, ajax_trap=True),
>> _class='modal-body'),
>> _id=my_select_id + "_modal-form",
>> _class='modal hide fade',
>> **{'_tabindex': '-1', '_role': 'dialog',
>> '_aria-labelledby': 'myModalLabel',
>> '_aria-hidden': 'true'})
>> # generate the "add" button that will appear next the options
>> widget and open our modal
>> activator_button = A(I(_class='icon-plus-sign icon-2x'),
>> _id=my_select_id+"_option_add_trigger",
>> _class='add-and-select-button')
>> # create javascript for creating and opening the dialog
>> # js = '$("#%s_dialog-form").dialog({' \
>> # ' autoOpen: false,' \
>> # ' show: "fade",' \
>> # ' hide: "fade",' \
>> # ' width: %s' \
>> # ' });' % (my_select_id, self.dialog_width)
>> js = '$("#%s_modal-form").modal({ backdrop: true, keyboard: true,
>> show: false });' % (my_select_id)
>> # js += '$("#%s_option_add_trigger").click(function() {' \
>> # ' $("#%s_dialog-form").dialog("open");' \
>> # ' return false;' \
>> # ' }); ' % (my_select_id, my_select_id)
>> js += '$("#%s_option_add_trigger").click(function() ' \
>> '{ $("#%s_modal-form").modal("show"); 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)
>> js += '$(function() { ' \
>> ' $( "#%s_option_add_trigger" ).css("margin-left",
>> "+=5"); ' \
>> '});' % (my_select_id)
>> js +=
>> '$("#{modal_id}").appendTo("body");'.format(modal_id=my_select_id +
>> "_modal-form")
>> # jQuery .appendTo() move modal div in body to avoid nested form
>> which are not allow in HTML
>> js = """$(document).ready(function() {
>> %s
>> });""" % js
>> jq_script = SCRIPT(js, _type="text/javascript")
>>
>> wrapper = DIV(_id=my_select_id+"_adder_wrapper")
>> #
>> ----------------------------------------------------------------------
>> default = dict(
>> _type='text',
>> value=(not value is None and str(value)) or '',
>> )
>> attr = StringWidget._attributes(field, default,
>> _placeholder=self.placeholder, **attributes)
>> div_id = self.keyword+'_div'
>> attr['_autocomplete'] = 'off'
>> if self.is_reference:
>> key2 = self.keyword+'_aux'
>> key3 = self.keyword+'_auto'
>> #
>> -----------------------------------------------------------------------------
>> # find the longest record and set input size attribute
>> accordingly
>> length = self.fields[0].len()
>> longest_record_length = len(self.db().select(self.fields[0],
>> orderby=~length,
>> limitby=(0,
>> 1)).first()[self.fields[0].name])
>> attr['_size'] = int(longest_record_length * 1.20) # 20%
>> wider field width
>> #
>> -----------------------------------------------------------------------------
>> attr['_class'] = 'string'
>> name = attr['_name']
>> if 'requires' in attr:
>> del attr['requires']
>> attr['_name'] = key2
>> value = attr['value']
>> record = self.db(self.fields[1] ==
>> value).select(self.fields[0]).first()
>> attr['value'] = record and record[self.fields[0].name]
>> attr['_onblur'] = "$('#%(div_id)s').delay(1000).fadeOut();" %
>> \
>> dict(div_id=div_id, u='F'+self.keyword)
>> # delay(500) is pretty important for "$('#%s').keyup();
>> $('#%s').blur();"
>> # from the add_eregistry function
>> attr['_onkeyup'] = \
>> "$('#%(key3)s').val('');" \
>> "var e = event.which?event.which:event.keyCode;" \
>> "function %(u)s() {" \
>> " $('#%(id)s').val($('#%(key)s :selected').text());" \
>> " $('#%(key3)s').val($('#%(key)s').val())" \
>> "};" \
>> "if (e == 39) %(u)s();" \
>> "else if (e == 40) {" \
>> " if ($('#%(key)s option:selected').next().length)" \
>> " $('#%(key)s option:selected').attr('selected',
>> null).next().attr('selected', 'selected'); %(u)s();" \
>> "} else if (e == 38) {" \
>> " if ($('#%(key)s option:selected').prev().length)" \
>> " $('#%(key)s option:selected').attr('selected',
>> null).prev().attr('selected', 'selected'); %(u)s();" \
>> "} else if ($('#%(id)s').val().length >= %(min_length)s)"
>> \
>> " $.get('%(url)s?%(key)s=' +
>> encodeURI($('#%(id)s').val()), function(data) {" \
>> " if (data == '')" \
>> " $('#%(key3)s').val('');" \
>> " else {" \
>> " $('#%(id)s').next('.error').hide();" \
>> " $('#%(div_id)s').html(data).show().focus();"
>> \
>> " $('#%(div_id)s select').css('width',
>> $('#%(id)s').css('width'));" \
>> " $('#%(key3)s').val($('#%(key)s').val());" \
>> " $('#%(key)s').change( %(u)s);" \
>> " $('#%(key)s').click( %(u)s);" \
>> " };" \
>> " });" \
>> "else $('#%(div_id)s').fadeOut();" % dict(url=self.url,
>> min_length=self.min_length,
>>
>> key=self.keyword, id=attr['_id'], key2=key2, key3=key3,
>> name=name,
>> div_id=div_id, u='F'+self.keyword)
>> if self.min_length == 0:
>> attr['_onfocus'] = attr['_onkeyup']
>> wrapper.components.extend([TAG[''](INPUT(**attr),
>> INPUT(_type='hidden',
>> _id=key3,
>> _value=value,
>> _name=name,
>> requires=field.requires),
>> DIV(_id=div_id,
>> _style='position:absolute;')),
>> form_loader_div,
>> activator_button,
>> jq_script])
>> return wrapper
>> else:
>> attr['_name'] = field.name
>> attr['_onblur'] = "$('#%(div_id)s').delay(1000).fadeOut();" %
>> \
>> dict(div_id=div_id, u='F'+self.keyword)
>> # delay(500) is pretty important for "$('#%s').keyup();
>> $('#%s').blur();"
>> # from the add_eregistry function
>> attr['_onkeyup'] = \
>> "var e = event.which?event.which:event.keyCode;" \
>> "function %(u)s() {" \
>> " $('#%(id)s').val($('#%(key)s').val())" \
>> "};" \
>> "if (e == 39) %(u)s();" \
>> "else if (e == 40) {" \
>> " if ($('#%(key)s option:selected').next().length)" \
>> " $('#%(key)s option:selected').attr('selected',
>> null).next().attr('selected', 'selected'); %(u)s();" \
>> "} else if (e == 38) {" \
>> " if ($('#%(key)s option:selected').prev().length)
>> $('#%(key)s option:selected').attr('selected',
>> null).prev().attr('selected', 'selected'); %(u)s();" \
>> "} else if ($('#%(id)s').val().length >= %(min_length)s)
>> $.get('%(url)s?%(key)s=' + encodeURI($('#%(id)s').val()), function(data) {"
>> \
>> " $('#%(id)s').next('.error').hide();" \
>> " $('#%(div_id)s').html(data).show().focus();" \
>> " $('#%(div_id)s select').css('width',
>> $('#%(id)s').css('width'));" \
>> " $('#%(key)s').change( %(u)s);" \
>> " $('#%(key)s').click( %(u)s);" \
>> "});" \
>> "else $('#%(div_id)s').fadeOut();" % dict(url=self.url,
>> min_length=self.min_length,
>>
>> key=self.keyword, id=attr['_id'], div_id=div_id,
>>
>> u='F'+self.keyword)
>> if self.min_length == 0:
>> attr['_onfocus'] = attr['_onkeyup']
>> wrapper.components.extend([TAG[''](INPUT(**attr),
>> DIV(_id=div_id,
>>
>> _style='position:absolute;')),
>> form_loader_div,
>> activator_button,
>> jq_script])
>> return wrapper
>>
>> # In a model (a model file which is already call before you set your
>> widget...)
>> from a_widget import AutocompleteWidgetSelectOrAddOption
>>
>> *# In your controller *
>>
>> def add_function():
>> """
>> Modal form for adding element
>> """
>>
>> buttons = [TAG.button((I('', _class='icon-ok icon-large icon-white'),
>> CAT(' '), STRONG(T('Add'))),
>> _type='submit',
>> _class='btn btn-small btn-primary',
>> _id='add_button_id',
>> _name='add_button',
>> )]
>> form = SQLFORM(db.table, buttons=buttons, formstyle=formstyle,
>> separator=separator)
>> response.js = '$(document).ready(function(){
>> $(".input_wrapper").has(".error").addClass("inputError"); ' \
>> '$(".w2p_fw").has(".error").addClass("control-group
>> error"); ' \
>> '$(".w2p_fw").each(function(){
>> $(this).find(".error_wrapper").appendTo(this); }); });'
>> response.js += '$(document).ready(function(){
>> $("textarea").elastic(); });'
>> response.js += '$(document).ready(function () {
>> $("[rel=tooltip]").tooltip(); });'
>> if form.process(formname='add_form').accepted:
>> response.flash = T("Added")
>> target = request.args(0)
>> # close modal
>> response.js =
>> '$("#{target}_modal-form").modal("hide");'.format(target=target)
>> # update the select options
>> response.js += """$("#{target}").append(
>> "<option value='{new_id}'>
>> {new_id}
>> </option>");""".format(target=target, new_id=
>> form.vars.id)
>> # select newly added option
>> response.js += """$("#{target}").val("{new_exp_num}");
>> $('#{target}').keyup(); $('#{target}').blur();
>>
>> ...
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
--
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
