You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Andrew Geery <an...@gmail.com> on 2012/08/10 18:54:43 UTC

issue refreshing covered panel when modalwindow is open

I've run into this issue a couple of times and worked around it, but I
wanted to see if there is a better way of handling it.

I have a form in a panel in a ModalWindow on top of a datatable in a page.
 When a user clicks the Save ajax button in the modal window, a done event
is bubbled up from the modal window.  The event contains the
AjaxRequestTarget from the button.

There are two components that listen for the done event:

(1) the component that launched the ModalWindow -- this listener closes the
modal window
(2) a component farther up the hierarchy which contains (1) -- this
listener (re) adds the datatable on the page

I have verified that both listeners are being called and that they are
called in the order above.  However, the datatable does not get refreshed
in the browser.

My question is: why didn't my datatable get re-rendered, even though I did
(re) add it to the containing panel?  I think this has something to do with
the datatable not realizing it is visible/active.  Or it may have something
to do with the event system :).  Or perhaps even the AjaxRequestTarget from
the panel in the modal window :).  I'm happy to put in some break points
and walk through the code if you anyone has ideas of where to look.

The workaround is to have (1) listen for the event and stop the event
propagation.  Then, in the ModalWindow.setWindowClosedCallback(), send the
event up to (2).  Doing this, the datatable does get properly refreshed.

My followup question is: is this the pattern that should be followed when
refreshing a panel under a modal window?  Namely, don't try to refresh the
page/panel a ModalWindow is on top of until the covering ModalWindow has
closed?

Thanks
Andrew

Re: issue refreshing covered panel when modalwindow is open

Posted by Andrew Geery <an...@gmail.com>.
Thanks for the answer, David.  I do use the technique you use below and it
works well.  However, in your situation, I think you're updating active
content.  In my situation, I have a modal window which is active.  When a
button on the modal window is clicked, the modal window calls the send(...)
method to dispatch an event.  A parent of the modal listens for the event
and closes the modal window.  A grandparent of the modal also listens for
the event and re(adds) the panel the modal window is covering up.  I have
verified that the event handler in both the parent and the grandparent are
being called (parent first and then grandparent).  The modal window is
closed, but the "covered over" panel is not re-added.  I believe this has
something to do with how Wicket knows whether a component is active
because, if I have the parent panel dispatch an event to the grandparent
panel in the  setWindowClosedCallback method, everything works as expected.

The question is: is there something in Wicket that keeps track of which
components are active and only updates those it believes are active?  The
issue here seems to be that the closing of the modal window and the
updating of the content happen in the same request cycle...

Thanks
Andrew

On Mon, Aug 13, 2012 at 7:09 AM, David JavaDeveloper <
javadeveloper.david@gmail.com> wrote:

