You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by "squallmat ." <sq...@gmail.com> on 2014/09/19 18:58:10 UTC
observe mixin
Hi,
I'm trying to use the observe mixin from here :
http://tapestry-stitch.uklance.cloudbees.net/observedemo
I have the code tml :
<t:Select t:mixins="observe" clientEvent="change"
event="observeSelectApp" zone="formZone"
fields="['selectClients']" t:value="selectedApplication"
t:id="selectApplications" model="selectApplications"
t:encoder="applicatifDtoEncoder" t:zone="formZone" />
in controller :
Block onObserveSelectApp(ClientDto clientSelected) {
selectedClient = clientSelected;
return formZone.getBody();
}
but when I try to launch this page, i have :
Caused by: org.apache.tapestry5.ioc.internal.util.TapestryException:
Parameter(s) 'Observe.zone' are required for
org.apache.tapestry5.corelib.components.Select, but have not been bound.
[at classpath:atos/smt/livraison/pages/NouvelleLivraison.tml, line 42]
at
org.apache.tapestry5.internal.structure.ComponentPageElementImpl.verifyRequiredParametersAreBound(ComponentPageElementImpl.java:1189)
at
org.apache.tapestry5.internal.structure.ComponentPageElementImpl.access$2900(ComponentPageElementImpl.java:61)
at
org.apache.tapestry5.internal.structure.ComponentPageElementImpl$3.run(ComponentPageElementImpl.java:802)
at
org.apache.tapestry5.internal.structure.PageImpl.invokeCallbacks(PageImpl.java:362)
at
org.apache.tapestry5.internal.structure.PageImpl.loaded(PageImpl.java:231)
at
org.apache.tapestry5.internal.pageload.PageLoaderImpl$3.invoke(PageLoaderImpl.java:193)
at
org.apache.tapestry5.internal.pageload.PageLoaderImpl$3.invoke(PageLoaderImpl.java:178)
at
org.apache.tapestry5.ioc.internal.OperationTrackerImpl.invoke(OperationTrackerImpl.java:74)
... 92 more
But, the zone attribute is here in my code... Do you see why such a problem
?
Re: observe mixin
Posted by Lance Java <la...@googlemail.com>.
jquery (and other js frameworks) support selecting by attributes other than
the id.
More info here: http://api.jquery.com/category/selectors/
I was suggesting to add an attribute to each of your select elements and
then use an appropriate selector to look it up:
eg;
<t:select t:mixins="observe" data-observe-id="id1"
t:fields="prop:fieldSelectors" ... />
<t:select t:mixins="observe" data-observe-id="id2"
t:fields="prop:fieldSelectors" ... />
public List<String> getFieldSelectors() {
return Arrays.asList("[data-observe-id='id1']",
"[data-observe-id='id2']");
}
Re: observe mixin
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 22 Sep 2014 14:28:19 -0300, squallmat . <sq...@gmail.com>
wrote:
> About the id problem of select, in the code source of the page the id of
> the select is good, but here in the json request there is an id appended
> in suffix :
>
> 1. selectId: "selectClients_1fadb44aa044"
>
> Is that the problem of select clientId you are talking ?
I guess so.
> I don't see what you mean by a data attribute.
http://ejohn.org/blog/html-5-data-attributes/
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
I have this :
1. content: "<tr><td><input
value='IyQ6WkYtQiFmcO4I8XVeaCkrYUw=:H4sIAAAAAAAAAK1QPUoDQRR+BlItNoIiaYIQRZtJNBsELSQIarEEIViHt5OXdWQyM85M/horz+E......"
2. inits: [{,…}]
1. 0: {,…}
1. linkSelectToZone:
[{url:/livraison/nouvellelivraison.selectclients:change,
selectId:selectClients_1fadb44aa044,…},…]
1. 0: {url:/livraison/nouvellelivraison.selectclients:change,
selectId:selectClients_1fadb44aa044,…}
1. selectId: "selectClients_1fadb44aa044"
2. url: "/livraison/nouvellelivraison.selectclients:change"
3. zoneId: "formZone"
2. 1: {url:/livraison/nouvellelivraison.selectapplications:change,
selectId:selectApplications_1fadb44aa044,…}
1. selectId: "selectApplications_1fadb44aa044"
2. url:
"/livraison/nouvellelivraison.selectapplications:change"
3. zoneId: "formZone"
2. linkZone: [{linkId:deleteApplication_1fadb44aa044,
url:/livraison/nouvellelivraison.deleteapplication/36,…},…]
1. 0: {linkId:deleteApplication_1fadb44aa044,
url:/livraison/nouvellelivraison.deleteapplication/36,…}
1. linkId: "deleteApplication_1fadb44aa044"
2. url: "/livraison/nouvellelivraison.deleteapplication/36"
3. zoneId: "formZone"
2. 1: {linkId:deleteApplication_1fadb44aa044_0,
url:/livraison/nouvellelivraison.deleteapplication/37,…}
1. linkId: "deleteApplication_1fadb44aa044_0"
2. url: "/livraison/nouvellelivraison.deleteapplication/37"
3. zoneId: "formZone"
3. observe: [{fieldIds:[selectClients],
id:selectApplications_1fadb44aa044, event:change, zone:formZone,…}]
1. 0: {fieldIds:[selectClients],
id:selectApplications_1fadb44aa044, event:change, zone:formZone,…}
1. event: "change"
2. fieldIds: [selectClients]
1. 0: "selectClients"
3. id: "selectApplications_1fadb44aa044"
4. url:
"/livraison/nouvellelivraison.selectapplications:observe/observeSelectApp/$N/1"
5. zone: "formZone"
3. scripts: [/livraison/assets/1.0/ctx/javascript/observe.js]
1. 0: "/livraison/assets/1.0/ctx/javascript/observe.js"
It seems the request got the values from the observe mixin : fieldIds,
event, etc...
About the id problem of select, in the code source of the page the id of
the select is good, but here in the json request there is an id appended in
suffix :
1. selectId: "selectClients_1fadb44aa044"
Is that the problem of select clientId you are talking ?
I don't see what you mean by a data attribute.
PS : thanks for your help.
2014-09-22 18:37 GMT+02:00 Lance Java <la...@googlemail.com>:
> What happens when you view the network traffic in the chrome developer
> tools? Can you see the values as request parameters?
>
> Are the select element ids (in the html) what you think they are? There's
> an issue where the clientId is ignored by tapestry for select. And tapestry
> adds a unique suffix to the end of the id. This has been fixed in recent
> 5.4 builds but probably not on 5.3.
>
> You might need to add a data- attribute to the select element and bind to
> that (using an appropriate selector) instead of the unpredictable id.
>
Re: observe mixin
Posted by Lance Java <la...@googlemail.com>.
What happens when you view the network traffic in the chrome developer
tools? Can you see the values as request parameters?
Are the select element ids (in the html) what you think they are? There's
an issue where the clientId is ignored by tapestry for select. And tapestry
adds a unique suffix to the end of the id. This has been fixed in recent
5.4 builds but probably not on 5.3.
You might need to add a data- attribute to the select element and bind to
that (using an appropriate selector) instead of the unpredictable id.
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
Do you see why observe does not work? Or another method to make working
what I want to do ? I'm stuck on this.
2014-09-22 16:39 GMT+02:00 squallmat . <sq...@gmail.com>:
> Ok the javascript works now, but not the mixin itself.
> I have a first select where i chose a value, and then a second select
> where i chose another value. On change on the second select I ajax reload
> both in a zone and i'd like the first to keep value.
>
> In the event method I reallocate the value of the first select, but still
> it doesn't keep it even with this observer... am i missing something ?
>
>
> 2014-09-22 16:27 GMT+02:00 squallmat . <sq...@gmail.com>:
>
> ok I used bind function instead of observe. And even with the original
>> values $(spec.id) without the # the code works now.
>> First time i make a javascript working :p
>>
>> 2014-09-22 15:56 GMT+02:00 squallmat . <sq...@gmail.com>:
>>
>> Hi Lance, thanks for the help. Yes i really need to learn javascript, I
>>> still have an error on the js you gave me :
>>> apparently the observe() function is a prototype one, i'm trying to find
>>> an equivalent in jquery but i didn't found yet.
>>> Do you know how i could convert this observe() to jquery ?
>>>
>>> 2014-09-22 14:12 GMT+02:00 Lance Java <la...@googlemail.com>:
>>>
>>>> Well, if you want to call yourself a web developer... it's probably
>>>> about
>>>> time you learnt a bit of javascript ;)
>>>>
>>>> The jquery version would probably look something like:
>>>>
>>>> T5.extendInitializers({
>>>> observe: function (spec) {
>>>> $('#' + spec.id).on(spec.event, function() {
>>>> var params = {};
>>>> if (spec.fieldIds) {
>>>> for (var i = 0; i < spec.fieldIds.length; ++i) {
>>>> var fieldId = spec.fieldIds[i];
>>>> var paramName = "observe" + i;
>>>> var paramValue = $('#' + fieldId).val();
>>>> params[paramName] = paramValue;
>>>> }
>>>> }
>>>> var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
>>>> zoneManager.updateFromURL(spec.url, params);
>>>> });
>>>> }
>>>> });
>>>>
>>>> Please note, it's untested and I'm not that familiar with
>>>> tapestry-jquery.
>>>> I'm not even sure if Tapestry.findZoneManagerForZone(...) has been
>>>> implemented in tapestry-jquery.
>>>>
>>>
>>>
>>
>
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
Ok the javascript works now, but not the mixin itself.
I have a first select where i chose a value, and then a second select where
i chose another value. On change on the second select I ajax reload both in
a zone and i'd like the first to keep value.
In the event method I reallocate the value of the first select, but still
it doesn't keep it even with this observer... am i missing something ?
2014-09-22 16:27 GMT+02:00 squallmat . <sq...@gmail.com>:
> ok I used bind function instead of observe. And even with the original
> values $(spec.id) without the # the code works now.
> First time i make a javascript working :p
>
> 2014-09-22 15:56 GMT+02:00 squallmat . <sq...@gmail.com>:
>
> Hi Lance, thanks for the help. Yes i really need to learn javascript, I
>> still have an error on the js you gave me :
>> apparently the observe() function is a prototype one, i'm trying to find
>> an equivalent in jquery but i didn't found yet.
>> Do you know how i could convert this observe() to jquery ?
>>
>> 2014-09-22 14:12 GMT+02:00 Lance Java <la...@googlemail.com>:
>>
>>> Well, if you want to call yourself a web developer... it's probably about
>>> time you learnt a bit of javascript ;)
>>>
>>> The jquery version would probably look something like:
>>>
>>> T5.extendInitializers({
>>> observe: function (spec) {
>>> $('#' + spec.id).on(spec.event, function() {
>>> var params = {};
>>> if (spec.fieldIds) {
>>> for (var i = 0; i < spec.fieldIds.length; ++i) {
>>> var fieldId = spec.fieldIds[i];
>>> var paramName = "observe" + i;
>>> var paramValue = $('#' + fieldId).val();
>>> params[paramName] = paramValue;
>>> }
>>> }
>>> var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
>>> zoneManager.updateFromURL(spec.url, params);
>>> });
>>> }
>>> });
>>>
>>> Please note, it's untested and I'm not that familiar with
>>> tapestry-jquery.
>>> I'm not even sure if Tapestry.findZoneManagerForZone(...) has been
>>> implemented in tapestry-jquery.
>>>
>>
>>
>
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
ok I used bind function instead of observe. And even with the original
values $(spec.id) without the # the code works now.
First time i make a javascript working :p
2014-09-22 15:56 GMT+02:00 squallmat . <sq...@gmail.com>:
> Hi Lance, thanks for the help. Yes i really need to learn javascript, I
> still have an error on the js you gave me :
> apparently the observe() function is a prototype one, i'm trying to find
> an equivalent in jquery but i didn't found yet.
> Do you know how i could convert this observe() to jquery ?
>
> 2014-09-22 14:12 GMT+02:00 Lance Java <la...@googlemail.com>:
>
>> Well, if you want to call yourself a web developer... it's probably about
>> time you learnt a bit of javascript ;)
>>
>> The jquery version would probably look something like:
>>
>> T5.extendInitializers({
>> observe: function (spec) {
>> $('#' + spec.id).on(spec.event, function() {
>> var params = {};
>> if (spec.fieldIds) {
>> for (var i = 0; i < spec.fieldIds.length; ++i) {
>> var fieldId = spec.fieldIds[i];
>> var paramName = "observe" + i;
>> var paramValue = $('#' + fieldId).val();
>> params[paramName] = paramValue;
>> }
>> }
>> var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
>> zoneManager.updateFromURL(spec.url, params);
>> });
>> }
>> });
>>
>> Please note, it's untested and I'm not that familiar with tapestry-jquery.
>> I'm not even sure if Tapestry.findZoneManagerForZone(...) has been
>> implemented in tapestry-jquery.
>>
>
>
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
Hi Lance, thanks for the help. Yes i really need to learn javascript, I
still have an error on the js you gave me :
apparently the observe() function is a prototype one, i'm trying to find an
equivalent in jquery but i didn't found yet.
Do you know how i could convert this observe() to jquery ?
2014-09-22 14:12 GMT+02:00 Lance Java <la...@googlemail.com>:
> Well, if you want to call yourself a web developer... it's probably about
> time you learnt a bit of javascript ;)
>
> The jquery version would probably look something like:
>
> T5.extendInitializers({
> observe: function (spec) {
> $('#' + spec.id).on(spec.event, function() {
> var params = {};
> if (spec.fieldIds) {
> for (var i = 0; i < spec.fieldIds.length; ++i) {
> var fieldId = spec.fieldIds[i];
> var paramName = "observe" + i;
> var paramValue = $('#' + fieldId).val();
> params[paramName] = paramValue;
> }
> }
> var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
> zoneManager.updateFromURL(spec.url, params);
> });
> }
> });
>
> Please note, it's untested and I'm not that familiar with tapestry-jquery.
> I'm not even sure if Tapestry.findZoneManagerForZone(...) has been
> implemented in tapestry-jquery.
>
Re: observe mixin
Posted by Lance Java <la...@googlemail.com>.
Well, if you want to call yourself a web developer... it's probably about
time you learnt a bit of javascript ;)
The jquery version would probably look something like:
T5.extendInitializers({
observe: function (spec) {
$('#' + spec.id).on(spec.event, function() {
var params = {};
if (spec.fieldIds) {
for (var i = 0; i < spec.fieldIds.length; ++i) {
var fieldId = spec.fieldIds[i];
var paramName = "observe" + i;
var paramValue = $('#' + fieldId).val();
params[paramName] = paramValue;
}
}
var zoneManager = Tapestry.findZoneManagerForZone(spec.zone);
zoneManager.updateFromURL(spec.url, params);
});
}
});
Please note, it's untested and I'm not that familiar with tapestry-jquery.
I'm not even sure if Tapestry.findZoneManagerForZone(...) has been
implemented in tapestry-jquery.
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
Could you explain me what need to be changed to make the mixin compatible
with jquery ?
2014-09-22 11:39 GMT+02:00 squallmat . <sq...@gmail.com>:
> In the chrome javascript console I have :
>
> Uncaught TypeError: undefined is not a function
>
> I use jquery, because I use some components from
> http://tapestry5-jquery.com/
>
> I'm really bad at javascript and I don't even understand what this error
> means. What i need to change to make it works with jquery/Tapestry 5.3.7 ?
>
> 2014-09-22 11:28 GMT+02:00 Lance Java <la...@googlemail.com>:
>
>> You've probably got a javascript error on the page, check the js console
>> in
>> your browser.
>>
>> Are you using prototype or jquery? The observe javascript is for prototype
>> and will require a tweak for tapestry 5.4 / jquery.
>>
>
>
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
In the chrome javascript console I have :
Uncaught TypeError: undefined is not a function
I use jquery, because I use some components from
http://tapestry5-jquery.com/
I'm really bad at javascript and I don't even understand what this error
means. What i need to change to make it works with jquery/Tapestry 5.3.7 ?
2014-09-22 11:28 GMT+02:00 Lance Java <la...@googlemail.com>:
> You've probably got a javascript error on the page, check the js console in
> your browser.
>
> Are you using prototype or jquery? The observe javascript is for prototype
> and will require a tweak for tapestry 5.4 / jquery.
>
Re: observe mixin
Posted by Lance Java <la...@googlemail.com>.
You've probably got a javascript error on the page, check the js console in
your browser.
Are you using prototype or jquery? The observe javascript is for prototype
and will require a tweak for tapestry 5.4 / jquery.
Re: observe mixin
Posted by "squallmat ." <sq...@gmail.com>.
Hi Lance,
i added observe.zone and now the page launch... but :
Every dynamic behavior has stopped working :
the ajaxformloop I have on my page does not work anymore, my ajaxupload
too, and every zone reloading stopped working... it's like javascript is
disabled. But I tested with a <noscript> tag and javascript is enabled.
If i delete the mixin from the select element and redeploy/reload then ajax
components and zone are working again.
Why the addition of this mixin makes all ajax components stop working ?Am i
missing something ?
2014-09-19 19:29 GMT+02:00 Lance Java <la...@googlemail.com>:
> You're seeing a name clash since both select and observe accept a "zone"
> parameter.
>
> You can qualify the parameter name so that the mixin gets it instead of
> select.
>
> I think you can say observe.zone="foo" (if not it's observe/zone).
> On 19 Sep 2014 17:58, "squallmat ." <sq...@gmail.com> wrote:
>
> > Hi,
> >
> > I'm trying to use the observe mixin from here :
> > http://tapestry-stitch.uklance.cloudbees.net/observedemo
> >
> >
> > I have the code tml :
> > <t:Select t:mixins="observe" clientEvent="change"
> > event="observeSelectApp" zone="formZone"
> > fields="['selectClients']" t:value="selectedApplication"
> > t:id="selectApplications" model="selectApplications"
> > t:encoder="applicatifDtoEncoder" t:zone="formZone" />
> >
> >
> > in controller :
> > Block onObserveSelectApp(ClientDto clientSelected) {
> > selectedClient = clientSelected;
> > return formZone.getBody();
> > }
> >
> >
> > but when I try to launch this page, i have :
> > Caused by: org.apache.tapestry5.ioc.internal.util.TapestryException:
> > Parameter(s) 'Observe.zone' are required for
> > org.apache.tapestry5.corelib.components.Select, but have not been bound.
> > [at classpath:atos/smt/livraison/pages/NouvelleLivraison.tml, line 42]
> > at
> >
> >
> org.apache.tapestry5.internal.structure.ComponentPageElementImpl.verifyRequiredParametersAreBound(ComponentPageElementImpl.java:1189)
> > at
> >
> >
> org.apache.tapestry5.internal.structure.ComponentPageElementImpl.access$2900(ComponentPageElementImpl.java:61)
> > at
> >
> >
> org.apache.tapestry5.internal.structure.ComponentPageElementImpl$3.run(ComponentPageElementImpl.java:802)
> > at
> >
> >
> org.apache.tapestry5.internal.structure.PageImpl.invokeCallbacks(PageImpl.java:362)
> > at
> >
> org.apache.tapestry5.internal.structure.PageImpl.loaded(PageImpl.java:231)
> > at
> >
> >
> org.apache.tapestry5.internal.pageload.PageLoaderImpl$3.invoke(PageLoaderImpl.java:193)
> > at
> >
> >
> org.apache.tapestry5.internal.pageload.PageLoaderImpl$3.invoke(PageLoaderImpl.java:178)
> > at
> >
> >
> org.apache.tapestry5.ioc.internal.OperationTrackerImpl.invoke(OperationTrackerImpl.java:74)
> > ... 92 more
> >
> >
> >
> > But, the zone attribute is here in my code... Do you see why such a
> problem
> > ?
> >
>
Re: observe mixin
Posted by Lance Java <la...@googlemail.com>.
You're seeing a name clash since both select and observe accept a "zone"
parameter.
You can qualify the parameter name so that the mixin gets it instead of
select.
I think you can say observe.zone="foo" (if not it's observe/zone).
On 19 Sep 2014 17:58, "squallmat ." <sq...@gmail.com> wrote:
> Hi,
>
> I'm trying to use the observe mixin from here :
> http://tapestry-stitch.uklance.cloudbees.net/observedemo
>
>
> I have the code tml :
> <t:Select t:mixins="observe" clientEvent="change"
> event="observeSelectApp" zone="formZone"
> fields="['selectClients']" t:value="selectedApplication"
> t:id="selectApplications" model="selectApplications"
> t:encoder="applicatifDtoEncoder" t:zone="formZone" />
>
>
> in controller :
> Block onObserveSelectApp(ClientDto clientSelected) {
> selectedClient = clientSelected;
> return formZone.getBody();
> }
>
>
> but when I try to launch this page, i have :
> Caused by: org.apache.tapestry5.ioc.internal.util.TapestryException:
> Parameter(s) 'Observe.zone' are required for
> org.apache.tapestry5.corelib.components.Select, but have not been bound.
> [at classpath:atos/smt/livraison/pages/NouvelleLivraison.tml, line 42]
> at
>
> org.apache.tapestry5.internal.structure.ComponentPageElementImpl.verifyRequiredParametersAreBound(ComponentPageElementImpl.java:1189)
> at
>
> org.apache.tapestry5.internal.structure.ComponentPageElementImpl.access$2900(ComponentPageElementImpl.java:61)
> at
>
> org.apache.tapestry5.internal.structure.ComponentPageElementImpl$3.run(ComponentPageElementImpl.java:802)
> at
>
> org.apache.tapestry5.internal.structure.PageImpl.invokeCallbacks(PageImpl.java:362)
> at
> org.apache.tapestry5.internal.structure.PageImpl.loaded(PageImpl.java:231)
> at
>
> org.apache.tapestry5.internal.pageload.PageLoaderImpl$3.invoke(PageLoaderImpl.java:193)
> at
>
> org.apache.tapestry5.internal.pageload.PageLoaderImpl$3.invoke(PageLoaderImpl.java:178)
> at
>
> org.apache.tapestry5.ioc.internal.OperationTrackerImpl.invoke(OperationTrackerImpl.java:74)
> ... 92 more
>
>
>
> But, the zone attribute is here in my code... Do you see why such a problem
> ?
>