I'm trying to handle callback of jsonp request, but callback function is not run.
$(document).ready(function() {
$.ajax({
url: 'https://storage-testnet.shiftproject.com/peers?callback=?',
type: "GET",
dataType: 'jsonp',
jsonpCallback: 'peersData',
complete: peersData
});
var peersData = function (data) {
if(!data){
console.log("Error, can't retrieve data");
} else {
console.log(data)
}
}
}
Is there some mistake?
Your data is not wrapped in a pad eg. the following
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
//credit https://www.sitepoint.com/jsonp-examples/
function jsonCallback(json) {
console.log(json);
}
$.ajax({
url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
dataType: "jsonp"
});
</script>
https://jsfiddle.net/kblau237/pmw0yah9/5/
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut156</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#theButton").click(function () {
//moved your stuff inside a button click
$.ajax({
//question mark for callback will cause jquery to generate a random callback
//I am taking out the callback
url: 'https://storage-testnet.shiftproject.com/peers',
type: "GET",
dataType: 'json',
success: function (data) {
alert(JSON.stringify(data));
}
});
})
})
</script>
</head>
<body>
<div>
<input type="button" id="theButton" value="Go" />
</div>
</body>
</html>
Related
I'm starting to work with vuejs and I'm trying to make a http get call without sucess. I've tried several example showing how to do that but I get the following error in my console: this.$http is undefined.
html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p v-bind:title='message'>
{{ message }}
<p>
<button v-on:click='changeView("matrice")'>get data</button>
</div>
</body>
<script type="text/javascript" src="/front/lala_web/matrice.js"></script>
</html>
js
var app = new Vue({
el: '#app',
data: {
message: 'Empty data'
},
methods:{
changeView: function(v){
this.$http.get('/view/'+v)
.then(function(resp){
this.message = resp.data;
})
.catch(function(){alert('Error')});
}
}
})
I'been able to get a http get call working using the following js, but doing so doesn't change data.message value of vuejs and I get the following error data is not defined.
js
var app = new Vue({
el: '#app',
data: {
message: 'Empty data'
},
methods:{
changeView: function(v){
var viewUrl = '/view/'
$.ajax({
url: viewUrl+v,
method: 'GET',
success: function (resp) {
if (resp.error == false){
console.log(resp)
data.message = resp.data
}
},
error: function (error) {
console.log(error)
}
});
}
}
})
You need to reference this.message not data.message. Also, you'll need to save a reference to this outside the scope of the ajax call, since this in the success handler doesn't refer to the Vue instance:
changeView: function(v){
var viewUrl = '/view/'
var self = this;
$.ajax({
url: viewUrl+v,
method: 'GET',
success: function (resp) {
if (resp.error == false){
console.log(resp)
self.message = resp.data
}
},
error: function (error) {
console.log(error)
}
});
}
Here I wrote A code which fetches data from API http://fcctop100.herokuapp.com/api/fccusers/top/recent and displays on console for starter but I'm Getting Error Like "parsererror" "Error: jQuery21106393266040831804_1456914722748 was not called"
var App = React.createClass({
//setting up initial state
getInitialState:function(){
return{
data:[]
};
},
componentDidMount(){
this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent');
},
//showResult Method
showResult:function(response){
console.log(response);
this.setState({
data:response.results
});
},
//making ajax call to get data from server
getDataFromServer:function(URL){
$.ajax({
type:"GET",
dataType:"jsonp",
url:URL,
success: function(response) {
this.showResult(response);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render:function(){
return(
<div>
<Result />
</div>
);
}
});
var Result = React.createClass({
render:function(){
return(
<div>
<ul>
<ResultItem/>
</ul>
</div>
);
}
});
var ResultItem = React.createClass({
render:function(){
return(
<div>
<li>Hello This Is From ResultItem Component</li>
</div>
);
}
});
ReactDOM.render(
<App />,
document.querySelector("#app")
);
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>React Tutorial</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>
Your API returns JSON, you don't need use JSONP, just change dataType from jsonp to json
$.ajax({
type: "GET",
dataType: "json",
....
});
and in showResult set only response because response contains Array of Objects and does not have results property
this.setState({
data: response
});
Example
Why does this simple ajax show an alert with "error"?
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$.ajax({
url: "http://www.google.com",
success: function(data) { alert(data); },
error: function(req, err) { alert(err);}
});
});
</script>
You can't directly do this with javascript but there are alternative ways to do it if you are using a server.
javascript part:
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "http://yourserver/geturl.php?url=http://www.google.com",
// or url: "http://yourserver/geturl.aspx?url=http://www.google.com",
success: function(data) {
alert(data);
},
error: function(req, err) {
alert(err);
}
});
});
</script>
the server part (for geturl.php):
<?php
echo file_get_contents($_GET["url"]);
?>
or the same logic with asp.net.
the key part is here, that the code runs the javascript and php(aspx) should be on the same domain.
i dont know what is actual problem in the below code, but it doesn't work as i expected.
<html>
<head>
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#clickme').click(function(){
var uid="sekar#example.com";
var upass="sample";
$.ajax({
type : 'GET',
url : 'http://www.example.com/test.php',
data: {
em : uid,
pass : upass,
action : 'check'
},
success : function(msg){
alert(msg);
},
error : function(XMLHttpRequest, textStatus, errorThrown){alert(errorThrown);}
});
});
});
</script>
</head>
<body>
<input type='button' value='click' id='clickme' />
</body>
</html>
In that test.php i simply tried to echo "hello world" or echo $_GET['action']
But none of this worked i got only empty message? can some one help me in this issue?
Thanks!
There is no error in your code. But never pass your passwords using GET.
I create two files test.html and test.php.
Code of test.html:
<!-- language: html-->
<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#clickme').click(function(){
var uid="sekar#example.com";
var upass="sample";
$.ajax({
type : 'GET',
url : 'test.php',
data: {
em : uid,
pass : upass,
action : 'check'
},
success : function(msg){
alert(msg);
},
error : function(XMLHttpRequest, textStatus, errorThrown){alert(errorThrown);}
});
});
});
</script>
</head>
<body>
<input type='button' value='click' id='clickme' />
</body>
</html>
code of test.php:
<!-- language: php -->
<?php
echo $_GET['action'];
?>
Is it because data has to be a string?
data: "em="+uid+"&pass="+upass="&action=check",
Ajax Jquery form not working vs div why its happen and how can i fix my error?
view.html-Code with form
not working
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<form id="parse-form" action="#" method="post">
<button type="submit" id="submit-html">submit ajax request without parameters</button>
</form>
<div>array values: <div id="array-values"></div></div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit-html').click(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType:'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function (i, elem) {
$('#array-values').append('<div>'+elem+'</div>');
});
}
});
});
});
</script>
</body>
</html>
view.html -form replaced by div
working
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="parse-form">
<button type="submit" id="submit-html">submit ajax request without parameters</button>
</div>
<div>array values: <div id="array-values"></div></div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit-html').click(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType:'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function (i, elem) {
$('#array-values').append('<div>'+elem+'</div>');
});
}
});
});
});
</script>
</body>
</html>
controller.php -simple php file that return json array:
<?php
$arr=array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>
Thanks
The form has a default action with a type="submit" button, which is submitting, so you'll need to stop that from happening by adding return false or event.preventDefault() , like this:
$(document).ready(function() {
$('#submit-html').click(function(e) {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType:'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function (i, elem) {
$('#array-values').append('<div>'+elem+'</div>');
});
}
});
return false;
//or e.preventDefault();
});
});
Without this, the form is submitting as it normally would with no JavaScript, leaving the page. So effectively it's doing a refresh, instead of AJAX submitting your form (which doesn't have time to complete...because you left :)
An element of type=submit inside a <form> will perform the form request when clicked on.
You need to abort the default behavior by running event.preventDefault() inside the click callback.
My guess is that the form is submitting and refreshing the page before the ajax has a chance to respond.
Try putting return false; at the end of the click handler.
$('#submit-html').click(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType: 'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function(i, elem) {
$('#array-values').append('<div>' + elem + '</div>');
});
}
});
return false;
});
Of course you'll have the same issue if the user hits Enter in one of the fields. Unless you're preventing the Enter key from submitting the form, you may want to the handle the event using the submit() handler.
$('#parse-form').submit(function() {
$.ajax({
url: 'controller.php',
type: 'POST',
dataType: 'json',
success: function(data) {
alert("response begin");
alert(data);
$.each(data, function(i, elem) {
$('#array-values').append('<div>' + elem + '</div>');
});
}
});
return false;
});
Try using submit() http://api.jquery.com/submit/ , this should work with keyboard events as well as clicks. You can use serialize() to get any form data into the ajax objects data variable.