Clicking on anchor in JS

Question

I am trying to create an anchor in js and click it in such a way to trigger the download of a file. This is my code:

      var anchor = $('.vcard-hyperlink');
      var windowUrl = window.URL || window.webkitURL;
      anchor.attr({
                    href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
                    download: 'test.xml',
                });
      anchor.get(0).click();

where request.response is just a document coming from a server. the problem I have is that anchor.get(0) results to be undefined. How can I fix this? thanks in advance

UPDATE: this is the whole scenario

var request = new XMLHttpRequest();
request.open('GET', url + formatParams(data));
request.setRequestHeader('Authorization', 'Bearer ' + appsecurity.getBearerTokenWithoutHeader().accessToken);

request.onreadystatechange = function () {
  if (request.readyState == XMLHttpRequest.DONE) {
      var str = request.response;
      var maxSizeForBase64 = 1048576; //1024 * 1024
      var anchor = $('.vcard-hyperlink');
      var windowUrl = window.URL || window.webkitURL;
      anchor.attr({
            href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
                    download: 'test.xml',
      });
      anchor.trigger('click');
    }
  }
}
request.send(data);

this is the whole method called by just a button on the client

You'll need to show the relevant HTML as well. If `anchor.get(0)` is coming back as `undefined`, you may not have the HTML set up correctly. — Scott Marcus, May 24 '18 at 14:02
The button is type="button" and the anchor correct? Can you please post the HTML too? — mplungjan, May 24 '18 at 14:13
You still haven't posted the HTML and that's what we need to see. — Scott Marcus, May 24 '18 at 14:14
You appear to have one too many `}` before your `request.send()` and you have an extra `,` at the end of your `anchor.attr` object. — Scott Marcus, May 24 '18 at 14:19
Also https://stackoverflow.com/questions/5507234/use-basic-authentication-with-jquery-and-ajax?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — mplungjan, May 25 '18 at 07:34

mplungjan · Answer 1 · 2018-05-24T14:12:16.593

Assuming

you load jQuery correctly and
have a link with that classname,
the button you click does not submit the page
the response returns a proper string

the code you provided should work

This works - mime type text/xml

