Hello everyone
I'm not going to write any question today :)
I'm just posting solution for this problem.
There is typical use case, when you want something to happen and to not
click on submit button. Or even to do something and not to see submit
button.
I had a problem with implementing rating component, use case was when user
click on one of stars to submit result to server and display new calculated
rating for that particular page/item that is shown.
So I started coding, I was thinking about form with hidden submit button and
all of crazy AJAX stuff that I need to do.
But I found very interesting solution. I did not use any hidden submit
button at all.
Here is how all is going
first in tml you have something like this.
<div class="starContainer">
>
> <form t:type="form" t:id="rateForm">
>
> <t:radiogroup t:id="vote">
>
> <t:radio t:id="oneStar" class="star"
>> value="oneStar"/>
>
> <t:radio t:id="twoStars" class="star"
>> value="twoStars"/>
>
> <t:radio t:id="threeStars" class="star"
>> value="threeStars"/>
>
> <t:radio t:id="fourStars" class="star"
>> value="fourStars"/>
>
> <t:radio t:id="fiveStars" class="star"
>> value="fiveStars"/>
>
> </t:radiogroup>
>
> </form>
>
> </div>
>
>
radio buttons are used to chose rating, here is example for 5 stars system.
Of course some fancy java script will create stars from them. And there is
so many so choose one :)
Now I want to do something here, so i created onFormSubmit method so I can
submit all this with submit button component. and here goes code for it.
@OnEvent(value = "submit", component = "rateForm")
void onFormSubmit() {
some back end code to apply ratings...
}
Now you have onFormSubmit that is fired when you submit a form.
And after 2 tons of code and trying with hidden submit buttons and all other
thing, this was enough.
I simply added javasript at beging of form (PS i wrote a component so i put
it there, you can put it anywhere :) )
<script>
jQuery(document).ready(function(){
jQuery(".star").click(function(){
this.form = $(rateForm);
this.form.submit();
});
});
</script>
So I'm basicly added listener that waits for click on one of radio buttons,
and call submit on rateForm.
Of course you need to add jQuery library, but this is also possible with
prototype but I'm more familiar with jQuery...
If you want to add jQuery in your application there is great way to do this:
http://tapestry.formos.com/nightly/ioko-tapestry-commons/tapestry-jquery/
If someone know how to do this in prototype, be my guest and add code :)
That is all for today:)
I hope that this code help somebody :)
--
Bojan Ćinćur
email blueb...@gmail.com
Skype bojan.cincur
