You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Kado <ju...@condortech.com.ar> on 2011/06/15 21:14:14 UTC
Confirm through colorbox.
Hi everybody,
I am trying to make a confirm using the jQuery plugin "colorbox".
The main problem is that when I click the modal is open for 2 seconds
and the page continues the natural flow.
This is the mixin and tml of the code that I am using:
_*This is the tml example:*_
<t:zone t:id="gridEndpointZone" id="gridEndpointZone" >
<t:actionLink t:id="deleteLink" context="X"
t:question="delete?" t:mixins="condorTapestryLib/ModalConfirm"
t:yesLabel="Yes,
delete" t:noLabel="No, don't delete"
t:zone="gridEndpointZone">
Delete
</t:actionLink>
</t:zone>
_*Java for the mixin:*_
@BeforeRenderTemplate
public void afterRenderTemplateLink() {
renderSupport.addScript(String.format("new
ModalConfirm('%s', '%s','%s', '%s', '%s');",
element.getClientId(), question, zoneId, yesLabel,
noLabel));
}
_*The javascript:*_
var ModalConfirm = Class.create();
ModalConfirm.prototype = {
initialize: function(element, question, zoneId, yesLabel,
noLabel) {
/* modalContainer is a div with the modal colorbox.
It is fullfilled with the parameters received in
the function (question, zoneId...)
*/
document.body.appendChild(modalContainer);
Event.observe($(element), 'click',
function(event){
Event.stop(event); // This is NOT
stopping anything.
jQuery.colorbox({
inline:"true",
href: "#modalDiv",
height:"300px",
width:"400px"
});
});
}
}
Thanks in advance to everybody!
Re: Confirm through colorbox.
Posted by françois facon <fr...@gmail.com>.
perhaps you can try to locate you element with jQuery and listen to
event with jquery shortcut.
jQuery('#'+element).click(function(e) {
e.preventDefault();
jQuery.colorbox({
inline:"true",
href: "#modalDiv",
height:"300px",
width:"400px"
});
});
François
2011/6/21 Kado <ju...@condortech.com.ar>:
> Thanks for the hint!
>
> I find it very useful at first sight but I am not able to use stack because
> I am using
> Tapestry 5.1.0.5 and It seems that I can't Import stack.
>
> Juan
>
> On 06/19/2011 12:23 PM, françois facon wrote:
>>
>> Hi Juan,
>>
>> Did you have a look at IOKO contribution?
>>
>> It is a nice example that provide also a mixin for dialog.
>>
>>
>> http://code.google.com/p/ioko-tapestry-commons/source/browse/trunk/tapestry-commons/tapestry-mixins/src/main/resources/uk/co/ioko/tapestry/mixins/mixins/overlay.js
>>
>> There is also Reveal mixin in tapestry-query provided by Emmanel Demey at
>>
>> https://github.com/got5/tapestry5-jquery/blob/master/src/main/resources/org/got5/tapestry5/jquery/assets/mixins/reveal/reveal.js
>> this one use jquery e.preventDefault(); to stop the event
>>
>>
>> François
>>
>>
>> 2011/6/15 Kado<ju...@condortech.com.ar>:
>>>
>>> Hi everybody,
>>>
>>> I am trying to make a confirm using the jQuery plugin "colorbox".
>>>
>>> The main problem is that when I click the modal is open for 2 seconds and
>>> the page continues the natural flow.
>>>
>>> This is the mixin and tml of the code that I am using:
>>>
>>>
>>> _*This is the tml example:*_
>>>
>>> <t:zone t:id="gridEndpointZone" id="gridEndpointZone">
>>> <t:actionLink t:id="deleteLink" context="X"
>>> t:question="delete?"
>>> t:mixins="condorTapestryLib/ModalConfirm"
>>> t:yesLabel="Yes,
>>> delete"
>>> t:noLabel="No, don't delete"
>>>
>>> t:zone="gridEndpointZone">
>>>
>>> Delete
>>> </t:actionLink>
>>> </t:zone>
>>>
>>>
>>> _*Java for the mixin:*_
>>>
>>> @BeforeRenderTemplate
>>> public void afterRenderTemplateLink() {
>>> renderSupport.addScript(String.format("new ModalConfirm('%s',
>>> '%s','%s', '%s', '%s');",
>>> element.getClientId(), question, zoneId, yesLabel,
>>> noLabel));
>>> }
>>>
>>>
>>>
>>> _*The javascript:*_
>>>
>>> var ModalConfirm = Class.create();
>>> ModalConfirm.prototype = {
>>> initialize: function(element, question, zoneId, yesLabel, noLabel)
>>> {
>>>
>>> /* modalContainer is a div with the modal colorbox.
>>> It is fullfilled with the parameters received in the
>>> function (question, zoneId...)
>>> */
>>>
>>> document.body.appendChild(modalContainer);
>>>
>>> Event.observe($(element), 'click',
>>> function(event){
>>> Event.stop(event); // This is NOT stopping
>>> anything.
>>> jQuery.colorbox({
>>> inline:"true",
>>> href: "#modalDiv",
>>> height:"300px",
>>> width:"400px"
>>> });
>>> });
>>> }
>>> }
>>>
>>>
>>>
>>>
>>> Thanks in advance to everybody!
>>>
>>>
>> ---------------------------------------------------------------------
>> 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
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Confirm through colorbox.
Posted by Kado <ju...@condortech.com.ar>.
Thanks for the hint!
I find it very useful at first sight but I am not able to use stack
because I am using
Tapestry 5.1.0.5 and It seems that I can't Import stack.
Juan
On 06/19/2011 12:23 PM, françois facon wrote:
> Hi Juan,
>
> Did you have a look at IOKO contribution?
>
> It is a nice example that provide also a mixin for dialog.
>
> http://code.google.com/p/ioko-tapestry-commons/source/browse/trunk/tapestry-commons/tapestry-mixins/src/main/resources/uk/co/ioko/tapestry/mixins/mixins/overlay.js
>
> There is also Reveal mixin in tapestry-query provided by Emmanel Demey at
> https://github.com/got5/tapestry5-jquery/blob/master/src/main/resources/org/got5/tapestry5/jquery/assets/mixins/reveal/reveal.js
> this one use jquery e.preventDefault(); to stop the event
>
>
> François
>
>
> 2011/6/15 Kado<ju...@condortech.com.ar>:
>> Hi everybody,
>>
>> I am trying to make a confirm using the jQuery plugin "colorbox".
>>
>> The main problem is that when I click the modal is open for 2 seconds and
>> the page continues the natural flow.
>>
>> This is the mixin and tml of the code that I am using:
>>
>>
>> _*This is the tml example:*_
>>
>> <t:zone t:id="gridEndpointZone" id="gridEndpointZone">
>> <t:actionLink t:id="deleteLink" context="X"
>> t:question="delete?"
>> t:mixins="condorTapestryLib/ModalConfirm"
>> t:yesLabel="Yes, delete"
>> t:noLabel="No, don't delete"
>>
>> t:zone="gridEndpointZone">
>>
>> Delete
>> </t:actionLink>
>> </t:zone>
>>
>>
>> _*Java for the mixin:*_
>>
>> @BeforeRenderTemplate
>> public void afterRenderTemplateLink() {
>> renderSupport.addScript(String.format("new ModalConfirm('%s',
>> '%s','%s', '%s', '%s');",
>> element.getClientId(), question, zoneId, yesLabel,
>> noLabel));
>> }
>>
>>
>>
>> _*The javascript:*_
>>
>> var ModalConfirm = Class.create();
>> ModalConfirm.prototype = {
>> initialize: function(element, question, zoneId, yesLabel, noLabel) {
>>
>> /* modalContainer is a div with the modal colorbox.
>> It is fullfilled with the parameters received in the
>> function (question, zoneId...)
>> */
>>
>> document.body.appendChild(modalContainer);
>>
>> Event.observe($(element), 'click',
>> function(event){
>> Event.stop(event); // This is NOT stopping
>> anything.
>> jQuery.colorbox({
>> inline:"true",
>> href: "#modalDiv",
>> height:"300px",
>> width:"400px"
>> });
>> });
>> }
>> }
>>
>>
>>
>>
>> Thanks in advance to everybody!
>>
>>
> ---------------------------------------------------------------------
> 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: Confirm through colorbox.
Posted by françois facon <fr...@gmail.com>.
Hi Juan,
Did you have a look at IOKO contribution?
It is a nice example that provide also a mixin for dialog.
http://code.google.com/p/ioko-tapestry-commons/source/browse/trunk/tapestry-commons/tapestry-mixins/src/main/resources/uk/co/ioko/tapestry/mixins/mixins/overlay.js
There is also Reveal mixin in tapestry-query provided by Emmanel Demey at
https://github.com/got5/tapestry5-jquery/blob/master/src/main/resources/org/got5/tapestry5/jquery/assets/mixins/reveal/reveal.js
this one use jquery e.preventDefault(); to stop the event
François
2011/6/15 Kado <ju...@condortech.com.ar>:
> Hi everybody,
>
> I am trying to make a confirm using the jQuery plugin "colorbox".
>
> The main problem is that when I click the modal is open for 2 seconds and
> the page continues the natural flow.
>
> This is the mixin and tml of the code that I am using:
>
>
> _*This is the tml example:*_
>
> <t:zone t:id="gridEndpointZone" id="gridEndpointZone" >
> <t:actionLink t:id="deleteLink" context="X"
> t:question="delete?"
> t:mixins="condorTapestryLib/ModalConfirm"
> t:yesLabel="Yes, delete"
> t:noLabel="No, don't delete"
>
> t:zone="gridEndpointZone">
>
> Delete
> </t:actionLink>
> </t:zone>
>
>
> _*Java for the mixin:*_
>
> @BeforeRenderTemplate
> public void afterRenderTemplateLink() {
> renderSupport.addScript(String.format("new ModalConfirm('%s',
> '%s','%s', '%s', '%s');",
> element.getClientId(), question, zoneId, yesLabel,
> noLabel));
> }
>
>
>
> _*The javascript:*_
>
> var ModalConfirm = Class.create();
> ModalConfirm.prototype = {
> initialize: function(element, question, zoneId, yesLabel, noLabel) {
>
> /* modalContainer is a div with the modal colorbox.
> It is fullfilled with the parameters received in the
> function (question, zoneId...)
> */
>
> document.body.appendChild(modalContainer);
>
> Event.observe($(element), 'click',
> function(event){
> Event.stop(event); // This is NOT stopping
> anything.
> jQuery.colorbox({
> inline:"true",
> href: "#modalDiv",
> height:"300px",
> width:"400px"
> });
> });
> }
> }
>
>
>
>
> Thanks in advance to everybody!
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org