Hi! Thank you for your time. I am satisfied with the results, I didn't knew
that response.js or _onclick for instance can execute code in the parent
component, that way I could solve this problem.
When I write OOP I create classes which do only one thing and in the end I
have a client class/script/whatever where I use this classes objects to
solve the problem at hand. I wanted to replicate this way of development on
web2py and was able to do it.
In my case I wanted to compose a page with a search employee component, a
contracts of the employee component and finally a absentism of the employee
on that specific contract. As you may see it is a cascading master ->
detail -> detail database schema.
my search component is this:
# -*- coding: utf-8 -*-
def index():
form_busqueda = SQLFORM.factory(Field('apellidos_nombres', 'string'),
Field('cedula', 'string',
requires=IS_NOT_EMPTY()),
submit_button='Buscar')
form_busqueda.element(_name='apellidos_nombres')['_readonly'] = True
if form_busqueda.process(keepvalues=True).accepted:
empleado = db(db.empleado.cedula ==
form_busqueda.vars.cedula).select(db.empleado.id,
db.empleado.apellidos,
db.empleado.nombres).first()
apellidos_nombres = '%s %s' % (empleado.apellidos, empleado.nombres)
form_busqueda.element(_name='apellidos_nombres').update(_value=apellidos_nombres.upper())
response.flash = None
response.js = 'response_busqueda_empleado(%i);' % empleado.id
return dict(form_busqueda=form_busqueda)
As you may see I use response.js to call a javascript function. I see this
function like an OOP interface therefore my client page will have to
implement this function.
This is my client view:
{{extend 'layout.html'}}
<div class="row">
<div class="col-md-12">
<h2 align="right">Ausentismos</h2>
</div>
</div>
<div class="row">
<div class="col-md-9" id="div_busqueda_empleado">
{{=LOAD('busqueda_empleado', 'index.load', ajax=True,
target='div_busqueda_empleado')}}
</div>
</div>
<div class="row">
<div class="col-md-12" id="div_contratos_empleado">
{{=LOAD('contratos_empleado', 'index.load', ajax=True,
target='div_contratos_empleado')}}
</div>
</div>
<div class="row">
<div class="col-md-12" id="div_ausentismos_contrato">
{{=LOAD('ausentismos_contrato', 'index.load', ajax=True,
target='div_ausentismos_contrato')}}
</div>
</div>
<script>
function response_busqueda_empleado(id_empleado) {
web2py_component("{{=URL('contratos_empleado', 'index.load')}}"
.concat('?id_empleado=').concat(id_empleado),
"div_contratos_empleado");
}
function response_contratos_empleado(id_contrato) {
web2py_component("{{=URL('ausentismos_contrato', 'index.load')}}"
.concat('?id_contrato=').concat(id_contrato),
"div_ausentismos_contrato");
}
</script>
Here, where I LOAD my component I implement as well the
response_busqueda_empleado function. For another component I have used
_onclick inside an A helper to achieve exactly the same as response.js.
So this is the principle I could reproduce. There is a client (this view)
who uses a component and implements some sort of callback for this
component, in this callback I load the cascading components. Now I have
components that do only one thing and can be reused on another pages, this
is really awesome!
The last bit missing is that I had to write:
{{=URL('ausentismos_contrato', 'index.load')}}"
.concat('?id_contrato=').concat(id_contrato)
because I was having problems with the vars parameter of URL. I know that
this could have to do with id_contrato existing only in client side after
the view rendered in the server but It would be great if someone could
point me to an elegant solution for this part of creating a URL that passes
vars arguments when the client side code executes.
Thank you and this is the way I did it and I think it is solving my problem
and I hope it helps anyone looking for a solution like this!
El domingo, 26 de febrero de 2017, 14:54:33 (UTC-5), Marlysson Silva
escribió:
>
> Try on action in a component ( click , submit , any event ) make this:
>
>
> http://web2py.com/books/default/chapter/29/12/components-and-plugins?search=load#Reload-another-component
>
> Reload other component .. but before of the reload the component , use the
> javascript to show it and so perform the feature..
> I think
>
> The documentation too use the .reload method of jquery lib to reload the
> div that contains the component ( Other approach )
>
> Em sexta-feira, 24 de fevereiro de 2017 18:25:42 UTC-3, Bernardo Leon
> escreveu:
>>
>> Hi, I am trying to create a page that uses 3 components. I want each
>> component to be reusable.
>>
>> The first component is a search box, based on the search box result I
>> want to load the second component (a grid) with the first result as a
>> parameter. When I click on a link in the second component grid I want to
>> load a third component based on wich link I pressed in the second component.
>>
>> What would be the best way to accomplish this? Making this 3 components
>> interact while maintaining an elegant code and reusability of the
>> components?
>>
>> Thank you!
>>
>
--
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.
