Close wicket modal window by pressing a button

Question

I want to close a modal window by pressing a button residing on the modal window page. It is not working. My modal window page contains a video player.

My code is:

public class PlayVideoWindow extends WebPage {
    public PlayVideoWindow(final Page modalWindowPage, final ModalWindow window, final String itemId) {
        final String xmlFilePath = ((WebApplication) getApplication()).getServletContext().getRealPath("/resources/video/xml/video.xml");
        String filename = null; 

        try {
            filename = WebVideo.getVideo(itemId, xmlFilePath);
        } catch (SAXException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }        

        WebMarkupContainer videoContainer = new WebMarkupContainer("videoDiv");
        add(videoContainer);

        add(HeaderContributor.forJavaScript("resources/video/js/swfobject.js"));

        final String script = "var swfVersionStr = '10.0.0';"
            + "var xiSwfUrlStr = 'playerProductInstall.swf';"
            + "var flashvars = {};"
            + "flashvars.filename = '"+ filename +"'" +";"
            + "var params = {};"
            + "params.wmode = 'transparent';"
            + "params.quality = 'high';"
            + "params.allowscriptaccess = 'always';"
            + "params.allowfullscreen = 'true';"
            + "params.allownetworking = 'all';"
            + "var attributes = {};"
            + "attributes.id = 'Player';"
            + "attributes.name = 'Player';"
            + "attributes.align = 'left';"
            + "swfobject.embedSWF('/jtrac/resources/video/swf/Player.swf', 'movieDiv', '320', '320', swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);"
            + "swfobject.createCSS('#flashContent', 'display:block;text-align:left;');";

    add(new AbstractBehavior() {
        public void renderHead(IHeaderResponse response) {
            super.renderHead(response);
            response.renderOnLoadJavascript(script);
        }
    });

    //videoContainer.add(new AjaxButton("close") {
      //  protected void onSubmit(final AjaxRequestTarget target, final Form form) {
        //    PlayVideoWindow.this.close(target);
        //}
    //});

    //Button closeButton;
    //videoContainer.add(closeButton = new Button("close"));
    //closeButton.add(new AttributeAppender("onclick", new Model("window.close();"), ";"));
    }
}

And here's the HTML:

<div wicket:id="videoDiv">
<div id="movieDiv"></div>
<input type="button" wicket:id="close" />
</div>

The commented-out lines of code are my tests. Any information will be very helpful to me. Thank you.

EDIT:
I solved my problem with this code:

add(new AjaxLink("close") {
        public void onClick(AjaxRequestTarget target) {
            window.close(target);
        }
    });

Solution 1

All you need to do is insert a call to the close method in your button's code.

To close the window there are multiple options. Static method close(AjaxRequestTarget) can be used to close the window from a handler of ajax link inside the window.

Source: documentation of ModalWindow in the 1.4.7 release.

I see that you solved your problem with a link, but your post mentioned a button, so I don't know if the link solution was just a workaround until you got something better. Also, since close is a static method, you should call it from the class, not an instance.

Solution 2

Here is an example script:

<script type="text/javascript">

    if (top != self) {
        var wicket = top.Wicket;
        if (wicket && wicket.Window) {
            var modal = wicket.Window.get();
            if (modal) {
                modal.close();
            }
        }
        top.location.href = location.href;
    }
</script> 

Solution 3

you are getting ModalWindow window in your constructor.

Try

window.close(target);

Comments

[Tapas Bose]

Thank you @Torgamus. I had solved it with button and link both.