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.tapes...@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 <run...@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-unsubscr...@tapestry.apache.org
> > For additional commands, e-mail: users-h...@tapestry.apache.org
> >
> >
>
