1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default FYI: Very simple approach to JS-triggered file downloads

    FYI: Very simple approach to JS-triggered file downloads


    While looking at the various ways to trigger a file download from JS, I came up with the following; a very simple approach that we've tested to on all current browsers on Windows and Mac. Perhaps this method is well-known, but I was not able to find anything like it--everything I found that used a hidden form also required a hidden iframe and event handler to destroy the hidden form and iframe. This method starts off the same way, but does not require the iframe and cleans up after itself immediately.

    PHP Code:
        var form Ext.DomHelper.append(document.body, {
            
    tag 'form',
            
    method 'post',
            
    action url
        
    });
        
    document.body.appendChild(form);

        
    // add any other form fields you like here

        
    form.submit();
        
    document.body.removeChild(frame); 
    If anyone has any questions or thoughts on any problems that this may case that we haven't seen, I'm all ears...

    Tnx!
    Eric

  2. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,317
    Vote Rating
    23
    arthurakay has a spectacular aura about arthurakay has a spectacular aura about arthurakay has a spectacular aura about

      0  

    Default


    Very interesting... actually wish I had thought of this a long time ago. I have some legacy code where the download forms were hard-coded into the HTML page, so I'll give this a shot. Thanks for sharing!
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,890
    Vote Rating
    102
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Clever, you should roll this into a simple method like Ext.forceDownload which takes the url and any additional form parameters.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      1  

    Default


    is there a typo in the code snippet?

    shouldn't it be
    Code:
    document.body.removeChild(form);
    instead?

  5. #5
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    top.location.href=url

    works for me.

    (url is the url of the script that outputs the file download, or the file itself)

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    The only provblem i see with this approach is that sometimes form submissions to create downloads take time, which is why event management with the iframe is required.

    For instance, submit a form that requires the server side to generate a binary (PDF/image/zip?), which could take some time.

    What happens when you remove the el from the DOM before the server side has time to respond?

  7. #7
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    @mystix: Yes, copy/paste error.

    @mschwartz: This approach is fine as long as you only need to GET; the hidden form supports POST.

    @jgarcia: I specifically tested for that across several browsers/machines, and it works fine regardless of how big the file is or even how long it takes for the download to start. I believe the reason why is that once the submit call has been made, the browser really doesn't care about the form any more. Of course that was the original purpose of the iframe (to keep the form around until the transaction completed), but in the case of a forced download, it's not necessary.

  8. #8
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Quote Originally Posted by Eric24 View Post
    @mystix: Yes, copy/paste error.

    @mschwartz: This approach is fine as long as you only need to GET; the hidden form supports POST.

    @jgarcia: I specifically tested for that across several browsers/machines, and it works fine regardless of how big the file is or even how long it takes for the download to start. I believe the reason why is that once the submit call has been made, the browser really doesn't care about the form any more. Of course that was the original purpose of the iframe (to keep the form around until the transaction completed), but in the case of a forced download, it's not necessary.
    You can always Ajax request the URL you need to GET.

  9. #9
    Sencha User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    Sheep is on a distinguished road

      0  

    Default


    Thx Eric for the trick.

    I don't know, if it's still the "good-way to do it".

    Here is my sample on how to add form parameters (using children) (as i'm a complete newbie, it took me a little while to figure it).

    PHP Code:
    var form Ext.DomHelper.append(
        
    document.body
        {        
            
    tag 'form',
            
    method 'post',
            
    action 'impex.php'
            
    children: [
                {
    tag'input'type:'hidden'name'action'value'export'},
                {
    tag'input'type:'hidden'name'list'valueExt.encode(exportlist)} //export list is a simple array
            
    ]
        }
    );
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form); 
    Last edited by Sheep; 27 Jan 2010 at 10:12 AM. Reason: formating code

  10. #10
    Sencha User hcervantes's Avatar
    Join Date
    Mar 2007
    Location
    Centerville, OH
    Posts
    80
    Vote Rating
    0
    hcervantes is on a distinguished road

      0  

    Default How to pass in JSON in post

    How to pass in JSON in post


    So I got this to work perfectly. Only that I have data in a JSON object that I encode and set it as a value to a hidden input element. When I inspect it in Fiddler, I see that parameter is null because when it encounters a quote (") in the JSON it can't figure it out. I also tried the URLEncode and it works, but on the PHP side, URLDecode does not translate it correctly.
    Here is my sample code:
    Code:
    var jsonObj = [{"ID": 2, "Name": "John"},{"ID": 3, "Name": "Juan"}];
    var form = Ext.DomHelper.append( 
        document.body,  
        {         
            tag : 'form', 
            method : 'post', 
            action : 'impex.php',  
            children: [ 
                {tag: 'input', type:'hidden', name: 'filename', value: 'export.csv'}, 
                {tag: 'input', type:'hidden', name: 'json_str', value: Ext.encode(jsonObj)} 
            ] 
        } 
    ); 
    document.body.appendChild(form); 
    form.submit(); 
    document.body.removeChild(form);
    the json_str parameter when examined through fiddler only has "[{" as the value, the rest is being stripped off.
    Any pointers????
    thanks in advance!
    -Hector Cervantes
    GIS Pro

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar