closing a javascript window via a form that uses ajax/zone

[Nathan Kopp <na...@gmail.com>]

I have a page that uses ChenilleKit to pop up a window that contains a
component.  That component contains a form enclosed in a zone.  The form get
submitted under a variety of circumstances primarily for the purpose of
storing the state and redrawing the form based on some option the user just
selected.  This all works great.  However, once the user has finally
finished everything, I'd like for the final submit button to do something
else other than just update the zone.  I want it to cause the window to
close and for another zone on the page, outside of the window, to be
updated.  And I need to make it close the ChenilleKit window.  I haven't
figured out how to make this happen yet.

I think I figured out that I can pass a zone from the page to the inner
component (which has the form) and then return a MultiZoneUpdate to update a
part of the page that is not otherwise known by the inner component.
 However, I haven't been able to close the window using this method.  I
think I might need to trigger a javascript callback (like ChenilleKit's
OnEvent mixin).  Any ideas?

-Nathan

Re: closing a javascript window via a form that uses ajax/zone

[Nathan Kopp <na...@gmail.com>]

I've had a few requests about this, so here is an update with an
easy-to-implement solution.  It can be used to execute any arbitrary
JavaScript as part of an AJAX return.  I simply use the standard
renderSupport.addScript() method.

I created a component called "executescript":
public class ExecuteScript
{
    @Parameter(defaultPrefix=BindingConstants.LITERAL) private String
script;

    @Environmental
    private RenderSupport renderSupport;

    @BeforeRenderTemplate
    public void addScript()
    {
        System.out.println("script: "+script);
        if(!Util.isBlank(script)) renderSupport.addScript(script);
    }
}

(It has a simple mostly-empty "tml" file to go with it.)


Then, to use it, I add this to a page or component:
In the tml:
  <t:zone id="myZone" t:id="myZone">
  <t:executeScript script="prop:execScript"/>
  </t:zone>
In the Java:
  @Property @InjectComponent private Zone myZone;
  @Property private String execScript;
  public Object onCloseWindow()
  {
    execScript = "theIdForMyWindow.close();";   // or any other javascript
that you would like to run
    return myZone.getBody();
  }

When the zone is rendered, the executescript component is rendered.  That
the script to be executed is passed as a parameter and the component uses
renderSupport.addScript() to add the script to the ajax response.  Tapestry
will then automatically execute this script as part of the ajax processing.

-Nathan

On Thu, Mar 11, 2010 at 2:23 AM, Nathan Kopp <na...@gmail.com> wrote:

> I have a page that uses ChenilleKit to pop up a window that contains a
> component.  That component contains a form enclosed in a zone.  The form get
> submitted under a variety of circumstances primarily for the purpose of
> storing the state and redrawing the form based on some option the user just
> selected.  This all works great.  However, once the user has finally
> finished everything, I'd like for the final submit button to do something
> else other than just update the zone.  I want it to cause the window to
> close and for another zone on the page, outside of the window, to be
> updated.  And I need to make it close the ChenilleKit window.  I haven't
> figured out how to make this happen yet.
>
> I think I figured out that I can pass a zone from the page to the inner
> component (which has the form) and then return a MultiZoneUpdate to update a
> part of the page that is not otherwise known by the inner component.
>  However, I haven't been able to close the window using this method.  I
> think I might need to trigger a javascript callback (like ChenilleKit's
> OnEvent mixin).  Any ideas?
>
> -Nathan
>
>

Re: closing a javascript window via a form that uses ajax/zone

[Nathan Kopp <na...@gmail.com>]

So... I just finished a new little utility... MultiZoneUpdateWithScript.
 It's just a proof of concept (it's not perfect), but basically it takes the
concept of a MulitZoneUpdate and also populates the "script" object in the
JSON reply so that Tapestry will automatically fire the supplied javascript
code on the client once the zones are done being updated.  Thus, I can use
this with my form to automatically close the window upon completion.  Yay!

return new
MultiZoneUpdateWithsScript("zone1",zone1).add("zone2",zone2,"myWindow.close();");

If anyone is interested in this code, let me know.

BTW, is there an "insider's guide" to the tapestry.js file?

-Nathan


On Thu, Mar 11, 2010 at 1:23 AM, Nathan Kopp <na...@gmail.com> wrote:

> I have a page that uses ChenilleKit to pop up a window that contains a
> component.  That component contains a form enclosed in a zone.  The form get
> submitted under a variety of circumstances primarily for the purpose of
> storing the state and redrawing the form based on some option the user just
> selected.  This all works great.  However, once the user has finally
> finished everything, I'd like for the final submit button to do something
> else other than just update the zone.  I want it to cause the window to
> close and for another zone on the page, outside of the window, to be
> updated.  And I need to make it close the ChenilleKit window.  I haven't
> figured out how to make this happen yet.
>
> I think I figured out that I can pass a zone from the page to the inner
> component (which has the form) and then return a MultiZoneUpdate to update a
> part of the page that is not otherwise known by the inner component.
>  However, I haven't been able to close the window using this method.  I
> think I might need to trigger a javascript callback (like ChenilleKit's
> OnEvent mixin).  Any ideas?
>
> -Nathan
>
>