As you may see below, I created the function getChart();
It works when called by itself, but does not display the chart when I wrap it into $(document).ready(function(){...});
I also attached the file..
Any help is highly valued and appreciated.. thanx..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getChart(){
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
// Populate the data table.
var dataTable = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
chart.draw(dataTable, {legend:'none', width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
}
$(document).ready(function(){
$('#idbutton').click(function(){
getChart();
});
});
</script>
</head>
<body>
<input id="idbutton" type="button" value="button" />
<div id="visualization"></div>
</body>
</html>
Try to attach it to the window object.
Something like
$(document).ready(function(){
window.getChart = function() { //Code of getChart here };
});
And call it with:
$(document).ready(function(){
$('#idbutton').click(function(){
window.getChart();
});
});
Note: I did not test it.
Related
Unable to get URL from JSON, when I tried it is displaying undefined. any advice?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
function a()
{
$.getJSON("https://tbe.taleo.net/MANAGER/dispatcher/api/v1/serviceUrl/UDAY",function(data) { alert(JSON.stringify(data));});
}
</script>
</head>
<body>
<input type="button" value="GET JSON" onclick="a()"/>
</body>
</html>
Below is the JSON from which I am trying to get the URL Value
{
"response": {
"URL": "https://chm.tbe.taleo.net/chm02/ats/api/v1/"
},
"status": {
"detail": {},
"success": true
}
}
Is there a better way to do this? and I am not using function-as-variable declarations so shall I use a semicolon after a curly bracket I mean after a function declaration
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
window.onload = function a(){
$.getJSON("https://tbe.taleo.net/MANAGER/dispatcher/api/v1/serviceUrl/UDAY",function(data) {
var innerHtml = "";
document.getElementById("CWS_URL").href=(data.response.URL).substr(0,(data.response.URL).indexOf("ats"))+"ats/careers/jobSearch.jsp?cws=1&org=UDAY";
});
}
</script>
</head>
<body>
<a href="#" id ="CWS_URL" >Careers</a>
</body>
</html>
Complete sample:
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#btn').click(function() {
$.getJSON(
'https://tbe.taleo.net/MANAGER/dispatcher/api/v1/serviceUrl/CODE',
function(data) {
alert(data.response.URL);
}
);
});
});
</script>
<input type="button" id="btn" value="Get JSON">
Result: https://jsfiddle.net/logual/mpmzpcfL/
Don't use pure JavaScript's event instructions when jQuery available. For example: onclick="a()". Remove It from your HTML code.
I have the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function () {
$("#dialog").dialog({modal: true, height: 590, width: 1005 });
});
});
</script>
</head>
<body>
<a href="" id="submit">
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
</body>
</html>
when i run this code in ie it works fine and pops up the window no problem. But when i run this in firefox it just refreshes the page. Anyone know how to fix this and why its happening?
I see 2 things
1) Prevent link default behavior (navigate to href url, in this case, current page) using event.preventDefault
$("#submit").click(function (e) {
e.preventDefault():
$("#dialog").dialog({modal: true, height: 590, width: 1005 });
});
2) Your a tag is incorrect, it never closes. Not sure if this is a copy paste mistake or your real html.
I would like to create multiple strings within this same function and make this code more useable across website.
My JS code look like this:
function() {$(".tool-tip-wrapper").click(function () {
$(".tool-tip",this).html("<img src='/images/ui-elements-sprite.png' class='top-arrow'><p>This is string one.</p><div class='close'></div>").toggle('fast');
});
My html code look like this:
<div class="tool-tip-wrapper"> click me
<div class="tool-tip"></div>
</div>
Below markup will solve the issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tool-tip-wrapper").click(function(){
$(".tool-tip",this).html("<p>"+this.title+"</p><div class='close'></div>").toggle('fast');
});
});
</script>
</head>
<body>
<div class="tool-tip-wrapper" title="This is string one.">
click me
<div class="tool-tip"></div>
</div>
</body>
</html>
I am using this script for PNG fixes for IE6.
I've noticed that when I clone an element, the cloned PNG's are unfixed even though they have the proper classes attached, and I'm unable to re-apply the fix. I'm using jquery to clone an element, and have to use clone(false,false) for extensive reasons...is there a way I can apply the fix to the new element after appending the clone? Calling DD_belatedPNG.fix(".pngfix") again does not seem to work.
Rather than use a png fix, just use transparent PNGs that are supported by IE (paletted 8-bit with alpha). ImageAlpha will do this for you if you are using a Mac, otherwise you can use pngquant (which ImageAlpha is based on) to do this for you.
Javascript/IE Filter type stuff is not needed to solve this problem, and should be avoided.
This solution is for img elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background:#0000FF;
}
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
$(document).ready(function () {
function imageClickHandler () {
var $newA = $("<a></a>")
var $newImg = $(this).find('img').clone(false,false);
$newImg.attr("style","");
$newA.append($newImg);
$newA.click(imageClickHandler);
$(this).parent().append($newA);
DD_belatedPNG.fix('img');
}
DD_belatedPNG.fix('img');
$('a').click(imageClickHandler);
});
</script>
</head>
<body>
<a><img src="image.png" /></a>
</body>
</html>
EDIT
this solution is for bg elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background:#0000FF;
}
a {
display:inline-block;
//display:inline;
zoom:1;
width:512px;
height:512px;
background:url(image.png) no-repeat center center;
text-decoration:none;
outline:none;
}
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
$(document).ready(function () {
function imageClickHandler () {
var $newA = $(this).clone(false,false);
$newA.removeAttr("style isImg vmlInitiated vmlBg");
$newA.click(imageClickHandler);
$(this).parent().append($newA);
DD_belatedPNG.fix('a');
}
DD_belatedPNG.fix('a');
$('a').click(imageClickHandler);
});
</script>
</head>
<body>
<a></a>
</body>
</html>
i have the following map of the world:
<!--
copyright (c) 2009 Google inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'Germany');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 400);
data.setValue(3, 0, 'Canada');
data.setValue(3, 1, 500);
data.setValue(4, 0, 'France');
data.setValue(4, 1, 600);
data.setValue(5, 0, 'RU');
data.setValue(5, 1, 700);
var geomap = new google.visualization.GeoMap(
document.getElementById('visualization'));
geomap.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>
instead of displaying a map of the entire world i would like to know how to display just the US?
From your example, set the region option on the geomap:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
var geomap = new google.visualization.GeoMap(
document.getElementById('visualization'));
var options = { region: 'us_metro' };
geomap.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>
Not quite sure why you are setting the popularity of other countries to just center on the US though.