Are the commented lines necessary or was that for self reference? # js += '$("#%s_option_add_trigger"). click(function() {' \ # ' $("#%s_dialog-form").dialog("open");' \ # ' return false;' \ # ' }); ' % (my_select_id, my_select_id)
On Thursday, May 7, 2015 at 9:33:28 AM UTC-4, Richard wrote: > > 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 <atayl...@gmail.com > <javascript:>> 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+un...@googlegroups.com <javascript:>. >> 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.