Why migrating code to class structure breaks code?

Question

This Google jQuery GeoChart plugin works great like this:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        // code to draw map
      };

</script>

But moving the code into classes, breaks everything. Browser is blank and status remains "transferring data from www.google.com."

(function( someClass, undefined ) {
    someClass.init= function() {
       console.log(google); //google object defined but next line breaks:
       google.load('visualization', '1', {'packages': ['geochart']}); 

       ...remainder of code
    };
}( window.Project.Pages.someClass = window.Project.Pages.someClass || {}));

Any ideas as to why?

Your code looks basically right, but you're missing a `)` after the closing bracket of the anonymous function. `}( window.Project.Pages...` => `})( window.Project.Pages` ... possibly the issue? — George Pantazis, Jul 01 '12 at 23:58
Disregard, I was thinking the close-parens corresponding to the start of your block needed to go there, but it can go at the end as well. Herp derp. — George Pantazis, Jul 03 '12 at 00:47
Can you show a fiddle / live example. Because it works on my side — Jashwant, Jul 05 '12 at 06:56
@Jashwant, it looks quite a bit like http://jsbin.com/inurif/edit#source but it doesn't work. I've moved the script to the head, and verified the code. I think the real thing is problematic due to loading issues, integration with jQuery, google.load and DOM (see RobW's threads). — Kyle Cureau, Jul 06 '12 at 00:22

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

The problem is caused by the way how Google loads their scripts. A simplified version of the problem occurred in this question: The problem was caused by the fact that the load of a Google script was delayed.

I've previously written a patch which is supposed to fix the issue, see this answer. Just evaluate the patch before using google.load.

edited May 23 '17 at 10:34

Community

1
1

answered Jul 04 '12 at 19:21

Rob W

341,306
83
791
678

I think you're right on about the problem. It now says google.visualization is undefined. I've loaded your patch dynamically and no luck. – Kyle Cureau Jul 06 '12 at 00:21
1

@Emile I have tested and fixed my patch. The problem was that my original code contained single-letter variable names. For the sake of readability, I renamed `a` to `a_listener` in the function before posting, but forgot to rename the function argument. I've tested the code again, and it seems to work: http://pastebin.com/D6nyCxB4. – Rob W Jul 06 '12 at 09:18

score 0 · Answer 2 · answered Jul 05 '12 at 01:23

I don't know exactly what you mean but this works...

(function( someClass ) {
    someClass.init= function() {
       google.load('visualization', '1', {'packages': ['geochart']}); 
       google.setOnLoadCallback(function(){ alert('setOnLoadCallback'); });
    };
}( someClass = {}));
someClass.init();

http://jsbin.com/inurif/edit#source

Why migrating code to class structure breaks code?

2 Answers2