Array object == undefined in IE when adding Tweet buttons


#1

I am attempting to create a Tweet button on the fly in response to user actions, where the URL they are tweeting about is different depending on what part of the page the user has selected. This allows the user to return to the page and see the specific thing preselected.

My javascript dynamically writes out the twitter button and inserts it into the DOM in a Div.

When this happens, on Internet Explorer only, I receive javascript errors from javascript inside the twitter iFrame that appears to be manipulating the intrinsic “Array” object of javascript. The exact error is “line: 1” and “Error: ‘Array’ is undefined”.

Here is the javascript I’m using to do this:

                var twitterFrame = $('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/tweet_button.html?' +
                                    'url=' + encodeURIComponent(url) +
                                    '&text=' + encodeURIComponent("Listening to " + archiveObj.selectedShowName + " on the archive") +
                                    '&via=Archive"' +
                                    ' style="width:100px; height:20px;"></iframe>');

                var twitterCell = showData.find("#twitterDiv");
                twitterCell.empty();
                twitterCell.append(twitterFrame);

I also attempted to use the javascript approach instead of the iFrame, and receive very similar errors with the Array object:

                var twitterButton = $('<a href="https://twitter.com/share" class="twitter-share-button" id="twitterButton" data-via="Archive" data-text="Listening to ' + archiveObj.selectedShowName + ' on the archive" data-url="' + encodeURIComponent(showUrl) + '">Tweet</a>');
                var twitterScript = $('<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>');
            
                var twitterCell = showData.find("#twitterDiv");
                twitterCell.empty();
                twitterCell.append(twitterButton);
                twitterCell.append(twitterScript);

In both cases, the twitter code fails, but if I skip the breakpoint, eventually the tweet button shows up properly anyway.

Anyone experience this or have advice?


#2