Geek Answers Handbook

Mysterious' does not support this'error method in IE8 on google.load

I am using google search JSAPI in my local search application. Everything works fine in all browsers except IE 8. The problem is that after a specific line of code, my base jquery object and google objects are truncated.

Direct code. I can play problm using this jsfiddle .

html code

<html> <head> <title>Test Map</title> <script src="http://www.google.com/jsapi?" type="text/javascript"></script> </head> <body> <div id="map_canvas"></div> </body> </html>

and js

 $(function() { alert(1); google.load('search',1); alert($); google.setOnLoadCallback(function() { alert(2); }); });

after the line google.load('search',1) I got the following error

Error: Object doesn't support this property or method

on $ and google .

This is absolutely a nightmare. I am afraid with this watch without any luck. Do all IE experts have an idea?

+1
source share
3 answers

Change jsFiddle to "No wrap (body)" and change your function like this ...

 //$(function() { //alert(1); google.load('search',1); alert($); google.setOnLoadCallback(function() { alert(2); }); //});

Almost the same question asked here: Google is not defined using the Google visualization API; maybe jQuery bug

+1
source

This issue is caused by document.write in the Google load API similar to this question . The script is delayed, as shown in the image below:

enter image description here

To solve the problem, do not transfer the code to the onload / domready handler.

 <script src="http://www.google.com/jsapi?" type="text/javascript"></script> <script> // All load-related invocations have to be placed here. google.load('search',1); google.setOnLoadCallback(function() { alert(2); }); </script>

Note that JSfiddle places any content at the top corner in the <body> tags. Thus, a simple copy of the code in JSFiddle will not show the correct results.

+1
source

I faced the same problems. Here is the resolution.

If you want to use google visualization api in jQuery. Please follow the approach below

 <script type="text/javascript"> //Load the Google visualization library google.load("visualization", "1.1", {packages:["bar"]}); $(document).ready(function() { google.setOnLoadCallback(function () { $('#Search').click(sendAndDraw); }); $("#Search").click(function (e) { var data = google.visualization.arrayToDataTable([ ['Technology', 'Beginner', 'Intermediate', 'Expert'], ['Java', 10, 40, 20], ['DOT NET', 11, 46, 25], ['Mainframe', 66, 11, 30], ['Oracle', 10, 50, 30] ]); var options = { chart: { title: 'Management Reports', subtitle: 'Classification of resources', } }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, options); });
0
source

More articles:


All Articles