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 <[email protected]
> <javascript:>> 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 <[email protected]> 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();""".format(target=target,
>
> new_exp_num=form.vars.exp_num)
> elif form.errors:
> response.flash = ''
> else:
> response.flash = ''
> return dict(form=form)
>
> *# Then you set the widget to your field *
>
> widget=AutocompleteWidgetSelectOrAddOption(
> request=request,
>
> field=db.table.representing_field,
> id_field=db.table.id_field,
> limitby=(0, 10), # your
> pref
> min_length=6, # your pref
> form_title=T('Add new
> element'),
> controller="ref",
> function="add_function",
> # Name of your add_function()
> button_text=T('Add new'),
> placeholder=T('Start
> typing...'))
>
> Give feedback here...
>
> You may consider to try it first in a dummy app so you can share it here
> in case you have some difficulties to set it up... It will be easier to
> help you that way, once you will have understand all the sensitive part you
> will be able to set it up in you prod app rapidly...
>
> Richard
>
> On Tue, Apr 28, 2015 at 7:04 PM, LoveWeb2py <[email protected]> wrote:
>
> I'd love to see it, Richard! I'm banging my head against the wall with
> this other method.
>
> On Tuesday, April 28, 2015 at 6:58:25 PM UTC-4, Richard wrote:
>
> My own mix of SELECT_OR_ADD_OPTION() widget and web2py
> SQLFORM.widget.autocomplete...
>
> As wrote above I can share the code here...
>
> Richard
>
> On Tue, Apr 28, 2015 at 5:06 PM, LoveWeb2py <[email protected]> wrote:
>
> What do you use as a replacement?
>
> On Tuesday, April 28, 2015 at 4:59:32 PM UTC-4, Richard wrote:
>
> in view in script tag is a good place for start... just make sure you have
> the rigth id for you modal main div... In my case modal_id was coming from
> an .fromat(modal_id='id')...
>
> But I don't recall the exact way this tutorial was doing and I was just
> exposing to 2 generals reasons why form into modal won't submit
> correctly... In my case my widget was appending my modal with a LOAD
> component inside a form of the so the load form has to be put outside the
> main form...
>
> I try the ressource you are using and give up because it was not full fill
> all my requirement...
>
> Richard
>
> On Tue, Apr 28, 2015 at 4:54 PM, LoveWeb2py <[email protected]> wrote:
>
> This is what I'm using in my layout:
>
>
> $(function() {
> $("td.w2p_fc").each(function (){
> var comment = $(this).html();
> if (comment){
> $(this).html('<div><i class="icon info icon-info-sign"></i></div>');
> $(this).children('div').attr('title',comment);
> $(this).children('div').tooltip({ placement : 'right',
> html : true,
> trigger : 'click' });
> }
> });
> });
>
> This makes the comment field available as an "Information Icon"
>
> When I use the modal class referenced in the link it works great, the problem
> is nothing stores because the form can't process properly. I'm struggling to
> solve that last piece of the puzzle.
>
> When I
>
>
>
> On Tuesday, April 28, 2015 at 4:50:34 PM UTC-4, LoveWeb2py wrote:
>
> Thank you, Richard. Where do I put $("#{modal_id}").appendTo("
> body");
>
> Could I just put that in the HTML file? Something like...
>
> <script>
> $("#{modal_id}").appendTo("
> body");
> </script>
>
> I tried hardcoding the div_id of my modal into your code, but it didn't
> work. The database doesn't update properly with the correct foreign key. I
> also have some date value fields and the calendar.js doesn't pop down so
> I'm thinking this has something to do with
> http://linuxapuntes.blogspot.com.ar/2013/03/plugin-modal-bootstrap-web2py.html
>
> Do you have an example of where you'd put the appendTo ?
>
>
>
>
> On Tuesday, April 28, 2015 at 1:04:57 PM UTC-4, Richard wrote:
>
> There is different issue when embed for into a bootstrap 2.3.2 (at
> least)... One that I found were that <form> tag get ripped off... The other
> depend of the way the modal form compoenent is included into the main
> form... Depending how the widget is write the extra are embed beside the
> original input field which don't work in case of a <form> tag since html
> <form> can't be nested... Modal don't offer any convenient support à this
> level and you have to manage this by yourself... But it is easy, you just
> need to use jquery .appendTo() :
>
> Like that : $("#{modal_id}").appendTo("body");
>
> And extract your component modal form which is nested into the main page
> form and append it to the body instead...
>
> This is basically what jQuery Dialog is doing out of the box which
> boostrap modal don't that make the usage of modal with component in web2py
> so difficult...
>
> :)
>
> Richard
>
>
> On Tue, Apr 28, 2015 at 12:40 PM, LoveWeb2py <[email protected]> wrote:
>
> Richard,
>
> This is working great.
> http://linuxapuntes.blogspot.com.ar/2013/03/plugin-modal-bootstrap-web2py.html
>
> I currently use it like this:
>
> def my_controller():
> from modalplugins Import Modal
> field = db.mytable.field
> modal = Modal(field, ' Add', 'Add area','Area')
> db.mytable.field.comment = modal.create()
> grid=SQLFORM.smartgrid(db.my_other_table)
> formModal = modal.formModal()
> return(grid=grid, formModal=formModal)
>
> The problem I am having now is that I can't process the modal. Do you have
> any thoughts on how to do this?
>
> On Friday, April 17, 2015 at 9:50:15 AM UTC-4, Richard wrote:
>
> 'reference tablename' = 1 to many
> 'list:reference tablename' = "many to many" it denormalised that why I put
> it between double quotes
>
> Richard
>
> On Thu, Apr 16, 2015 at 5:13 PM, LoveWeb2py <[email protected]> wrote:
>
> Richard,
>
> I did want to have a foreign key for info_about_field1. I guess I could do
> a reference field1 ?
>
>
>
> On Thursday, April 16, 2015 at 3:02:51 PM UTC-4, Richard wrote:
>
> There is no relation between both tables... You can embed 2 forms as
> component (LOAD())
>
> if you were having list:reference type field it is differents and you have
> to question yourself if you are not better to have something like
> SELECT_OR_ADD_OPTION() or even better AutocompleteSelectOrAddOption()
> widget... I recently update my old AutocompleteSelectOrAddOption() widget
> (not finish yet) in order to move from jquery ui dialog to bootstrap
> modal... I will publish a web2py slice when done.
>
> Just ask if it interest you I can publish preview here...
>
> Richard
>
> On Thu, Apr 16, 2015 at 2:08 PM, LoveWeb2py <[email protected]> wrote:
>
> Hello,
>
> I'd like to have two SQLFORMs right next to each other.
>
> The second SQLFORM is just going to be linked to the field in table 1, but
> will be used so the student can make additional comments about a field.
> Model will look like this:
>
> db.define_table('main_table',
> Field('field1','string'),
> Field('field2','string'),
> migrate=False)
>
> db.define_table('second_table',
> Field('info_about_field1','list:string'),
> Field('info_about_field2','list:string')
> migrate=False)
>
> My question is... is it possible to have the second_table as a link
> underneath the main_table field. I want to have a modal pop up so they can
> enter additional information about the field
>
>
> --
> 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...@googleg
>
> ...
--
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 [email protected].
For more options, visit https://groups.google.com/d/optout.
