How to both start a file download and close a (jQuery) dialog in Wicket?

Question

In a Wicket app, I have a modal dialog that contains a simple form and a button. User enters values (report parameters), and then clicks the button which starts the download of a report file (typically a PDF). (All form values are required, and Wicket's validation mechanism is used to make sure user entered them before the download can start.)

Maybe this is better explained with a picture:

I'm using here a jQuery UI Dialog (instead of Wicket's ModalWindow which felt a lot clumsier and uglier from user's perspective).

Everything is pretty much working, except closing the dialog when/after clicking the download button.

Current version (irrelevant bits omitted):

public class ReportDownloadLink extends Link {

    public ReportDownloadLink(String id, ReportDto report) {
        super(id);
        this.report = report;
    }

    @Override
    public void onClick() {
       IResourceStream resourceStream = new AbstractResourceStreamWriter() {
            @Override 
            public void write(OutputStream output) {
                try {
                    reportService.generateReport(output, report);
                } catch (ReportGenerationException e) {
            // ...
            }
        }

        @Override
        public String getContentType() {                        
            // ...
        }
    };

    ResourceStreamRequestTarget target = 
        new ResourceStreamRequestTarget(resourceStream, report.getFileName());
    getRequestCycle().setRequestTarget(target);
}

The dialog is a Wicket Panel (which makes use of ReportDownloadLink above), which we put in a certain div, and then when a report is selected in a list, the dialog is opened from an AjaxLink's onClick() quite simply like this:

 target.appendJavascript(String.format("showReportExportDialog('%s')",  ... ));

Which calls this JS function:

function showReportExportDialog(dialogTitle) {
    $("#reportExportPanelContainer").dialog(
        {modal:true, draggable:true, width: 320, height: 330, title: dialogTitle}
    );
}

Some options:

• Make ReportDownloadLink extend something else than Link, perhaps, and/or find an appropriate method to override which would allow me to execute the tiny bit of JavaScript needed to close the jQuery Dialog.
• Investigate jQuery + Wicket libraries (such as jqwicket or wiquery) that supposedly make these two work better together.

Latest thing I tried was overriding method getOnClickScript() in ReportDownloadLink which seemed promising (according to the Javadocs, it returns "Any onClick JavaScript that should be used"):

@Override
protected CharSequence getOnClickScript(CharSequence url) {
    return "closeDownloadDialog()";
}

Thing is, this causes onClick() not to be called at all, i.e., the download doesn't start.

Could I perhaps override some more "ajaxy" class from Wicket (than Link) to combine these things: first init the download, then call the JS for closing the dialog?

Any recommendations or experiences from similar cases? Note that I want to keep using the jQuery dialog here, even though it makes things like these more complicated. Using a DownloadLink (see related question) is fine too in case that makes things easier.

NB: if you recommend JQWicket or wiQuery, please provide an example of how to do this.

Answer 1

Maybe you can try to bind the close modal code to the button "click" event using only JQuery, in your modal panel page, add something similar to ${"#mySubmit").click(myCloseModalFunction). It should keep Wicket default's behavior and add modal closing in the mix.

The other way is to override the getOnClickScript(...) method but the javascript has to return true in order for the browser to call the continue link evaluation and load the corresponding href. If you return false, the evaluation stops. I would suggest something like

@Override
protected CharSequence getOnClickScript(CharSequence url) {
    return "closeDownloadDialog();return true;";
}

Hope it helps...

Answer 2

See https://cwiki.apache.org/WICKET/ajax-update-and-file-download-in-one-blow.html for inspiration.