var anchor = $('.vcard-hyperlink');
anchor.attr({
  //  href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
  href: "data:text/xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCiAgIDx2Y2FyZHMgeG1sbnM9InVybjppZXRmOnBhcmFtczp4bWw6bnM6dmNhcmQtNC4wIj4NCiAgICAgPHZjYXJkPg0KICAgICAgIDxmbj48dGV4dD5TaW1vbiBQZXJyZWF1bHQ8L3RleHQ+PC9mbj4NCiAgICAgICA8bj4NCiAgICAgICAgIDxzdXJuYW1lPlBlcnJlYXVsdDwvc3VybmFtZT4NCiAgICAgICAgIDxnaXZlbj5TaW1vbjwvZ2l2ZW4+DQogICAgICAgICA8YWRkaXRpb25hbC8+DQogICAgICAgICA8cHJlZml4Lz4NCiAgICAgICAgIDxzdWZmaXg+aW5nLiBqcjwvc3VmZml4Pg0KICAgICAgICAgPHN1ZmZpeD5NLlNjLjwvc3VmZml4Pg0KICAgICAgIDwvbj4NCiAgICAgICA8YmRheT48ZGF0ZT4tLTAyMDM8L2RhdGU+PC9iZGF5Pg0KICAgICAgIDxhbm5pdmVyc2FyeT4NCiAgICAgICAgIDxkYXRlLXRpbWU+MjAwOTA4MDhUMTQzMC0wNTAwPC9kYXRlLXRpbWU+DQogICAgICAgPC9hbm5pdmVyc2FyeT4NCiAgICAgICA8Z2VuZGVyPjxzZXg+TTwvc2V4PjwvZ2VuZGVyPg0KICAgICAgIDxsYW5nPg0KICAgICAgICAgPHBhcmFtZXRlcnM+PHByZWY+PGludGVnZXI+MTwvaW50ZWdlcj48L3ByZWY+PC9wYXJhbWV0ZXJzPg0KICAgICAgICAgPGxhbmd1YWdlLXRhZz5mcjwvbGFuZ3VhZ2UtdGFnPg0KICAgICAgIDwvbGFuZz4NCiAgICAgICA8bGFuZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjxwcmVmPjxpbnRlZ2VyPjI8L2ludGVnZXI+PC9wcmVmPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxsYW5ndWFnZS10YWc+ZW48L2xhbmd1YWdlLXRhZz4NCiAgICAgICA8L2xhbmc+DQogICAgICAgPG9yZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjx0eXBlPjx0ZXh0Pndvcms8L3RleHQ+PC90eXBlPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDx0ZXh0PlZpYWdlbmllPC90ZXh0Pg0KICAgICAgIDwvb3JnPg0KICAgICAgIDxhZHI+DQogICAgICAgICA8cGFyYW1ldGVycz4NCiAgICAgICAgICAgPHR5cGU+PHRleHQ+d29yazwvdGV4dD48L3R5cGU+DQogICAgICAgICAgIDxsYWJlbD48dGV4dD5TaW1vbiBQZXJyZWF1bHQNCiAgIDI4NzUgYm91bC4gTGF1cmllciwgc3VpdGUgRDItNjMwDQogICBRdWViZWMsIFFDLCBDYW5hZGENCiAgIEcxViAyTTI8L3RleHQ+PC9sYWJlbD4NCiAgICAgICAgIDwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxwb2JveC8+DQogICAgICAgICA8ZXh0Lz4NCiAgICAgICAgIDxzdHJlZXQ+Mjg3NSBib3VsLiBMYXVyaWVyLCBzdWl0ZSBEMi02MzA8L3N0cmVldD4NCiAgICAgICAgIDxsb2NhbGl0eT5RdWViZWM8L2xvY2FsaXR5Pg0KICAgICAgICAgPHJlZ2lvbj5RQzwvcmVnaW9uPg0KICAgICAgICAgPGNvZGU+RzFWIDJNMjwvY29kZT4NCiAgICAgICAgIDxjb3VudHJ5PkNhbmFkYTwvY291bnRyeT4NCiAgICAgICA8L2Fkcj4NCiAgICAgICA8dGVsPg==",
  download: 'test.xml'
});
anchor.get(0).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" class="vcard-hyperlink">Click</a>

So does this - mime type text/x-vcard

