I am trying to get some graph functionalities with corechart using JQuery but I am not able to get any document elements once the visualization APIs are loaded. Below is my sample example:
$(document).ready(function() {
if ($("#myId").length > 0) {
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.setOnLoadCallback(function() {
if ($("#myId").length > 0) {
alert("Found a match!!");
}else{
alert("Not found!!");
}
});
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="myId">Hello from Div!!</div>
</body>
</html>
I want the alert in my if block to be executed. I am loading the visualization packages only after the check for #myId but its lost(rather all the html elements) in the call back. Please advice