jQuery UI breaks the anchor download attribute

Question

[My First Post]

Relevant info:

• download attribute
• jquery-ui

Statement:

I am using jQuery UI, and have no errors. All my buttons and styled elements behave correctly. During a jQuery UI modification to a link I discovered that an html5 functionality broke. This link currently downloads a base64 encoded file that was generated by another function. I want to note that prior to the modification the file downloads perfectly. Here is the pre-modification working code.

JS

data = '<a download="out.yaml" href="data:text/yaml;base64, '+ encoded +'" > Yaml Output Download</a> ;

document.getElementById( "output").innerHTML = data ;

HTML

<div id="output">
</div>

When I modify to add jQuery UI to the anchor by adding

class="button" 

the download functionality stops but the styling is implemented and no errors are given by chrome

broken code:

JS

data = '<a class="button" download="out.yaml" href="data:text/yaml;base64, '+ encoded +'" > Yaml Output Download</a> ;

document.getElementById( "output").innerHTML = data ;

HTML

<div id="output">
</div>

I believe that this is a jQuery UI problem, but would like to know if there is a way to use the jQuery UI button while maintaining the original download capability.

EDIT

JS data = ' Yaml Output Download ;

 //document.getElementById( "output" ).innerHTML = data ;
 $( '#output' ).html( data ) ;
 $( document ).ready( function() { reload() ; } ) ;

ONLOAD

function reload() {
    $( "input[type=submit], a.button, button" )
        .button()
        .click(function( event ) {
            event.preventDefault();
        });
} ;

$(function() {
    reload() ;
});

SOLOUTION

Since I thought the reloading function was being executed correctly I didn't go back and look at the reload function as jQueryUI was not throwing errors or not functioning. All that was needed to be done was to comment out event.preventDefault() ; which as the name suggests prevents the triggering of the default action, in this case the download of the file.

ONLOAD

   function reload() {
        $( "input[type=submit], a.button, button" )
            .button()
            .click(function( event ) {
                //event.preventDefault();
            });
    } ;

Answer 1

Is it possible the javascript snippet (document.getElementById) needs to run within the jQuery document.ready callback? Regardless of whether that is the issue, I recommend executing your javascript from within the document.ready callback, as opposed to leaving the javascript to run as the page is loaded.