var anchor = $('.vcard-hyperlink');
anchor.attr({
  //  href: 'data:text/plain;base64,' + btoa(unescape(encodeURIComponent(request.response))),
  href: "data:text/x-vcard;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCiAgIDx2Y2FyZHMgeG1sbnM9InVybjppZXRmOnBhcmFtczp4bWw6bnM6dmNhcmQtNC4wIj4NCiAgICAgPHZjYXJkPg0KICAgICAgIDxmbj48dGV4dD5TaW1vbiBQZXJyZWF1bHQ8L3RleHQ+PC9mbj4NCiAgICAgICA8bj4NCiAgICAgICAgIDxzdXJuYW1lPlBlcnJlYXVsdDwvc3VybmFtZT4NCiAgICAgICAgIDxnaXZlbj5TaW1vbjwvZ2l2ZW4+DQogICAgICAgICA8YWRkaXRpb25hbC8+DQogICAgICAgICA8cHJlZml4Lz4NCiAgICAgICAgIDxzdWZmaXg+aW5nLiBqcjwvc3VmZml4Pg0KICAgICAgICAgPHN1ZmZpeD5NLlNjLjwvc3VmZml4Pg0KICAgICAgIDwvbj4NCiAgICAgICA8YmRheT48ZGF0ZT4tLTAyMDM8L2RhdGU+PC9iZGF5Pg0KICAgICAgIDxhbm5pdmVyc2FyeT4NCiAgICAgICAgIDxkYXRlLXRpbWU+MjAwOTA4MDhUMTQzMC0wNTAwPC9kYXRlLXRpbWU+DQogICAgICAgPC9hbm5pdmVyc2FyeT4NCiAgICAgICA8Z2VuZGVyPjxzZXg+TTwvc2V4PjwvZ2VuZGVyPg0KICAgICAgIDxsYW5nPg0KICAgICAgICAgPHBhcmFtZXRlcnM+PHByZWY+PGludGVnZXI+MTwvaW50ZWdlcj48L3ByZWY+PC9wYXJhbWV0ZXJzPg0KICAgICAgICAgPGxhbmd1YWdlLXRhZz5mcjwvbGFuZ3VhZ2UtdGFnPg0KICAgICAgIDwvbGFuZz4NCiAgICAgICA8bGFuZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjxwcmVmPjxpbnRlZ2VyPjI8L2ludGVnZXI+PC9wcmVmPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxsYW5ndWFnZS10YWc+ZW48L2xhbmd1YWdlLXRhZz4NCiAgICAgICA8L2xhbmc+DQogICAgICAgPG9yZz4NCiAgICAgICAgIDxwYXJhbWV0ZXJzPjx0eXBlPjx0ZXh0Pndvcms8L3RleHQ+PC90eXBlPjwvcGFyYW1ldGVycz4NCiAgICAgICAgIDx0ZXh0PlZpYWdlbmllPC90ZXh0Pg0KICAgICAgIDwvb3JnPg0KICAgICAgIDxhZHI+DQogICAgICAgICA8cGFyYW1ldGVycz4NCiAgICAgICAgICAgPHR5cGU+PHRleHQ+d29yazwvdGV4dD48L3R5cGU+DQogICAgICAgICAgIDxsYWJlbD48dGV4dD5TaW1vbiBQZXJyZWF1bHQNCiAgIDI4NzUgYm91bC4gTGF1cmllciwgc3VpdGUgRDItNjMwDQogICBRdWViZWMsIFFDLCBDYW5hZGENCiAgIEcxViAyTTI8L3RleHQ+PC9sYWJlbD4NCiAgICAgICAgIDwvcGFyYW1ldGVycz4NCiAgICAgICAgIDxwb2JveC8+DQogICAgICAgICA8ZXh0Lz4NCiAgICAgICAgIDxzdHJlZXQ+Mjg3NSBib3VsLiBMYXVyaWVyLCBzdWl0ZSBEMi02MzA8L3N0cmVldD4NCiAgICAgICAgIDxsb2NhbGl0eT5RdWViZWM8L2xvY2FsaXR5Pg0KICAgICAgICAgPHJlZ2lvbj5RQzwvcmVnaW9uPg0KICAgICAgICAgPGNvZGU+RzFWIDJNMjwvY29kZT4NCiAgICAgICAgIDxjb3VudHJ5PkNhbmFkYTwvY291bnRyeT4NCiAgICAgICA8L2Fkcj4NCiAgICAgICA8dGVsPg==",
  download: 'test.xml'
});
anchor.get(0).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" class="vcard-hyperlink">Click</a>

Shouldn't the question be closed since the problem can't be reproduced? Or, shouldn't we wait and see what the OP's HTML looks like before we provide an answer? — Scott Marcus, May 24 '18 at 14:08
Sure, but I was intrigued if it was even possible to force a download like that. If the question is closed, it is closed. — mplungjan, May 24 '18 at 14:09
Also, what's the difference between your two snippets? I don't see it. — Scott Marcus, May 24 '18 at 14:10
Oh. Don't both of your snippets have a syntax error with the trailing `,` at the end of the `attr` object? — Scott Marcus, May 24 '18 at 14:12

Clicking on anchor in JS

1 Answers1