> Try to use the "replaceWith" method on the dataTable component.
>
> I'm attaching a piece of code where we use this method in (*another *but
> similiar) situation where we need to replace the content of a modal window
> when the selected line (of dataTable) is changed:
>
> add(new AjaxLink<Campaign>("details")
>             {
>                 /**
>                  *
>                  */
>                 private static final long serialVersionUID = 1L;
>
>                 @Override
>                 public void onClick(AjaxRequestTarget target) {
>                     selectedLine =
> (Campaign)getParent().getDefaultModelObject();
>
>                     ZoomCampaign tempZoomCampaign = new
> ZoomCampaign("zoomCampaign", new PropertyModel<Campaign>(myModel,
> "selectedLine"));
>                     zoomCampaign.replaceWith(tempZoomCampaign);
>                     zoomCampaign = tempZoomCampaign;
>
>                     target.add(zoomCampaign);
>                     zoomCampaign.show(target);
>
>                 }
>             });
>
> On Fri, Aug 10, 2012 at 7:54 PM, Andrew Geery <andrew.geery@gmail.com
> >wrote:
>
> > I've run into this issue a couple of times and worked around it, but I
> > wanted to see if there is a better way of handling it.
> >
> > I have a form in a panel in a ModalWindow on top of a datatable in a
> page.
> >  When a user clicks the Save ajax button in the modal window, a done
> event
> > is bubbled up from the modal window.  The event contains the
> > AjaxRequestTarget from the button.
> >
> > There are two components that listen for the done event:
> >
> > (1) the component that launched the ModalWindow -- this listener closes
> the
> > modal window
> > (2) a component farther up the hierarchy which contains (1) -- this
> > listener (re) adds the datatable on the page
> >
> > I have verified that both listeners are being called and that they are
> > called in the order above.  However, the datatable does not get refreshed
> > in the browser.
> >
> > My question is: why didn't my datatable get re-rendered, even though I
> did
> > (re) add it to the containing panel?  I think this has something to do
> with
> > the datatable not realizing it is visible/active.  Or it may have
> something
> > to do with the event system :).  Or perhaps even the AjaxRequestTarget
> from
> > the panel in the modal window :).  I'm happy to put in some break points
> > and walk through the code if you anyone has ideas of where to look.
> >
> > The workaround is to have (1) listen for the event and stop the event
> > propagation.  Then, in the ModalWindow.setWindowClosedCallback(), send
> the
> > event up to (2).  Doing this, the datatable does get properly refreshed.
> >
> > My followup question is: is this the pattern that should be followed when
> > refreshing a panel under a modal window?  Namely, don't try to refresh
> the
> > page/panel a ModalWindow is on top of until the covering ModalWindow has
> > closed?
> >
> > Thanks
> > Andrew
> >
>

Re: issue refreshing covered panel when modalwindow is open

Posted by David JavaDeveloper <ja...@gmail.com>.
Try to use the "replaceWith" method on the dataTable component.

I'm attaching a piece of code where we use this method in (*another *but
similiar) situation where we need to replace the content of a modal window
when the selected line (of dataTable) is changed:

add(new AjaxLink<Campaign>("details")
            {
                /**
                 *
                 */
                private static final long serialVersionUID = 1L;

                @Override
                public void onClick(AjaxRequestTarget target) {
                    selectedLine =
(Campaign)getParent().getDefaultModelObject();

                    ZoomCampaign tempZoomCampaign = new
ZoomCampaign("zoomCampaign", new PropertyModel<Campaign>(myModel,
"selectedLine"));
                    zoomCampaign.replaceWith(tempZoomCampaign);
                    zoomCampaign = tempZoomCampaign;

                    target.add(zoomCampaign);
                    zoomCampaign.show(target);

                }
            });

On Fri, Aug 10, 2012 at 7:54 PM, Andrew Geery <an...@gmail.com>wrote:

> I've run into this issue a couple of times and worked around it, but I
> wanted to see if there is a better way of handling it.
>
> I have a form in a panel in a ModalWindow on top of a datatable in a page.
>  When a user clicks the Save ajax button in the modal window, a done event
> is bubbled up from the modal window.  The event contains the
> AjaxRequestTarget from the button.
>
> There are two components that listen for the done event:
>
> (1) the component that launched the ModalWindow -- this listener closes the
> modal window
> (2) a component farther up the hierarchy which contains (1) -- this
> listener (re) adds the datatable on the page
>
> I have verified that both listeners are being called and that they are
> called in the order above.  However, the datatable does not get refreshed
> in the browser.
>
> My question is: why didn't my datatable get re-rendered, even though I did
> (re) add it to the containing panel?  I think this has something to do with
> the datatable not realizing it is visible/active.  Or it may have something
> to do with the event system :).  Or perhaps even the AjaxRequestTarget from
> the panel in the modal window :).  I'm happy to put in some break points
> and walk through the code if you anyone has ideas of where to look.
>
> The workaround is to have (1) listen for the event and stop the event
> propagation.  Then, in the ModalWindow.setWindowClosedCallback(), send the
> event up to (2).  Doing this, the datatable does get properly refreshed.
>
> My followup question is: is this the pattern that should be followed when
> refreshing a panel under a modal window?  Namely, don't try to refresh the
> page/panel a ModalWindow is on top of until the covering ModalWindow has
> closed?
>
> Thanks
> Andrew
>