How to close a dialog

[HeadStand]

The title sounds hysterical, actually. It's screaming for snarky responses. Please don't give me snarky responses.

I have a button that opens a dialog with a small form for the users to fill out.

<a href="{$project->url()->setQueryString( array( 'do' => 'export', 'export' => 'fasta' ) )}" data-ipsDialog data-ipsDialog-title="{lang="project_export_fasta"}" data-ipsDialog-size="medium">{lang="project_export_fasta"}</a>

When the user fills out the form and presses Save, the application generates a text file and downloads it.

Now... how do I get the dialog to close after that file is downloaded? It just sits there and keeps spinning.

I tried adding a redirect in the code after the file is downloaded, but the redirect gets executed too quickly and I never get the file.

Any suggestions?

[Adriano Faria]

Not sure it will help:

 

[HeadStand]

If I add that to my submit button, it just closes the dialog without submitting.

[Flitterkill]

remoteVerify
(Boolean; optional; default true)

When the dialog contains a form built using the IPS4 PHP framework form helper, this option instructs the dialog to automatically validate the form values and present any errors to the user.

 

remoteSubmit
(Boolean; optional; default false)

When the dialog contains a form built using the IPS4 PHP framework form helper, this option instructs the dialog to submit the form values via AJAX. If remoteVerify is also true, two separate AJAX requests are fired; first, the form is validated, and if successful the form is submitted with a second request.

If remoteSubmit is true, after a successful submit the dialog is closed automatically. If the flashMessage option is provided, it will be shown at this point.

By default, remoteSubmit is false, which means forms submit via a traditional page reload.

[HeadStand]

If I add remoteSubmit, it closes the dialog, but I don't get the file to download.

@bfarber @Rikki

[Rikki]

There won't really be an easy way to do it automatically. Remote submit submits a form via ajax, which won't work for a file download.

Couple of options - you could fake it by setting a timeout when they click the Download button, and then just close the dialog after ~2 seconds and assume they've started the download.

Alternatively, when the user clicks the download button, the server actually returns the download URL and it's the javascript that closes the dialog and redirects the browser to the download location.

[HeadStand]

I think a timeout might be the best way to go. Thanks.

[BomAle]

The dialog emit this event when request is done, before hide the dialog.

$( elem || document ).trigger('submitDialog', {
	elemID: elemID,
	dialogID: dialogID,
	dialog: dialog,
	contentLoaded: contentLoaded,
	response: submitResponse
});

I think you can use this for elaborate the response.

<script type="text/javascript">
$(document).on('submitDialog', '[data-role="exportFasta"]', function(e, data){
	alert('we are export'); //debug purpose easy
	//data.dialog
});
</script>

add data-role="exportFasta" to identify the dialog element

<a href="{$project->url()->setQueryString( array( 'do' => 'export', 'export' => 'fasta' ) )}" data-ipsDialog data-ipsDialog-title="{lang="project_export_fasta"}" data-ipsDialog-size="medium" data-role="exportFasta">{lang="project_export_fasta"}</a>

but I don't know how detect the end of downloaded file. (stackoverflow, cookie control & check with polling)