CODEWITHSUNDEEP
tapestry
M.L.
M.L.

Reputation: 4706

Is there some native way to convert eventLink into button in Tapestry 5.2

My problem is simple. I want to use button as an event link.

There exists AJAX-based event link inside a form in tml. The event link has functionality that updates some parts of the form dynamically:

<t:eventlink t:event="editPlace" t:zone="dialogZone" class="jqModal place editPlace"
 t:context="placeId">${message:editPlace}</t:eventlink>

I would like that eventLink to be a button, something like this:

<t:eventButton t:event="editPlace" t:zone="dialogZone" class="jqModal place editPlace"
 t:context="placeId">${message:editPlace}</t:eventButton>

But naturally such thing does not exist. I think there are some 3rd party libraries to do it, but it feels kind of overkill.

I also tried to trick the eventLink to be triggered with javascript in following way:

<button type="button" onclick="jQuery(this).next('a').click();">
  ${message:editPlace}
</button>
<t:eventlink t:event="editPlace" t:zone="dialogZone" class="jqModal place editPlace" 
 t:context="placeId">${message:editPlace}</t:eventlink>

The anchor is correctly found but does not work. Are there any other options?

Edit: Made the question more clear.

Upvotes: 2

Views: 3175

Answers (2)

lance-java
lance-java

Reputation: 27996

You can just nest a button in the body of the eventlink.

<t:eventlink event="doIt"><button>Do it</button></t:eventlink>

Or you can use CSS to style the link to look like a button. For instance if you are using twitter-bootstrap's CSS you could do the following:

<t:eventlink event="doIt" class="btn btn-primary">Do it</t:eventlink>

Upvotes: 2

Henning
Henning

Reputation: 16311

If I understand you correctly, you want to update a zone from the click of a button. You won't need any customized components to do this, the usual Form, Submit and Zone components will do just fine.

Just create a form with the button in your template and set its zone parameter:

<div t:type="Zone" t:id="dialogZone" id="dialogZone" />

<form t:type="Form" t:id="myForm" t:zone="dialogZone" t:context="placeId">
    <input type="submit" t:type="Submit" value="Click me" />
</form>

And in your page class file, you set your event listener to listen to the form submission and return the zone's body:

@Inject
private Request request;

@InjectComponent
private Zone dialogZone;

@OnEvent(component="myForm", value=EventConstants.SUCCESS)
Object linkClicked(String placeId) {
    //your code here

    if (this.request.isXHR()) {
       return this.dialogZone.getBody();
    } else {
       return this;
    }
}

Ét voilà!

--Edit:

So, as that won't work inside another form, we'll try something else.

The problem with the click() is that it is not a native event and does not feed into Prototype's event pipeline. You could instead trigger the zone update manually, like this:

var actionLink = jQuery(this).next('a');
Tapestry.findZoneManager(actionLink).updateFromURL(actionLink.href);

Upvotes: 2

Related Questions