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>
Related
this is my 1st javascript attempt and I'm getting the following in the chrome console:
"Uncaught ReferenceError: test1 is not defined."
I'm trying to send an Ajax request via onclick button event and display the data in the document. However, due to the error, I've scoped back to hello-world just for a debug attempt. Pardon this kind of question as I know its very elementary.
Any help is appreciated. Thanks for your time!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
function test1(){
alert("Hello, World");
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
}
</script>
</body>
</html>
You used only one script tag for loading jquery and for your method - that will not work... "If a script element has a src attribute specified, it should not have a script embedded inside its tags." here a working solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
}
</script>
</body>
</html>
You can't place your javascript code in same <script> tag where you linked an external file (it shouldn't be included in <script src="..."> function </script>). Your test1 function should be separated from scr javascript tag. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">/<script>
<script> your javascript function should be here </script>
Hope this will solve your problem.
Put the JavaScript in the head of your document, and separate out the script for including jquery and your actual code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
}
</script>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>
You haven't placed your javascript method in proper javascript tag, separately place javascript method and javascript src, please check below for more clarification:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
function test1() {
alert("Hello, World");
}
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
</script>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>
First off, you need to declare your JavaScript function before you call it.
Change to this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
<script>
function test1(){
alert("Hello, World");
}
</script>
<button onClick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>
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.
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 found a program which is sending the data from the form to php file from jquery. But when I have tried to find it, it is displaying nothing. When I am clicking on the Load Data button nothing is coming. Is something wrong in the program ?
main.php
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
index.html
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Please resolve the problem. Thanks in advance
Your <script> tag for loading jQuery has an invalid href attribute.
Remove the ending slash from the address so it looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use your browser's developer tools to find out what's wrong with your clientside script, they're really handy. Hit F12.
try this code:
$(document).ready(function() {
$("#driver").click(function(event){
$.post( "main.php", { name: "Zara"})
.done(function( data ) {
$('#stage').html(data);
});
});
});
for detail see link
Please the version of this file:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
code:
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert('hi');
$("#driver").click(function(){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
I'm loading a reCaptcha using ajax. One of the lines in there from what gets returned from the other pages is the line below, and that line wont get loaded into my div when I use $(.cap).html(callBack);
This is the line
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
Is this something that jQuery disallows? Or am I doing something wrong? How can I solve this? How can I get jquery returned from another page, into my <div>?
What I'm testing with, is simple:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Tile</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script>
<style type="text/css">
.user {
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//$(".user").live("click",function() {
$(".user").click(function() {
data = "id=Hello"
$.ajax({
type:"GET",
url:"demo.php",
data:data,
dataType:"html",
beforeSend:function(html){
},
success: function(callBack){
$(".cap").html(callBack);
console.log(callBack);
},
error: function(page_data){
},
});
});
});
</script>
</head>
<body>
<div id="container">
<div class="cap">Hello</div>
<span class="user">Add User</span>
</div>
</body>
</html>
This is the line returned from the other page that wont get loaded into the div.
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
The entire data returned
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
It is not possible to return "script" tags, even in a string format. This is because of the way javascript works. You could however let your demo.php script return json. You should look that up yourself, but I don't believe there is another way to do this easily.
(well, worse practice, you could just return a string and parse the values out of it but ...). Anyway, if you assume you return a json object in the following format, you could just copy paste the rest in your success function and alter the object name to 'callback' ...
var json = {
type: "text/javascript",
scriptSrc: "http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n",
id: "theFrame",
iframeSrc: 'http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n'
};
var script = document.createElement('script');
script.type = json.type;
script.src = json.scriptSrc;
$('<iframe>', {
src: json.iframeSrc,
id: json.id,
frameborder: 0,
height: 300,
width: 500
}).appendTo('.cap');
jsFiddle: http://jsfiddle.net/vT3Ug/1/
It actually is possible to render javascript tags. e.g. html5 boilertemplate uses it to see if it should load jQuery local or from CDN.
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
As you can see if you inject script tags you need to escape the closing script tag <\/script>.
On the other hand, you can't do this
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
simply because you do not own the iframe source, your iframe won't get rendered.
But you could do something like this:
callBack = callBack.replace('</script','<\/script')
.replace('<noscript>','')
.replace('</noscript>','');
$('body').append(callback);