You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Jonhy Pear <jo...@gmail.com> on 2009/11/12 00:50:06 UTC
ActionLink context help
I'm still getting started with Tapestry by doing some stuff, but... many
questions.
This one is in regards to AJAX. It's a "How to" kinda question.
I Have a form like this in my page.tml:
<form t:type="form" t:id="registrationForm" clientValidation="false">
<t:label for="userName" />
<input t:type="TextField" t:id="userName" value="user.name"
t:validate="required,
maxlength=15, minLength=3" size="15" />
<t:zone t:id="userNameDuplicatedNotice">${userExistMessage}</t:zone>
<a t:type="actionlink" t:id="verifyDuplicatedUserName"
context="literal:testing"
href="#" t:zone="userNameDuplicatedNotice">${message:verify-username-duplicated-link}</a>
<input type="submit" value="${message:label.submit.create.user}" />
</form>
What I'm trying to figure out is: What is the best way to give the current
value of textfield "userName" to the context of the link
"verifyDuplicatedLogin"?
Let me try to express with a user story:
As a user I want to introduce a user name and click in a link to
automatically(AJAX) receive a message informing me if the "userName" is
already taken or not
Thank you,
jp
Re: ActionLink context help
Posted by Inge Solvoll <in...@gmail.com>.
Looks good!
It would be even safer to generate a link with placeholders, but your
approach is probably safe enough. The thing we're really missing here is a
hook in Tapestry.js that does something similar to the example code below.
Tapestry.prototype.appendLinkContext = function(linkId, value) {
var oldHref = $(linkId).href;
return oldHref + '/' + encode(value);
}
On Sun, Nov 15, 2009 at 1:44 AM, Jonhy Pear <jo...@gmail.com> wrote:
> Thanks Magnus and Inge,
>
> Your really helped me to find a possible solution.
> I created a mixin called InjectClientValue and used it like this:
>
> <a t:type="actionlink" t:id="verifyDuplicatedLogin" href="#"
> t:mixins="injectClientValue"
> t:sourceElementId="login"
>
>
> t:updateElementId="loginDuplicatedNotice">${message:verify-login-duplicated-link}</a>
>
> sourceElementId is the id of the input from where I want to read the value
> to send to the server.
>
>
> In my tml I have a div:
>
> <div id="loginDuplicatedNotice"></div>
>
> My InjectClientValue.js is as follows:
>
> InjectClientValue.prototype = {
> initialize : function(sourceElement, eventElement, updateElement) {
> this.sourceElement = $(sourceElement);
> this.element = $(eventElement);
> this.updateElement = $(updateElement)
> this.element.observe('click',
> this.onClick.bindAsEventListener(this));
> },
>
> onClick : function(event) {
> var currentInstance = this;
> Tapestry.debug(this.sourceElement.value);
> Tapestry.debug(this.element.href);
>
> if (this.sourceElement == null) {
> Tapestry.error("Error: sourceElement is null");
> event.stop();
> return;
> }
> if (this.element == null) {
> Tapestry.error("Error: element is null");
> event.stop();
> return;
> }
> if (this.updateElement == null) {
> Tapestry.error("Error: updateElement is null");
> event.stop();
> return;
> }
> if (this.sourceElement.value == "") {
>
> Tapestry.warn("Error: sourceElement is empty");
> event.stop();
> return;
> }
>
> new Ajax.Request(this.element.href + "/" + this.sourceElement.value,
> {
> method : 'get',
> onSuccess : function(transport) {
> currentInstance.updateElement
> .update(transport.responseJSON.content);
> }
> });
> event.stop();
>
> }
>
> }
>
> //End
>
> This is working now, but I would like you to comment.
>
> Thank you
>
>
> On Thu, Nov 12, 2009 at 11:15 AM, Inge Solvoll <inge.tapestry@gmail.com
> >wrote:
>
> > See my blog for a relevant implementation that has (among other things) a
> > possible pattern to solve your problem. The pattern is to generating the
> > action link with placeholders on page setup, pass it to javascript, and
> > create a javascript function that replaces the placeholders runtime on
> > client. Then wrap it in a component or a mixin.
> >
> >
> >
> http://tinybits.blogspot.com/2009/05/update-zone-on-any-client-side-event.html
> >
> > You could vote for this JIRA-issue, which also is a suggestion for making
> > these things easier to do:
> >
> > https://issues.apache.org/jira/browse/TAP5-521
> >
> > Inge
> >
> > On Thu, Nov 12, 2009 at 9:41 AM, Magnus Rundberget <ru...@me.com>
> wrote:
> >
> > > Hi,
> > >
> > >
> > > Others will surely correct me if I'm wrong...
> > > - Ideally you should be able to create a mixin for the onclick event on
> > the
> > > actionlink that picks up the value of the textfield and sets the
> context
> > > before the tapestry actionlink event triggers. However since the
> > actionlink
> > > is tied to a zone this is not so trivial. Something to do with
> > > indeterministic ordering of events in javascript i believe
> > >
> > >
> > > I can see a couple of other alternatives;
> > > 1. Event and a little javascript using prototype and its inbuildt
> support
> > > for ajax requests. Haven't tested the below so a big disclaimer here
> :-)
> > >
> > > A) Sample Javascript - checkusername.js;
> > > CheckUserNameLink.prototype = {
> > > initialize: function(elementId, requestUrl)
> > > {
> > > this.elementId = elementId;
> > > this.requestUrl = requestUrl;
> > >
> > > Event.observe($(this.elementId), 'click',
> > > this._click.bindAsEventListener(this));
> > > },
> > > _click: function(theEvent)
> > > {
> > > var url = this.requestUrl + "/" +
> > encodeURIComponent($('userName'));
> > > // adding the username as a context param to event
> > > new Ajax.Request(this.requestUrl, {
> > > method: 'get',
> > > onSuccess: function(transport) {
> > > var isTaken = transport.responseJSON.isTaken;
> > > if (isTaken === 'true') {
> > > // javascript to tell user the username is take...
> update
> > a
> > > div/span or whatever
> > > }
> > > }
> > > });
> > > }
> > > };
> > >
> > > B) In your TML
> > > remove the zone/replace with an empty div/span or whatever
> > > <a href="#"
> > >
> >
> id="d="verifyDuplicatedUserName"">${message:verify-username-duplicated-link}</a>
> > >
> > >
> > > C) In your page class
> > > // above class definition
> > > @IncludeJavaScriptLibrary({"context:js/checkusername.js"})
> > >
> > >
> > > // inside class body
> > > private static final String CHECK_USER_NAME_EVENT = "checkusername";
> > >
> > > @Inject
> > > private RenderSupport renderSupport;
> > >
> > > @Inject
> > > private ComponentResources componentResources;
> > >
> > > @AfterRender
> > > void afterRender() {
> > > Link link =
> > > componentResources.createEventLink(CHECK_USER_NAME_EVENT);
> > > renderSupport.addScript("new CheckUserNameLink('%s', '%s');",
> > > "verifyDuplicatedUserName", link.toAbsoluteURI);
> > > }
> > >
> > > @OnEvent(value = CHECK_USER_NAME_EVENT)
> > > public Object onVerifyUserName(String userName) {
> > >
> > > //... do whatever you need to verify if username is taken
> > >
> > > // return result as json
> > > JSONObject response = new JSONObject();
> > > response.put("isTaken", isTaken);
> > > return response;
> > > }
> > >
> > >
> > > 2. Autocomple: You might use the autocomplete mixin for textfield ?
> > > ...have to be creative to make it user friendly though ...
> > >
> > >
> > >
> > > cheers
> > > rundis
> > >
> > >
> > >
> > >
> > >
> > >
> > > I'm still getting started with Tapestry by doing some stuff, but...
> many
> > >> questions.
> > >>
> > >> This one is in regards to AJAX. It's a "How to" kinda question.
> > >>
> > >> I Have a form like this in my page.tml:
> > >>
> > >> <form t:type="form" t:id="registrationForm" clientValidation="false">
> > >> <t:label for="userName" />
> > >>
> > >> <input t:type="TextField" t:id="userName" value="user.name"
> > >> t:validate="required,
> > >> maxlength=15, minLength=3" size="15" />
> > >> <t:zone t:id="userNameDuplicatedNotice">${userExistMessage}</t:zone>
> > >>
> > >> <a t:type="actionlink" t:id="verifyDuplicatedUserName"
> > >> context="literal:testing"
> > >> href="#"
> > >>
> >
> t:zone="userNameDuplicatedNotice">${message:verify-username-duplicated-link}</a>
> > >>
> > >> <input type="submit" value="${message:label.submit.create.user}" />
> > >>
> > >> </form>
> > >>
> > >> What I'm trying to figure out is: What is the best way to give the
> > current
> > >> value of textfield "userName" to the context of the link
> > >> "verifyDuplicatedLogin"?
> > >>
> > >> Let me try to express with a user story:
> > >>
> > >> As a user I want to introduce a user name and click in a link to
> > >> automatically(AJAX) receive a message informing me if the "userName"
> is
> > >> already taken or not
> > >>
> > >>
> > >>
> > >> Thank you,
> > >>
> > >> jp
> > >>
> > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > > For additional commands, e-mail: users-help@tapestry.apache.org
> > >
> > >
> >
>
Re: ActionLink context help
Posted by Jonhy Pear <jo...@gmail.com>.
Thanks Magnus and Inge,
Your really helped me to find a possible solution.
I created a mixin called InjectClientValue and used it like this:
<a t:type="actionlink" t:id="verifyDuplicatedLogin" href="#"
t:mixins="injectClientValue"
t:sourceElementId="login"
t:updateElementId="loginDuplicatedNotice">${message:verify-login-duplicated-link}</a>
sourceElementId is the id of the input from where I want to read the value
to send to the server.
In my tml I have a div:
<div id="loginDuplicatedNotice"></div>
My InjectClientValue.js is as follows:
InjectClientValue.prototype = {
initialize : function(sourceElement, eventElement, updateElement) {
this.sourceElement = $(sourceElement);
this.element = $(eventElement);
this.updateElement = $(updateElement)
this.element.observe('click',
this.onClick.bindAsEventListener(this));
},
onClick : function(event) {
var currentInstance = this;
Tapestry.debug(this.sourceElement.value);
Tapestry.debug(this.element.href);
if (this.sourceElement == null) {
Tapestry.error("Error: sourceElement is null");
event.stop();
return;
}
if (this.element == null) {
Tapestry.error("Error: element is null");
event.stop();
return;
}
if (this.updateElement == null) {
Tapestry.error("Error: updateElement is null");
event.stop();
return;
}
if (this.sourceElement.value == "") {
Tapestry.warn("Error: sourceElement is empty");
event.stop();
return;
}
new Ajax.Request(this.element.href + "/" + this.sourceElement.value,
{
method : 'get',
onSuccess : function(transport) {
currentInstance.updateElement
.update(transport.responseJSON.content);
}
});
event.stop();
}
}
//End
This is working now, but I would like you to comment.
Thank you
On Thu, Nov 12, 2009 at 11:15 AM, Inge Solvoll <in...@gmail.com>wrote:
> See my blog for a relevant implementation that has (among other things) a
> possible pattern to solve your problem. The pattern is to generating the
> action link with placeholders on page setup, pass it to javascript, and
> create a javascript function that replaces the placeholders runtime on
> client. Then wrap it in a component or a mixin.
>
>
> http://tinybits.blogspot.com/2009/05/update-zone-on-any-client-side-event.html
>
> You could vote for this JIRA-issue, which also is a suggestion for making
> these things easier to do:
>
> https://issues.apache.org/jira/browse/TAP5-521
>
> Inge
>
> On Thu, Nov 12, 2009 at 9:41 AM, Magnus Rundberget <ru...@me.com> wrote:
>
> > Hi,
> >
> >
> > Others will surely correct me if I'm wrong...
> > - Ideally you should be able to create a mixin for the onclick event on
> the
> > actionlink that picks up the value of the textfield and sets the context
> > before the tapestry actionlink event triggers. However since the
> actionlink
> > is tied to a zone this is not so trivial. Something to do with
> > indeterministic ordering of events in javascript i believe
> >
> >
> > I can see a couple of other alternatives;
> > 1. Event and a little javascript using prototype and its inbuildt support
> > for ajax requests. Haven't tested the below so a big disclaimer here :-)
> >
> > A) Sample Javascript - checkusername.js;
> > CheckUserNameLink.prototype = {
> > initialize: function(elementId, requestUrl)
> > {
> > this.elementId = elementId;
> > this.requestUrl = requestUrl;
> >
> > Event.observe($(this.elementId), 'click',
> > this._click.bindAsEventListener(this));
> > },
> > _click: function(theEvent)
> > {
> > var url = this.requestUrl + "/" +
> encodeURIComponent($('userName'));
> > // adding the username as a context param to event
> > new Ajax.Request(this.requestUrl, {
> > method: 'get',
> > onSuccess: function(transport) {
> > var isTaken = transport.responseJSON.isTaken;
> > if (isTaken === 'true') {
> > // javascript to tell user the username is take... update
> a
> > div/span or whatever
> > }
> > }
> > });
> > }
> > };
> >
> > B) In your TML
> > remove the zone/replace with an empty div/span or whatever
> > <a href="#"
> >
> id="d="verifyDuplicatedUserName"">${message:verify-username-duplicated-link}</a>
> >
> >
> > C) In your page class
> > // above class definition
> > @IncludeJavaScriptLibrary({"context:js/checkusername.js"})
> >
> >
> > // inside class body
> > private static final String CHECK_USER_NAME_EVENT = "checkusername";
> >
> > @Inject
> > private RenderSupport renderSupport;
> >
> > @Inject
> > private ComponentResources componentResources;
> >
> > @AfterRender
> > void afterRender() {
> > Link link =
> > componentResources.createEventLink(CHECK_USER_NAME_EVENT);
> > renderSupport.addScript("new CheckUserNameLink('%s', '%s');",
> > "verifyDuplicatedUserName", link.toAbsoluteURI);
> > }
> >
> > @OnEvent(value = CHECK_USER_NAME_EVENT)
> > public Object onVerifyUserName(String userName) {
> >
> > //... do whatever you need to verify if username is taken
> >
> > // return result as json
> > JSONObject response = new JSONObject();
> > response.put("isTaken", isTaken);
> > return response;
> > }
> >
> >
> > 2. Autocomple: You might use the autocomplete mixin for textfield ?
> > ...have to be creative to make it user friendly though ...
> >
> >
> >
> > cheers
> > rundis
> >
> >
> >
> >
> >
> >
> > I'm still getting started with Tapestry by doing some stuff, but... many
> >> questions.
> >>
> >> This one is in regards to AJAX. It's a "How to" kinda question.
> >>
> >> I Have a form like this in my page.tml:
> >>
> >> <form t:type="form" t:id="registrationForm" clientValidation="false">
> >> <t:label for="userName" />
> >>
> >> <input t:type="TextField" t:id="userName" value="user.name"
> >> t:validate="required,
> >> maxlength=15, minLength=3" size="15" />
> >> <t:zone t:id="userNameDuplicatedNotice">${userExistMessage}</t:zone>
> >>
> >> <a t:type="actionlink" t:id="verifyDuplicatedUserName"
> >> context="literal:testing"
> >> href="#"
> >>
> t:zone="userNameDuplicatedNotice">${message:verify-username-duplicated-link}</a>
> >>
> >> <input type="submit" value="${message:label.submit.create.user}" />
> >>
> >> </form>
> >>
> >> What I'm trying to figure out is: What is the best way to give the
> current
> >> value of textfield "userName" to the context of the link
> >> "verifyDuplicatedLogin"?
> >>
> >> Let me try to express with a user story:
> >>
> >> As a user I want to introduce a user name and click in a link to
> >> automatically(AJAX) receive a message informing me if the "userName" is
> >> already taken or not
> >>
> >>
> >>
> >> Thank you,
> >>
> >> jp
> >>
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
Re: ActionLink context help
Posted by Inge Solvoll <in...@gmail.com>.
See my blog for a relevant implementation that has (among other things) a
possible pattern to solve your problem. The pattern is to generating the
action link with placeholders on page setup, pass it to javascript, and
create a javascript function that replaces the placeholders runtime on
client. Then wrap it in a component or a mixin.
http://tinybits.blogspot.com/2009/05/update-zone-on-any-client-side-event.html
You could vote for this JIRA-issue, which also is a suggestion for making
these things easier to do:
https://issues.apache.org/jira/browse/TAP5-521
Inge
On Thu, Nov 12, 2009 at 9:41 AM, Magnus Rundberget <ru...@me.com> wrote:
> Hi,
>
>
> Others will surely correct me if I'm wrong...
> - Ideally you should be able to create a mixin for the onclick event on the
> actionlink that picks up the value of the textfield and sets the context
> before the tapestry actionlink event triggers. However since the actionlink
> is tied to a zone this is not so trivial. Something to do with
> indeterministic ordering of events in javascript i believe
>
>
> I can see a couple of other alternatives;
> 1. Event and a little javascript using prototype and its inbuildt support
> for ajax requests. Haven't tested the below so a big disclaimer here :-)
>
> A) Sample Javascript - checkusername.js;
> CheckUserNameLink.prototype = {
> initialize: function(elementId, requestUrl)
> {
> this.elementId = elementId;
> this.requestUrl = requestUrl;
>
> Event.observe($(this.elementId), 'click',
> this._click.bindAsEventListener(this));
> },
> _click: function(theEvent)
> {
> var url = this.requestUrl + "/" + encodeURIComponent($('userName'));
> // adding the username as a context param to event
> new Ajax.Request(this.requestUrl, {
> method: 'get',
> onSuccess: function(transport) {
> var isTaken = transport.responseJSON.isTaken;
> if (isTaken === 'true') {
> // javascript to tell user the username is take... update a
> div/span or whatever
> }
> }
> });
> }
> };
>
> B) In your TML
> remove the zone/replace with an empty div/span or whatever
> <a href="#"
> id="d="verifyDuplicatedUserName"">${message:verify-username-duplicated-link}</a>
>
>
> C) In your page class
> // above class definition
> @IncludeJavaScriptLibrary({"context:js/checkusername.js"})
>
>
> // inside class body
> private static final String CHECK_USER_NAME_EVENT = "checkusername";
>
> @Inject
> private RenderSupport renderSupport;
>
> @Inject
> private ComponentResources componentResources;
>
> @AfterRender
> void afterRender() {
> Link link =
> componentResources.createEventLink(CHECK_USER_NAME_EVENT);
> renderSupport.addScript("new CheckUserNameLink('%s', '%s');",
> "verifyDuplicatedUserName", link.toAbsoluteURI);
> }
>
> @OnEvent(value = CHECK_USER_NAME_EVENT)
> public Object onVerifyUserName(String userName) {
>
> //... do whatever you need to verify if username is taken
>
> // return result as json
> JSONObject response = new JSONObject();
> response.put("isTaken", isTaken);
> return response;
> }
>
>
> 2. Autocomple: You might use the autocomplete mixin for textfield ?
> ...have to be creative to make it user friendly though ...
>
>
>
> cheers
> rundis
>
>
>
>
>
>
> I'm still getting started with Tapestry by doing some stuff, but... many
>> questions.
>>
>> This one is in regards to AJAX. It's a "How to" kinda question.
>>
>> I Have a form like this in my page.tml:
>>
>> <form t:type="form" t:id="registrationForm" clientValidation="false">
>> <t:label for="userName" />
>>
>> <input t:type="TextField" t:id="userName" value="user.name"
>> t:validate="required,
>> maxlength=15, minLength=3" size="15" />
>> <t:zone t:id="userNameDuplicatedNotice">${userExistMessage}</t:zone>
>>
>> <a t:type="actionlink" t:id="verifyDuplicatedUserName"
>> context="literal:testing"
>> href="#"
>> t:zone="userNameDuplicatedNotice">${message:verify-username-duplicated-link}</a>
>>
>> <input type="submit" value="${message:label.submit.create.user}" />
>>
>> </form>
>>
>> What I'm trying to figure out is: What is the best way to give the current
>> value of textfield "userName" to the context of the link
>> "verifyDuplicatedLogin"?
>>
>> Let me try to express with a user story:
>>
>> As a user I want to introduce a user name and click in a link to
>> automatically(AJAX) receive a message informing me if the "userName" is
>> already taken or not
>>
>>
>>
>> Thank you,
>>
>> jp
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: ActionLink context help
Posted by Magnus Rundberget <ru...@me.com>.
Hi,
Others will surely correct me if I'm wrong...
- Ideally you should be able to create a mixin for the onclick event
on the actionlink that picks up the value of the textfield and sets
the context before the tapestry actionlink event triggers. However
since the actionlink is tied to a zone this is not so trivial.
Something to do with indeterministic ordering of events in javascript
i believe
I can see a couple of other alternatives;
1. Event and a little javascript using prototype and its inbuildt
support for ajax requests. Haven't tested the below so a big
disclaimer here :-)
A) Sample Javascript - checkusername.js;
CheckUserNameLink.prototype = {
initialize: function(elementId, requestUrl)
{
this.elementId = elementId;
this.requestUrl = requestUrl;
Event.observe($(this.elementId), 'click',
this._click.bindAsEventListener(this));
},
_click: function(theEvent)
{
var url = this.requestUrl + "/" + encodeURIComponent($
('userName')); // adding the username as a context param to event
new Ajax.Request(this.requestUrl, {
method: 'get',
onSuccess: function(transport) {
var isTaken = transport.responseJSON.isTaken;
if (isTaken === 'true') {
// javascript to tell user the username is take... update a div/
span or whatever
}
}
});
}
};
B) In your TML
remove the zone/replace with an empty div/span or whatever
<a href="#" id="d="verifyDuplicatedUserName"">${message:verify-username-duplicated-link
}</a>
C) In your page class
// above class definition
@IncludeJavaScriptLibrary({"context:js/checkusername.js"})
// inside class body
private static final String CHECK_USER_NAME_EVENT = "checkusername";
@Inject
private RenderSupport renderSupport;
@Inject
private ComponentResources componentResources;
@AfterRender
void afterRender() {
Link link =
componentResources.createEventLink(CHECK_USER_NAME_EVENT);
renderSupport.addScript("new CheckUserNameLink('%s', '%s');",
"verifyDuplicatedUserName", link.toAbsoluteURI);
}
@OnEvent(value = CHECK_USER_NAME_EVENT)
public Object onVerifyUserName(String userName) {
//... do whatever you need to verify if username is taken
// return result as json
JSONObject response = new JSONObject();
response.put("isTaken", isTaken);
return response;
}
2. Autocomple: You might use the autocomplete mixin for textfield ?
...have to be creative to make it user friendly though ...
cheers
rundis
> I'm still getting started with Tapestry by doing some stuff, but...
> many
> questions.
>
> This one is in regards to AJAX. It's a "How to" kinda question.
>
> I Have a form like this in my page.tml:
>
> <form t:type="form" t:id="registrationForm" clientValidation="false">
> <t:label for="userName" />
>
> <input t:type="TextField" t:id="userName" value="user.name"
> t:validate="required,
> maxlength=15, minLength=3" size="15" />
> <t:zone t:id="userNameDuplicatedNotice">${userExistMessage}</t:zone>
>
> <a t:type="actionlink" t:id="verifyDuplicatedUserName"
> context="literal:testing"
> href="#" t:zone="userNameDuplicatedNotice">${message:verify-username-duplicated-link
> }</a>
>
> <input type="submit" value="${message:label.submit.create.user}" />
>
> </form>
>
> What I'm trying to figure out is: What is the best way to give the
> current
> value of textfield "userName" to the context of the link
> "verifyDuplicatedLogin"?
>
> Let me try to express with a user story:
>
> As a user I want to introduce a user name and click in a link to
> automatically(AJAX) receive a message informing me if the "userName"
> is
> already taken or not
>
>
>
> Thank you,
>
> jp
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org