You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by JulianS <js...@yahoo.com> on 2008/02/14 19:28:14 UTC
Overlay div on ajax call
I am trying to overlay a mask div during an ajax call but there is obviously
something I don't understand. I would appreciate any advice.
If I do the following in my ajax button subclass, the mask gets displayed
but never hidden. The order of the script parameter versus my style string
makes no difference:
@Override
protected IAjaxCallDecorator getAjaxCallDecorator()
{
return new IAjaxCallDecorator()
{
public CharSequence decorateScript(CharSequence script)
{
return
"document.getElementById('progressmask').style.zIndex='2';"+script;
}
public CharSequence decorateOnFailureScript(CharSequence script)
{
return
script+"document.getElementById('progressmask').style.zIndex='-1';";
}
public CharSequence decorateOnSuccessScript(CharSequence script)
{
return
script+"document.getElementById('progressmask').style.zIndex='-1';";
}
};
}
If I do the following, the mask is never displayed because all the
processing happens before the ajax targets are updated:
Page constructor:
bodyContainer.add(progressMask = new WebMarkupContainer("progressmask"));
progressMask.setOutputMarkupId(true);
progressMask.add(new AttributeModifier("class", new PropertyModel(this,
"progressMaskClass")));
Where progressMaskClass sets the CSS class to one that contains either
"z-index:2" or "z-index:-1".
My ajax button calls this method in the page class at the start of its
onSubmit:
public void showProgress(AjaxRequestTarget target)
{
progressMaskClass = "progressMaskVisible";
target.addComponent(progressMask);
}
My ajax button calls this method in the page class at the end of its
onSubmit:
public void closeProgress(AjaxRequestTarget target)
{
progressMaskClass = "progressMaskHidden";
target.addComponent(progressMask);
}
What am I doing wrong?
Thanks,
Julian
--
View this message in context: http://www.nabble.com/Overlay-div-on-ajax-call-tp15485027p15485027.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by JulianS <js...@yahoo.com>.
Finally, I've posted my solution which suits my purpose very well:
http://javathoughts.capesugarbird.com/2008/03/ajax-button-with-overlay-div-and-wait.html
Julian
JulianS wrote:
>
>
> Martijn Dashorst wrote:
>>
>> See wicketstuff-minis' veil
>>
>> Martijn
>>
> Thanks for the suggestion. I've tried it, and it works fine when you are
> trying to veil a component in response to an action, then unveil it in
> response to another, However, if I try to enable the veil at the start of
> an ajax submit, then disable it at the end, the mask is never displayed
> because all the processing happens before the ajax targets are updated. I
> have a feeling that this could be fixed by having VeilResources extend
> AbstractAjaxBehavior instead of AbstractBehavior but I don't know how to
> do it.
>
> Julian
>
>
>
--
View this message in context: http://www.nabble.com/Overlay-div-on-ajax-call-tp15485027p16162947.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by Jason Anderson <jl...@gmail.com>.
you might take a look at how IndicatingAjaxLink/Button show/hide the
ajax loading indicator or just use it to show your hidden veil during
an ajax operation
On Thu, Feb 14, 2008 at 1:43 PM, JulianS <js...@yahoo.com> wrote:
>
>
> Martijn Dashorst wrote:
> >
> > See wicketstuff-minis' veil
> >
> > Martijn
> >
> Thanks for the suggestion. I've tried it, and it works fine when you are
> trying to veil a component in response to an action, then unveil it in
> response to another, However, if I try to enable the veil at the start of an
> ajax submit, then disable it at the end, the mask is never displayed because
> all the processing happens before the ajax targets are updated. I have a
> feeling that this could be fixed by having VeilResources extend
> AbstractAjaxBehavior instead of AbstractBehavior but I don't know how to do
> it.
>
> Julian
>
>
> --
> View this message in context: http://www.nabble.com/Overlay-div-on-ajax-call-tp15485027p15489970.html
>
>
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by JulianS <js...@yahoo.com>.
Martijn Dashorst wrote:
>
> See wicketstuff-minis' veil
>
> Martijn
>
Thanks for the suggestion. I've tried it, and it works fine when you are
trying to veil a component in response to an action, then unveil it in
response to another, However, if I try to enable the veil at the start of an
ajax submit, then disable it at the end, the mask is never displayed because
all the processing happens before the ajax targets are updated. I have a
feeling that this could be fixed by having VeilResources extend
AbstractAjaxBehavior instead of AbstractBehavior but I don't know how to do
it.
Julian
--
View this message in context: http://www.nabble.com/Overlay-div-on-ajax-call-tp15485027p15489970.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by Martijn Dashorst <ma...@gmail.com>.
See wicketstuff-minis' veil
Martijn
On 2/14/08, JulianS <js...@yahoo.com> wrote:
>
> I am trying to overlay a mask div during an ajax call but there is obviously
> something I don't understand. I would appreciate any advice.
>
> If I do the following in my ajax button subclass, the mask gets displayed
> but never hidden. The order of the script parameter versus my style string
> makes no difference:
>
> @Override
> protected IAjaxCallDecorator getAjaxCallDecorator()
> {
> return new IAjaxCallDecorator()
> {
> public CharSequence decorateScript(CharSequence script)
> {
> return
> "document.getElementById('progressmask').style.zIndex='2';"+script;
> }
> public CharSequence decorateOnFailureScript(CharSequence script)
> {
> return
> script+"document.getElementById('progressmask').style.zIndex='-1';";
> }
> public CharSequence decorateOnSuccessScript(CharSequence script)
> {
> return
> script+"document.getElementById('progressmask').style.zIndex='-1';";
> }
> };
> }
>
> If I do the following, the mask is never displayed because all the
> processing happens before the ajax targets are updated:
>
> Page constructor:
>
> bodyContainer.add(progressMask = new WebMarkupContainer("progressmask"));
> progressMask.setOutputMarkupId(true);
> progressMask.add(new AttributeModifier("class", new PropertyModel(this,
> "progressMaskClass")));
>
> Where progressMaskClass sets the CSS class to one that contains either
> "z-index:2" or "z-index:-1".
>
> My ajax button calls this method in the page class at the start of its
> onSubmit:
>
> public void showProgress(AjaxRequestTarget target)
> {
> progressMaskClass = "progressMaskVisible";
> target.addComponent(progressMask);
> }
>
> My ajax button calls this method in the page class at the end of its
> onSubmit:
>
> public void closeProgress(AjaxRequestTarget target)
> {
> progressMaskClass = "progressMaskHidden";
> target.addComponent(progressMask);
> }
>
> What am I doing wrong?
> Thanks,
> Julian
>
>
> --
> View this message in context: http://www.nabble.com/Overlay-div-on-ajax-call-tp15485027p15485027.html
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
Buy Wicket in Action: http://manning.com/dashorst
Apache Wicket 1.3.1 is released
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.3.1
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by Timo Rantalaiho <Ti...@ri.fi>.
On Thu, 14 Feb 2008, JulianS wrote:
> If you have an example you can share I'd appreciate it.
Sorry, I don't have a practical example to share just now,
but it was nearly basic IAjaxIndicatorAware usage, just
check that out.
I think that maybe after the place of the indicator in HTML
we sometimes put
<script>wicketShow('ajaxIndicatorsId');</script>
because sometimes the overlay was otherwise shown by default,
but that was that.
Best wishes,
Timo
--
Timo Rantalaiho
Reaktor Innovations Oy <URL: http://www.ri.fi/ >
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by JulianS <js...@yahoo.com>.
Timo Rantalaiho wrote:
>
> We've done it a bit differently -- all styling (including
> the high z-index) in CSS, and just the visibility control
> by IAjaxIndicatorAware.
>
Hi Timo
If you have an example you can share I'd appreciate it.
Julian
--
View this message in context: http://www.nabble.com/Overlay-div-on-ajax-call-tp15485027p15488665.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Overlay div on ajax call
Posted by Timo Rantalaiho <Ti...@ri.fi>.
On Thu, 14 Feb 2008, JulianS wrote:
> I am trying to overlay a mask div during an ajax call but there is obviously
> something I don't understand. I would appreciate any advice.
We've done it a bit differently -- all styling (including
the high z-index) in CSS, and just the visibility control
by IAjaxIndicatorAware.
Best wishes,
Timo
--
Timo Rantalaiho
Reaktor Innovations Oy <URL: http://www.ri.fi/ >
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org