You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Joel Halbert <jo...@su3analytics.com> on 2011/03/28 20:46:24 UTC

dynamically changing event link context on client side using js

Hi,

I have a typical ajax event link e.g. 

<a t:type="eventlink" t:id="ignore" zone="resultsZone">

I want to be able to update the context on the clientside using
javascript, dynamically.
(or alternatively attach a request parameter and have this submitted
with the link).

What's the easiest way to accomplish this?

I can modify the link to change the url to append my context (or request
parameter)  but it seems these post page-load modifications to the
anchor href are ignored when the links is submitted.

Thanks,
Joel

Re: dynamically changing event link context on client side using js

Posted by LLTYK <LL...@mailinator.com>.
I have a mixin that does this. It doesn't have to be a mixin though. I used
the urlencoder from TAP5-637 since space characters and such tend to make
things break. Basically you encoder a bunch of unique characters as the
context of the url server side, then replace it with whatever value you want
actually sent as the context.

@Import(stack="core",
library={"context:/js/urlencoder.js","context:/js/updater.js"})
public class Updater
{
  @Inject
  private JavaScriptSupport jsSupport;
  @Inject
  private ComponentResources componentResources;
  
  @InjectContainer
  private ClientElement element;

  void afterRender()
  {
    String replace = "0xDEADBEEF";
    String url = componentResources.createEventLink("change",
replace).toAbsoluteURI();
    jsSupport.addScript(String.format("new Updater ('%s','%s','%s');",
element.getClientId(), url, replace));
  }
}

//updater.js
var Updater = Class.create({
	initialize : function(elementId,url,urlReplace) {
		try {
			var theSelect = this.theSelect = $(elementId);
			this.theSelect.observe('change',
this.onChange.bindAsEventListener(this));
			this.url = url;
			this.urlReplace = urlReplace;
		} catch (ex) {
			log(ex);
		}
	},
	onChange : function(e) {
		log('onChange');
		var v = URLEncoder.encode(this.theSelect.value);
		log(v);
		var url = this.url.replace(this.urlReplace,v);
		var _this = this;
		Tapestry.ajaxRequest(url);
	}
});


--
View this message in context: http://tapestry-users.832.n2.nabble.com/dynamically-changing-event-link-context-on-client-side-using-js-tp6216273p6218667.html
Sent from the Tapestry Users mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: dynamically changing event link context on client side using js

Posted by Joel Halbert <jo...@su3analytics.com>.
Hi Thiago,

Using this approach, if I was to invoke this ajax URL I'd have to
process the zone response myself manually. What I'd like to be able to
do is update the context or params on an event link so that  when the
clicks on it the response and corresponding zone update is automatically
taken care of.

Now, I can update the context or request params on the client side, but
it seems like these updates are ignored 

For example:

If I have an tapestry event link on the page which generates the
following html:

<a id="ignore2" onclick="javascript:return Tapestry.waitForPage(event);"
href="/home.alerts:ignore2">>mylink</a>


I can update the href using js to add a request parameter:

<a id="ignore2" onclick="javascript:return Tapestry.waitForPage(event);"
href="/home.alerts:ignore2?param=value">>mylink</a>

or add a context:
<a id="ignore2" onclick="javascript:return Tapestry.waitForPage(event);"
href="/home.alerts:ignore2/value">>mylink</a>


but what is submitted to the server when the link is selected is always
the original url:

"/home.alerts:ignore2"

there seems to be no simple way around this?!

- Joel




On Mon, 2011-03-28 at 19:30 -0300, Thiago H. de Paula Figueiredo wrote:

> On Mon, 28 Mar 2011 19:10:00 -0300, Joel Halbert <jo...@su3analytics.com>  
> wrote:
> 
> > I need a way of submitting the dynamic content back to the server as
> > part of an ajax request I'm not clear how I would be able to do this in
> > the manner you suggest.
> 
> Define an event name, @Inject ComponentResources and use its
> createEventLink() method. It returns a Link. To get an absolute URL out of
> it, invoke its toAbsoluteURI() method. Now just pass this URL to your AJAX
> code, most probably using JavascriptSupport.addScript(). Add your data as  
> query parameters.
> 



Re: dynamically changing event link context on client side using js

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
On Mon, 28 Mar 2011 19:10:00 -0300, Joel Halbert <jo...@su3analytics.com>  
wrote:

> I need a way of submitting the dynamic content back to the server as
> part of an ajax request I'm not clear how I would be able to do this in
> the manner you suggest.

Define an event name, @Inject ComponentResources and use its
createEventLink() method. It returns a Link. To get an absolute URL out of
it, invoke its toAbsoluteURI() method. Now just pass this URL to your AJAX
code, most probably using JavascriptSupport.addScript(). Add your data as  
query parameters.

-- 
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor
Owner, Ars Machina Tecnologia da Informação Ltda.
http://www.arsmachina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: dynamically changing event link context on client side using js

Posted by Joel Halbert <jo...@su3analytics.com>.
Hi Mark,

I need a way of submitting the dynamic content back to the server as
part of an ajax request I'm not clear how I would be able to do this in
the manner you suggest. 

- Joel

On Mon, 2011-03-28 at 15:43 -0500, Mark wrote:
> Normally the context is going to be used to figure out the state when
> the link was rendered.  This is particularly useful in a loop were you
> need to figure out which eventlink was actually clicked.  It sounds
> like you want to make the eventlink do different things based on some
> type of ajax event on another part of the page.
> 
> If that is what you are trying to do, are you sure you even need to
> use an eventlink context?  Can you just have the other Ajax event
> update a persistent variable on the page and read it (instead of the
> context) when the eventlink is triggered?
> 
> Mark
> 
> On Mon, Mar 28, 2011 at 1:46 PM, Joel Halbert <jo...@su3analytics.com> wrote:
> > Hi,
> >
> > I have a typical ajax event link e.g.
> >
> > <a t:type="eventlink" t:id="ignore" zone="resultsZone">
> >
> > I want to be able to update the context on the clientside using
> > javascript, dynamically.
> > (or alternatively attach a request parameter and have this submitted
> > with the link).
> >
> > What's the easiest way to accomplish this?
> >
> > I can modify the link to change the url to append my context (or request
> > parameter)  but it seems these post page-load modifications to the
> > anchor href are ignored when the links is submitted.
> >
> > Thanks,
> > Joel
> >
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 



---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: dynamically changing event link context on client side using js

Posted by Mark <ma...@xeric.net>.
Normally the context is going to be used to figure out the state when
the link was rendered.  This is particularly useful in a loop were you
need to figure out which eventlink was actually clicked.  It sounds
like you want to make the eventlink do different things based on some
type of ajax event on another part of the page.

If that is what you are trying to do, are you sure you even need to
use an eventlink context?  Can you just have the other Ajax event
update a persistent variable on the page and read it (instead of the
context) when the eventlink is triggered?

Mark

On Mon, Mar 28, 2011 at 1:46 PM, Joel Halbert <jo...@su3analytics.com> wrote:
> Hi,
>
> I have a typical ajax event link e.g.
>
> <a t:type="eventlink" t:id="ignore" zone="resultsZone">
>
> I want to be able to update the context on the clientside using
> javascript, dynamically.
> (or alternatively attach a request parameter and have this submitted
> with the link).
>
> What's the easiest way to accomplish this?
>
> I can modify the link to change the url to append my context (or request
> parameter)  but it seems these post page-load modifications to the
> anchor href are ignored when the links is submitted.
>
> Thanks,
> Joel
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org