Ajax is not working with remote server in VPN - javascript

I am trying to access a json file from a remote server using Ajax and plot and then trying to plot the graph using jqplot.
I doubt that my Ajax is not working with the remote server. the same url I can access from my browser but Ajax is not working with the same. Below is my code....Can anyone please highlight the mistake I am making:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script src="jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript" ></script>
<script src="jqplot.ohlcRenderer.js" type="text/javascript"></script>
<script src="jqplot.highlighter.js" type="text/javascript"></script>
<script src="jqplot.cursor.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://172.xx.xxx.xxx/mc_measurement_new1.json",
type: "GET"
dataType: "jsonp",
crossDomain:true,
contentType:'application/json; charset=utf-8',
success: function (data) {
populateGraph(data);
}
});
function populateGraph(ret) {
var line1 = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
line1.push([ret[i].id, ret[i].res]);
}
var plot2 = $.jqplot('chart1', [line1], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'ID',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Delay',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
};
});
</script>
</head>
<body>
<div id="chart1" style="height: 400px; width: 600px;"></div>
</body>
</html>


When you use jsonp as the datatype, you must provide a callback, you don't have to use the success option.
Check out the jQuery api docs: http://api.jquery.com/jQuery.ajax/
Look for jsonp and jsonpCallback options.

Related

d3js / epochjs Cannot read property 'length' of undefined

I really can`t figure out whats going wrong here.
I try to draw a line-chart with epoch using JSON-data.
JSON Formatter & Validator says it`s valid JSON.
Epoch/D3 does not render the chart, instead I get a "Uncaught TypeError: Cannot read property 'length' of undefined" in d3.js in the console.
I tried different versions of d3, the newest as well as v3.5.17 as described in this issue: https://github.com/epochjs/epoch/issues/226
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/epoch.min.css" type="text/css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/d3.js"></script>
<script src="js/epoch.js"></script>
</head>
<body>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
$('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","value":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]
});
</script>
</body>

A quick read at the documentation will show you that instead of value:
data: [{"label":"LabelA","value":[...
It has to be values:
data: [{"label":"LabelA","values":[...
Here is the demo with your corrected code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.js"></script>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
var linechart = $('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","values":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]});
</script>

python script not running using AJAX call

I am calling a python script using AJAX call as follows,the issue am running into is the python script doesn't seem to be running,can anyone provide pointers on how to debug this?what am I doing wrong?
Javascript:-
$.ajax({
type: "POST",
url: "image.py", //Running this generates line_graph.png
//data: { param: text}
}).done(function( o ) {
document.getElementById("myImg").src="line_graph.png";
});
HTML:-
<html>
<head>
<title>Image</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<img id="myImg" src="sample.png" alt="Line graph" width="600" height="600">
<script src="image.js"></script>
</body>
</html>

jQuery .ajax error handling

I'm trying to use jQuery.ajax() to retrieve an html code snippet from table_snippet.html and then replace the element in my html code. My error handler in jQuery.ajax() is being executed instead of the desired success handler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<link href="address-data-file.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ajax_goodness.js" type="text/javascript"></script>
</head>
<body onload="func()">
<div id="div_id">
<p>Use AJAX to retrieve the file table-snippet.html and then replace the div with the contents of that file.</p>
</div>
</body>
</html>
function func(){
jQuery.ajax({
type: "GET",
url: "table_snippet.html",
dataType: "html",
success: function(data){
$("#div_id").html(data);
},
error: function(){
alert("fail");
}
});
}

$(function () {
$.ajax({url:"table_snippet.html",success:function(result){
$("#div_id").html(result);
}});
});

I am wondering why I cannot override jquery function onRegionOver. The WAMP index.html file is shown below

I am wondering why I cannot override jquery function onRegionOver. The WAMP index.html file is shown below. Please tell me how I can use the WAMP console to debug this problem.
The jquery plugin I am trying to make work on my Windows 7 Internet Explorer IE7 browser here is http://jvectormap.owl-hollow.net/.
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-1.1.1.css"
type="text/css" media="screen"/>
<script src="jquery.js"></script>
<script src="jquery-jvectormap-1.1.1.min.js"></script>
<script src="us-aea-en.js"></script>
</head>
<body>
<div id="USA-map" style="width: 1200px; height: 800px"></div>
<script language="javascript">
function processOrder() {
var pluginContainer = $("#USA-map");
pluginContainer.vectorMap(
{map: 'us_aea_en'},
{onRegionOver: function(event, code){
alert('Hello');
}
});
}
</script>
<script type="text/javascript" src="foo.js"></script>
</body>
</html>

.vectorMap() function accepts a single object with multiple parameters, while you're passing 2.
Presumably the call should look like:
pluginContainer.vectorMap(
{
map: 'us_aea_en',
onRegionOver: function(event, code){
alert('Hello');
}
}
);
References:
http://jvectormap.com/examples/world-gdp/
http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/

BBC glow carousel: Error: glow.widgets is undefined

I use BBC carousel http://www.bbc.co.uk/glow/docs/1.7/furtherinfo/widgets/carousel/. Here is my script code
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>
it generates Error: glow.widgets is undefined. What am I doing wrong?

Ok, I figured out the problem: You're not including the widgets script or css, per the Widgets section of http://www.bbc.co.uk/glow/docs/articles/getting_started.shtml
So, to resolve your error, you need to modify your script so that it looks like this:
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script src="/themes/javascript/glow/1.7.7/widgets/widgets.js" type="text/javascript"></script>
<link href="/themes/javascript/glow/1.7.7/widgets/widgets.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>

Categories