The jQuery, jQuery UI and Google Maps can be loaded from Google's CDN in two ways - either by using google.load():
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.load("maps", "3", {other_params: "language=de&sensor=false"});
</script>
or by using the static <script src="..."> tags:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
Is there please the 2nd way available for the Google charts API as well?
For me only this method works:
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
but I can not find the URL for the 2nd way.
And I would prefer to include the Google charts API statically because it looks more straightforward to me and because of my current problem with DataTables.net.
When I look at the resources using the Google Chrome console, I can see the address like
https://www.google.com/uds/api/visualization/1.0/342b7b8453344477d252440b6c1305c9/format+en,default,corechart.I.js
but I think it is a temporary one, which can expire...
I've found an autoloading workaround:
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'ru'}]}">
</script>
UPDATE 2017:
Chrome displays this warning though:
jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table'],'…:22
A Parser-blocking, cross-origin script,
https://www.google.com/uds/api/visualization/1.0/84dc8f392c72d48b78b72f8a2e79c1a1/format+ru,default+ru,ui+ru,table+ru,corechart+ru.I.js,
is invoked via document.write. This may be blocked by the browser if
the device has poor network connectivity. See
https://www.chromestatus.com/feature/5718547946799104 for more
details. google.loader.f #
jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table'],'…:22
(anonymous) #
jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table'],'…:54
I was trying to find this out as well - all of my searching indicates that there is no way of direct linking the charts API (which is a shame). I eventually ended up using the image charts API instead:
https://developers.google.com/chart/image/
Related
I'm trying to get Slick Nav working and I'm currently testing it unsuccessfully on an empty page online. Locally it works perfectly, but it just doesn't want to run online - even if its the identical code. I have put the files from the "dist" folder from the slick nav download into a folder called "SlickNav" on my main folder on my FTP-Server (just like I did it locally). My test page contains the following:
<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>
// I already tried putting my URL before the link rel and the script src above but it didn't help
<script>
$(function(){
$('#menu').slicknav({
label: "MENU"
});
});
<ul id="menu">
<li><a class="scroll" href="#features">Features</a></li>
<li><a class="scroll" href="#usage">Usage Instructions</a></li>
<li><a class="scroll" href="#examples">Examples</a></li>
<li>View on Github</li>
</ul>
I'm trying this for over 3 hours now and I just don't see it anymore.. perhaps someone had similar problems or simply sees the (probably dumb) mistake, I would be eternally grateful..
Found the solution after inspecting the console: For the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
which I simply copy and pasted had to be changed to match the https of my site -> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
im currently building a flask application which uses websockets. For this i would like to use the flask-socketio library. I have copied the client example as per the docs instructions:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('connect', function() {
socket.emit('hello', {data: 'Hello there!'});
});
</script>
and a simple server side handler:
#socketio.on('hello')
def handle_hello(message):
print message
however i get the following error in the borwserwindow console:
Uncaught TypeError: Cannot read the property 'onClose' of null.
Anybody know what im doing wrong here?
thats cuz you're fetching the wrong javascipt file for socket.io in your client app.
change
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.6/socket.io.js">
I have encountered the same problem.
The reason is not compatible with python module.
You can try to install these versions.
gevent-1.1b1
greenlet-0.4.9
Flask-SocketIO-0.6.0
It's workd for me.
I have the same problem, when i change version from 0.9.16 to 1.3.6 it worked for me.
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
I would like to load MathJax in my base template with:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript"
src="{% static "js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" %}">
</script>
However in the rendered template the URL is returned as:
/static/js/MathJax/MathJax.js%3Fconfig%3DTeX-AMS-MML_HTMLorMML
and MathJax doesn't work.
If I hard-code the URL as src="/static/js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" it works. How can I prevent Django/Mezzanine from escaping the ? and = characters? Is there an alternative approach?
[The reason I want to use a local MathJax is for development when I'm away from an internet connection; I use a CDN in production.]
I would try moving the config parameter outside the static reference and see if that helps:
<script type="text/javascript"
src="{% static "js/MathJax/MathJax.js" %}?config=TeX-AMS-MML_HTMLorMML">
</script>
I don't know Django or Mezzanine, but if the static is what is encoding the URL characters, moving them outside might prevent that.
I'm new to developing for Facebook. I'm actually writing an app for a university course.
I followed the tutorials on the developer website, and they originally worked like a charm. I used the example which produced a login with Facebook button, and another page which would retrieve information from the logged in user and display it on the page.
I left it for a couple of weeks to work on other commitments, now this code doesn't work. Whereas before it would list the profile picture, name, email etc. Now it just says undefined. The only thing I could put it down to was that I had been using something which had been depreciated, since I'd now switched over to the timeline for my Facebook account (however why would the original example I used still be the first set of tutorials on the developer website https://developers.facebook.com/docs/guides/web/).
I also went to the Open Graph page on the developer website, they have a tutorial there which just displays a picture of a cookie and then adds the app to your timeline (I'm sure you're all familiar with it). That doesn't work either! It just brings up a blank box which immediately vanishes (doesn't ask me to authorise anything) and doesn't add anything to my timeline.
I've tried looking at my app settings but I can't see anything odd.
Probably you are using some deprecated functions.
First thing to do is to make sure you have an application created on facebook, and that the site URL on the settings of the application is the site that you are writing your application (example: http://locahost/application_name). Also, take note of the application id (you can find all these settings on https://developers.facebook.com/apps/).
Now that you got this, here is working example for extracting information for your user (replace "YOUR_APP_ID" with your application ID:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/default.css" />
<script type="text/javascript" src="js/jquery-ui.min.1.8.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui.min.js"></script>
<script type='text/javascript' src="js/main.js"></script>
<script type='text/javascript' src='js/default.js'></script>
<script language="JavaScript">
function get_feed()
{
FB.api('/me', function(response) {
alert(response.name);
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="login"></div>
<div id="test"></div>
<div id="stream"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
window.location.reload();
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// logged in and connected user, now get the facebook info
get_feed();
document.getElementById('login').innerHTML
='Logout fom Facebook<br/>';
} else {
document.getElementById('login').innerHTML
='<fb:login-button show-faces="true" width="200"'
+ ' max-rows="1" perms="user_about_me, user_likes, friends_likes, read_stream, publish_stream">'
+ '</fb:login-button>';
FB.XFBML.parse();
}
});
</script>
</body>
</html>
Hope it helps.
I got the Facebook login/logout functionality to work, but had to do it with this un-elegant code like this:
<script type="javascript">
function loadfb() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<body onload="loadfb()">
I plan on putting that Facebook login button on all the pages of the site, so I really don't want to have this function called onload of every page.
Is this function necessary? I don't completely understand what it is for. What is a better way to do this so I can take it out of my onload?
Thanks!
This code is for asynchronous loading of the Facebook JavaScript SDK. What it does is create the tag
<script async scr="https://connect.facebook.net/es_LA/all.js" ></script>
inside the <div id="fb-root"></div> element. While loading the SDK asynchronously is considered better practice, you can leave out this code and manually enter the script tag yourself - eg:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script>
FB.init({
...
});
</script>