PDA

View Full Version : ExtJS 4 - Issue related to downloading file using Ajax.



netemp
12 Oct 2011, 4:56 AM
I have a form with various textfields and two buttons - Export to Excel and Export to CSV.

The user can provide the values to different fields in the form and click one of the buttons.

On click of a button, an Ajax request is fired carrying the values from the form fields as params to the server (I am not submitting the form as there needs to be done some processing at the values before submit). The server side file proceses the request and releases the data with right headers (excel/csv).

Now, I have been using the following code in success function of Ajax request for the download:



result = Ext.decode(response.responseText);

try {
Ext.destroy(Ext.get('testIframe'));
}

catch(e) {}

Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'testIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.filename,
frameBorder: 0,
width: 0,
height: 0
});


The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.

Thus, is there a way to download a file using Ajax when the file is not present at the server physically? Just to add that I have a long list of parameters which I need to send to the server and hence can not add them all to the src of iframe.

Could anyone guide at this?

Thanks for any help in advance.

mankz
12 Oct 2011, 5:20 AM
Simply not possible....

netemp
12 Oct 2011, 5:23 AM
Simply not possible....

Thanks for the post Mankz.

You made it quite clear brother :)

But just to bother you if I can, could you please guide that as an alternate, if I have to open this file in a new window then is there any other method of sending the parameters to the server instead of giving them in the URL?

skirtle
12 Oct 2011, 5:49 AM
I may be misunderstanding your requirements but couldn't you just POST your request directly into a hidden IFRAME rather than using an Ajax request?

netemp
12 Oct 2011, 6:00 AM
I may be misunderstanding your requirements but couldn't you just POST your request directly into a hidden IFRAME rather than using an Ajax request?

Thanks for the reply Skirtle, could you please elaborate that what exactly you mean by "POST the request into a hidden IFRAME". Is is possible for you to share some example code of doing this in ExtJs?

Thanks again.

netemp
12 Oct 2011, 6:13 AM
I tried what Skirtle suggested and did the following:



try {
Ext.destroy(Ext.get('downloadIframe'));
}


catch(e) {}


Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'downloadIframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:0px;',
src: '/Test/xls'
});


var csvForm = Ext.create('Ext.form.Panel');


csvForm.getForm().submit({
target:'downloadIframe',
method:'POST',
params:{
intViaNo:Ext.getCmp('voyageMonitoringViaNoId').getValue(),
vslCd:Ext.getCmp('voyageMonitoritngVesselCodeId').getValue(),
}
});


With this, the form got submitted but unfortunately, the params were not sent to the server.

Also, it gave error of "Invalid Arguments" at following line of ext-all-debug.js


xhr.open(requestOptions.method, requestOptions.url, async);

Any suggestions?

Thanks for time so far.

skirtle
12 Oct 2011, 6:17 PM
It's still trying to use Ajax. You need standardSubmit: true or it won't use the IFRAME:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-cfg-standardSubmit

You also need to specify the base url, it isn't sufficient to specify it on the IFRAME:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-cfg-url

netemp
16 Oct 2011, 10:55 PM
It's still trying to use Ajax. You need standardSubmit: true or it won't use the IFRAME:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-cfg-standardSubmit

You also need to specify the base url, it isn't sufficient to specify it on the IFRAME:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-cfg-url

Thanks for sharing Skirtle, will put it to use with fingers crossed :)

Thanks for all your time.