You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Asma Merchant <am...@renau.com> on 2013/10/29 19:37:30 UTC
Pass Context Info to Bootstrap Modal
Hi,
I have a set of radio buttons. On clicking a radio button a confirm message
is shown. If user selects yes then event is fired, otherwise nothing
happens. I have made an event that is to be called on confirm modal. What I
can't figure out is how to pass the radio button id or data-id to this event
handler. Here is some code:
<t:radiogroup t:id="pulseMode">
<input t:type="radio" t:id="Off" href="#pulseChangeModal"
data-toggle="modal" data-id="PulseMode.Off" />
<input t:type="radio" t:id="A" href="#pulseChangeModal" data-toggle="modal"
data-id="PulseMode.A" />
<input t:type="radio" t:id="B" href="#pulseChangeModal" data-toggle="modal"
data-id="PulseMode.B" />
.
.
.
</t:radiogroup>
<div id="pulseChangeModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button> </div>
<div class="modal-body"> </div>
<div class="modal-footer">
<a id="yesButton" t:type="web/eventlinkex"
t:event="changePulseMode" href="#" t:context="Pass clicked radio button's id
here" class="btn btn-primary" >${message:yes }</a>
<a href="#" class="btn" data-dismiss="modal">${message:no
}</a>
</div>
</div>
Regards,
AM
Re: Pass Context Info to Bootstrap Modal
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Tue, 29 Oct 2013 16:37:30 -0200, Asma Merchant <am...@renau.com>
wrote:
> Hi,
Hi!
> <a id="yesButton" t:type="web/eventlinkex"
> t:event="changePulseMode" href="#" t:context="Pass clicked radio
> button's id
> here" class="btn btn-primary" >${message:yes }</a>
Just do t:context="literal:whatever you want". In this case, the button id
is very probably static, so you can pass it directly. By the way, this is
valid for EventLink and ActionLink and I have no idea what's this
web/eventlinkex component you're using.
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Pass Context Info to Bootstrap Modal
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Thu, 31 Oct 2013 15:42:35 -0200, Asma Merchant <am...@renau.com>
wrote:
> Hi Thiago,
Hi!
> jQuery(document).ready( function(){
>
> Query(document).on("click", ".pulseMode", function () {
>
> var radioId = jQuery(this).data('id');
>
> jQuery(".modal-footer #yesButton").attr("href", '?id=' + radioId);
This is overwriting the href attribute. You should have been adding '?id='
+ radioId to the URL which already existed there, not replacing it by
'?id=' + radioId. Do what the thread I linked said: use
ComponentResources.createEventLink() and etc. That's the right way to do
it.
> jQuery(document).ready( function(){
>
> Query(document).on("click", ".pulseMode", function () {
>
> var radioId = jQuery(this).data('id');
>
> jQuery(".modal-footer #yesButton").attr("t:parameters",
> '{prop:\'id\':'+ radioId +'\'}');
That's very wrong.
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Pass Context Info to Bootstrap Modal
Posted by Asma Merchant <am...@renau.com>.
Hi Thiago,
I appreciate your consistent help!
So here's the first piece of code based on your recommendation of adding id
to link's href attribute(Please see comments for errors):
jQuery(document).ready( function(){
Query(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id');
jQuery(".modal-footer #yesButton").attr("href", '?id=' + radioId);
//takes you to same page with id=PulseMode.A added at the end of link
//but doesn't call the event onChangePulse()
});
});
I tried with adding t:parameters to yesButton's link but got the following
runtime exception:
jQuery(document).ready( function(){
Query(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id');
jQuery(".modal-footer #yesButton").attr("t:parameters",
'{prop:\'id\':'+ radioId +'\'}');
//throws the following exception
// org.apache.tapestry5.runtime.ComponentEventException
//Unable process query parameter 'id' as parameter #1 of event handler
method XXX.onChangePulseMode(java.lang.String): The value for query
parameter 'id' was blank, but a non-blank value is needed.
//context
//eventType
//changepulsemode
});
});
So I am still stuck without solution!
RE: Pass Context Info to Bootstrap Modal
Posted by Asma Merchant <am...@renau.com>.
Hi Thiago,
Thanks for all your help! I'd like to post a complete solution so if anyone
else gets stuck in the future then he doesn't have to struggle since there
are not enough tapestry examples:
//tml
<t:radiogroup t:id="pulseMode">
<label t:type="label" class="radio inline"
for="modeOFF" >
<input t:type="radio" t:id="modeOff"
data-id="OFF" class="pulseMode" />
${message:modeOff}
</label>
<label t:type="label" class="radio inline"
for="modeA" >
<input t:type="radio" t:id="modeA"
data-id="A" class="pulseMode" />
${message:modeA}
</label>
.
.
.
</t:radiogroup>
//JavaScript
jQuery(document).ready( function(){
var radioId;
jQuery(document).on("click", ".pulseMode", function () {
radioId = jQuery(this).data('id');
jQuery('#pulseChangeModal').modal('show');
});
jQuery('#yesButton').click(function() {
jQuery(".modal-footer
#yesButton").attr("href", window.changePulseMode +'?id=' + radioId);
});
});
//Java
public void afterRender() {
String url =
componentResources.createEventLink("changePulseMode").toAbsoluteURI();
javaScriptSupport.addScript("window.changePulseMode = '%s';", url);
}
//Note:
window.location = window.changePulseMode + '?id=' + radioId;
&
jQuery.ajax({
url: window.changePulseMode + '?id=' + radioId ,
async: false
});
Both throw: org.apache.tapestry5.runtime.ComponentEventException
Unable process query parameter 'id' as parameter #1 of event handler method
pl.sns.renau.client.pages.BrewSettingsPart.onChangePulseMode(java.lang.Strin
g): The value for query parameter 'id' was blank, but a non-blank value is
needed.
Re: Pass Context Info to Bootstrap Modal
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Thu, 31 Oct 2013 18:39:57 -0200, Asma Merchant <am...@renau.com>
wrote:
> I think I am getting close. But what should I put in the blanks? I don't
> want to create a separate .js file
You know that's the best practice, right? ;)
> and instantiate class.
Not needed.
> Is there any short cut?
Nope.
Java
public void afterRender() {
String url =
componentResources.createEventLink("changePulseMode").toAbsoluteURI();
javaScriptSupport.addScript("window.changePulseMode = '%';", url);
}
Supposing you don't want an AJAX request:
//Javascript
jQuery(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id'); // shouldn't this be
getAttribute()?
window.location = window.changePulseMode + '?id=' = radioId;
}
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Pass Context Info to Bootstrap Modal
Posted by Asma Merchant <am...@renau.com>.
I think I am getting close. But what should I put in the blanks? I don't
want to create a separate .js file and instantiate class. Is there any short
cut?
//Java
public void afterRender() {
String urI =
componentResources.createEventLink("changePulseMode").toAbsoluteURI();
javaScriptSupport.addScript("???", url);
}
//Javascript
jQuery(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id');
var link = jQuery('yesButton');
link.href = ? + '?id=' + radioId;
RE: Pass Context Info to Bootstrap Modal
Posted by Asma Merchant <am...@renau.com>.
I think I am getting close. But what should I put in the blanks? I don't
want to create a separate .js file and instantiate class. Is there any short
cut?
//Java
public void afterRender() {
String urI =
componentResources.createEventLink("changePulseMode").toAbsoluteURI();
javaScriptSupport.addScript("???", url);
}
//Javascript
jQuery(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id');
var link = jQuery('yesButton');
link.href = ? + '?id=' + radioId;
});
Re: Pass Context Info to Bootstrap Modal
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Wed, 30 Oct 2013 21:30:00 -0200, Asma Merchant <am...@renau.com>
wrote:
> I am a newbie in Tapestry. I tried to search on web on how to pass
> parameters from javascript to tapestry but couldn't find much
> information.
In my very humble opinion, passing dynamic (i.e. defined in JavaScript)
data to Tapestry is better left to query parameters instead of the context
due to the way Tapestry encodes stuff in URLs.
> Here's my Javascript code:
>
> jQuery(document).ready( function(){
>
> jQuery(document).on("click", ".pulseMode", function () {
>
> var radioId = jQuery(this).data('id'); //I can get my button's id here
>
> //how do I pass it to tapestry?
>
> });
I'd try that, not tested:
jQuery(document).ready( function(){
jQuery(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id'); //I can get my button's id here
var link = jQuery('yesButton');
link.href = ...;// code to remove everything after the '?' from
link.href, if it's there, and add
// '?id=' + radioId.
});
Then, on the Java side:
XXX onChangePulseMode(@RequestParameter("id") String id) {
...
}
That's an specific solution to your problem. The general solution for the
"pass information from JS to Tapestry via AJAX". See this thread:
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/dynamically-changing-event-link-context-on-client-side-using-js-td4268096.html.
I can provide another better example if you want, but I need to leave my
computer right now. :)
>
>
> Here's the modal's yes button code:
>
> <div class="modal-footer">
>
> <a id="yesButton" t:type="web/eventlinkex" t:event="changePulseMode"
> href="#" class="btn btn-primary" t:parameters="prop:{'mode':'?'}"
>> ${message:yes }</a>
>
> <a href="#" class="btn" data-dismiss="modal">${message:no }</a>
>
> </div>
>
>
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Pass Context Info to Bootstrap Modal
Posted by Asma Merchant <am...@renau.com>.
I am a newbie in Tapestry. I tried to search on web on how to pass
parameters from javascript to tapestry but couldn't find much information.
Here's my Javascript code:
jQuery(document).ready( function(){
jQuery(document).on("click", ".pulseMode", function () {
var radioId = jQuery(this).data('id'); //I can get my button's id here
//how do I pass it to tapestry?
});
Here's the modal's yes button code:
<div class="modal-footer">
<a id="yesButton" t:type="web/eventlinkex" t:event="changePulseMode"
href="#" class="btn btn-primary" t:parameters="prop:{'mode':'?'}"
>${message:yes }</a>
<a href="#" class="btn" data-dismiss="modal">${message:no }</a>
</div>
Re: Pass Context Info to Bootstrap Modal
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
So the best way of dealing with passing information in this case is to not
use the activation context, but adding a query parameter with the radio
button id to the EventLink URL using JavaScript.
On Wed, 30 Oct 2013 13:49:01 -0200, Asma Merchant <am...@renau.com>
wrote:
>>> How do you generate the radio buttons?
>
> The buttons are already present on the page i.e. they are static.
>
>
> //Code to generate radio buttons:
>
> <t:radiogroup t:id="pulseMode">
>
>
> <input t:type="radio" t:id="Off" href="#pulseChangeModal"
> data-toggle="modal" data-id="PulseMode.Off" />
>
> <input t:type="radio" t:id="A" href="#pulseChangeModal"
> data-toggle="modal"
> data-id="PulseMode.A" />
>
> <input t:type="radio" t:id="B" href="#pulseChangeModal"
> data-toggle="modal"
> data-id="PulseMode.B" />
>
> .
>
> .
>
> .
>
> </t:radiogroup>
>
>
> //Modal Code:
>
> <div id="pulseChangeModal" class="modal hide fade">
>
> <div class="modal-header">
>
> <button type="button" class="close" data-dismiss="modal"></button> </div>
>
>
> <div class="modal-body"> </div>
>
> <div class="modal-footer">
>
> <a id="yesButton" t:type="web/eventlinkex"
> t:event="changePulseMode" href="#" t:context="Pass clicked radio
> button's id
> here" class="btn btn-primary" >${message:yes }</a>
>
> <a href="#" class="btn" data-dismiss="modal">${message:no }</a>
>
> </div>
>
> </div>
>
>
>
>
> From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List
> Archives] [mailto:ml-node+s1045711n5724385h24@n5.nabble.com]
> Sent: Tuesday, October 29, 2013 5:18 PM
> To: am
> Subject: Re: Pass Context Info to Bootstrap Modal
>
>
> On Tue, 29 Oct 2013 19:55:20 -0200, Asma Merchant <[hidden email]>
> wrote:
>
>> Hi Thiago,
>
> Hi!
>
>
>> Thanks for your response.
>>>> "t:context="literal:whatever you want"
>>
>> I still don't understand how to grab the id of radio button that was
>> clicked. Let me be more clear: There's a set of 11 radio buttons each
>> with a different id. All radio buttons call same confirm message. If
>> user clicks
>> yes then the value of the button that invoked the dialog should be
>> passed to
>> the event so appropriate action can be taken.
>
>
> How do you generate the radio buttons?
>
>>>> "In this case, the button id is very probably static, so you can pass
>
>>>> it
>> directly."
>>
>> Yes, the button is static, but which button id to pass is dynamic.
>
> I'm sorry, I meant radio id, not button id.
>
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Pass Context Info to Bootstrap Modal
Posted by Asma Merchant <am...@renau.com>.
>>How do you generate the radio buttons?
The buttons are already present on the page i.e. they are static.
//Code to generate radio buttons:
<t:radiogroup t:id="pulseMode">
<input t:type="radio" t:id="Off" href="#pulseChangeModal"
data-toggle="modal" data-id="PulseMode.Off" />
<input t:type="radio" t:id="A" href="#pulseChangeModal" data-toggle="modal"
data-id="PulseMode.A" />
<input t:type="radio" t:id="B" href="#pulseChangeModal" data-toggle="modal"
data-id="PulseMode.B" />
.
.
.
</t:radiogroup>
//Modal Code:
<div id="pulseChangeModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button> </div>
<div class="modal-body"> </div>
<div class="modal-footer">
<a id="yesButton" t:type="web/eventlinkex"
t:event="changePulseMode" href="#" t:context="Pass clicked radio button's id
here" class="btn btn-primary" >${message:yes }</a>
<a href="#" class="btn" data-dismiss="modal">${message:no }</a>
</div>
</div>
From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List
Archives] [mailto:ml-node+s1045711n5724385h24@n5.nabble.com]
Sent: Tuesday, October 29, 2013 5:18 PM
To: am
Subject: Re: Pass Context Info to Bootstrap Modal
On Tue, 29 Oct 2013 19:55:20 -0200, Asma Merchant <[hidden email]>
wrote:
> Hi Thiago,
Hi!
> Thanks for your response.
>>> "t:context="literal:whatever you want"
>
> I still don't understand how to grab the id of radio button that was
> clicked. Let me be more clear: There's a set of 11 radio buttons each
> with a different id. All radio buttons call same confirm message. If
> user clicks
> yes then the value of the button that invoked the dialog should be
> passed to
> the event so appropriate action can be taken.
How do you generate the radio buttons?
>>> "In this case, the button id is very probably static, so you can pass
>>> it
> directly."
>
> Yes, the button is static, but which button id to pass is dynamic.
I'm sorry, I meant radio id, not button id.
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
_____
If you reply to this email, your message will be added to the discussion
below:
<http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/Pass-Con
text-Info-to-Bootstrap-Modal-tp5724376p5724385.html>
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/Pass-Cont
ext-Info-to-Bootstrap-Modal-tp5724376p5724385.html
To unsubscribe from Pass Context Info to Bootstrap Modal,
<http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/template
/NamlServlet.jtp?macro=unsubscribe_by_code&node=5724376&code=YW1lcmNoYW50QHJ
lbmF1LmNvbXw1NzI0Mzc2fDExMTgzNjAxNDU=> click here.
<http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/template
/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&ba
se=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleName
space-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%
21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_emai
l%21nabble%3Aemail.naml> NAML