javascript function convert into jquery equivalent

Question

I have a javascript function written as follows which works just fine in Firefox for downloading given txt content.

  self.downloadURL = function (url) {
        var iframe;
        iframe = document.getElementById("hiddenDownloader");        
        if (iframe === null) {
            iframe = document.createElement('iframe');
            iframe.id = "hiddenDownloader";
            iframe.style.display = "none";
            document.body.appendChild(iframe);
        }
        iframe.src = url;
    }

but it does n't work fine with IE 9 due to some reasons. So i tried to convert into equivalent jquery because jquery has compatibility with all the browsers.

here is the jquery equivalent of the same function:

   self.downloadURL = function (url) {
        var iframe;
        iframe = $("#hiddenDownloader");        
        if (iframe === null) {
            iframe = $('<iframe></iframe>');
            iframe.id = "hiddenDownloader";            
            $("#hiddenDownloader").css("display", "none");
            $(document.body).append(iframe);
        }
        iframe.src = url;
    }

But now it does n't work in both the browsers. Please help letting me know what am i doing wrong.

I dont get any particular error. it just does not respond in IE 9 — Alagesan Palani
– Alagesan Palani, Commented Sep 5, 2013 at 13:34

Andreas Louv · Accepted Answer · 2013-09-05 12:52:25Z

9

Your problem is in:

iframe = $('<iframe></iframe>');
iframe.id = "hiddenDownloader";

iframe refers to a jQuery Object not a DOM Node. You will have to use .prop to set the id:

iframe = $('<iframe></iframe>');
iframe.prop('id', "hiddenDownloader");

And also you have the same problem here:

if (iframe === null) {

Where you will need the check the length of iframe:

if (iframe.length === 0) {

And again at iframe.src = url; Maybe you can figure this one out:

iframe.attr('src', url);

But why would you convert vanilla JavaScript to jQuery?

edited Sep 5, 2013 at 12:52

answered Sep 5, 2013 at 12:39

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Frédéric Hamidi Over a year ago

iframe.length === 0 (or maybe just !iframe.length) would be better than testing against null IMHO.

Andreas Louv Over a year ago

iframe.length === 0 Sure think :)

Reinstate Monica Cellio Over a year ago

@NULL No need for === 0. if (iframe.length) will do just fine :)

Andreas Louv Over a year ago

@Archer I know. Its because 0 is falsy as a lot of other things is in JavaScript (undefined, null, "", etc). But === 0 is more clear for not so skilled programmer :)

Reinstate Monica Cellio Over a year ago

Good point, and I've just realised that it had already been said and I also missed a !. #Hangsheadinshame

|

David-SkyMesh · Accepted Answer · 2013-09-05 12:39:46Z

0

Seems like a strange way to download a file.

In any case, this probably works the same was as the original:

if (!iframe.get(0)) {
  ...
}

... and the id property as another poster mentions.

answered Sep 5, 2013 at 12:39

David-SkyMesh

5,1721 gold badge35 silver badges41 bronze badges

Comments

EvenStevens · Accepted Answer · 2013-09-05 12:42:12Z

0

iframe = document.getElementById("hiddenDownloader");          
iframe = $("#hiddenDownloader");

These lines aren't equivalent. The second one create a jQuery object, so the check for null will never equate to true

answered Sep 5, 2013 at 12:42

EvenStevens

3102 silver badges9 bronze badges

Comments

choudhury smrutiranjan parida · Accepted Answer · 2013-09-05 13:06:11Z

0

This link may help u:

http://www.sitepoint.com/forums/showthread.php?743000-IE9-Iframes-DOCTYPES-and-You

or u can add this to the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

answered Sep 5, 2013 at 13:06

choudhury smrutiranjan parida

2,7485 gold badges31 silver badges40 bronze badges

Comments

Khanh TO · Accepted Answer · 2013-09-05 14:24:11Z

0

Replace iframe.src = url; with iframe.attr("src",url + "?"+ Math.random()); to prevent caching issue in IE9.
Replace iframe.id = "hiddenDownloader"; with iframe.attr("id","hiddenDownloader");
Replace if (iframe === null) { with if (iframe.length === 0) {

edited Sep 5, 2013 at 14:24

answered Sep 5, 2013 at 12:40

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

1 Comment

Khanh TO Over a year ago

@Alagesan Palani: this could be the caching problem in IE9, try my updated answer url + "?"+ Math.random()

Andreas Louv · Accepted Answer · 2015-11-06 13:01:03Z

0

Try with:

iframe = $("#hiddenDownloader")[0];

edited Nov 6, 2015 at 13:01

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

answered Sep 5, 2013 at 12:40

RunningAdithya

1,7842 gold badges17 silver badges23 bronze badges

Collectives™ on Stack Overflow

javascript function convert into jquery equivalent

6 Answers 6

8 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related