Opera, REST APIs, Module Patterns and generated script nodes

I just came across an annoying thing in Opera. I love using the Module Pattern for designing my JavaScripts and I love generating script nodes on the fly for REST APIs that give me back JSON. The following example using the twitter API works swimmingly on Firefox and Safari (have to check IE later, but I’d be surprised if it didn’t):

<script type="text/javascript">
    twitterbadge = function(){
      function show(result){
        alert(result);
      };
      var restURL = 'http://twitter.com/statuses/user_timeline/' +   
                    'codepo8.json?callback=twitterbadge.show' + 
                    '&count=10';
      var s = document.createElement('script');
      s.setAttribute('src',restURL);
      document.getElementsByTagName('head')[0].appendChild(s);
      return {
        show:show
      };
    }();
</script>

However, if you test this in Opera you get an error:

JavaScript - file://localhost/Applications/MAMP/htdocs/operacallbackfail.html
Inline script thread
Error:
name: ReferenceError
message: Statement on line 1: Reference to undefined variable: twitterbadge
Backtrace:
  Line 1 of linked script http://twitter.com/statuses/user_timeline/codepo8.json?callback=twitterbadge.show&count=10
    twitterbadge.show([{user : {screen_name : "codepo8",...08"}]);

It seems like the newly generated script node calls the method of the module before the module has been created. In other words, newly generated script nodes halt the execution of the code that generated them. The following example works across browsers, including Opera:

<script type="text/javascript">
    twitterbadgeOperaSafe = function(){
      function show(result){
        alert(result);
      };
      var restURL = 'http://twitter.com/statuses/user_timeline/' +   
                    'codepo8.json?callback=twitterbadgeOperaSafe.show' + 
                    '&count=10';
      var s = document.createElement('script');
      s.setAttribute('src',restURL);
      return {
        show:show,
        init:function(){
          document.getElementsByTagName('head')[0].appendChild(s);
        }
      };
    }();
    twitterbadgeOperaSafe.init();
</script>

Not too daunting a fix, but it feels wrong to have to have an extra method and another line calling it.

Try it out for yourself: Opera bug with dynamic script nodes and module pattern

Technorati Tags: Opera, REST, JSON, bug, dynamic, javascript, scriptnodes

This entry was posted on Friday, April 11th, 2008 at 12:32 pm and is filed under JSON, Opera, REST, bug, dynamic, javascript, scriptnodes. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.