Why isn't the JSONP callback function getting invoked? - ajax

I am trying to use jsonp to access the data at:
https://github.com/users/jbranchaud/contributions_calendar_data
However, none of the solutions I have tried are resulting in either the callback or the success function getting invoked. When I use Chrome/Firefox inspection tools, I can look at the script and see that the response was 200 Ok and that the response text contains the data from the above URL. Nevertheless, neither the callback function nor the success function get called at any point. Any ideas about how to get this to work?
Here is my most recent attempt at getting this to run:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function parseResults(results) {
console.log('hello function callback.');
}
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: true,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});
</script>
When I load the page, I see the 'error with jsonp request' in the console, so there is an error with the ajax request. Ideas of why this request isn't succeeding?

In the ajax request, try to set the attribute 'jsonp' to false (jsonp: false).
Basically, JQuery generate an automatic function callback name, like this : JQuery1223...34.
In your case, you ,already, explicitly set the jsonpCallback function name. so you have to put jsonp attribut to false.
your code should be like this :
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: false,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});

Related

Does JSONP response need callback in response

I'm not clear if my response to a JSONP call needs to have the callback reference in the response. For example, the following AJAX call:
$.ajax({
type: 'GET',
url: ajaxurl ,
async: false,
dataType: "jsonp",
jsonpCallback: "do_teacher_survey_callback",
data: {action: 'test'},
success: function (result) {
},
error: function (request,error) {
}
});
Does the response need to look like the following:
do_teacher_survey_callback({"field":"data"})
Or can I just return pure JSON like this:
{"field":"data"}
I'm confused because I have used JSONP before to resolve cross-domain calls to servers that I had no control over the response and it worked fine.

jQuery.ajax POST request converted to GET

I have the following jQuery code:
$.ajax({
url: Url,
dataType: 'JSONP',
type: 'POST',
success: function (data, textStatus, jqXHR) {
//callback function here
},
error: function (xhr, ajaxOptions, thrownError) {
//report error
}
});
However, when i view this AJAX request in Fiddler, my request has been converted from a POST to a GET.
This is not allowed with the API I'm connecting to, as it must be a POST request.
Why is this happening?
JSONP requests can only be GETs.
Remove dataType: 'JSONP'.
dataType: 'JSONP',
is always a GET request
You cannot use POST with JSONP see https://groups.google.com/forum/?fromgroups=#!topic/jquery-dev/5-tKI-7zQvs for more detail on this.

How to use an ajax call's response to manipulate a dynamic page?

I am trying to submit a form with the user's inserted data and get the html back from the page called (update.asp).
How do I get the html response and how do I write it to a div on the page? The response would be "success".
If my page throws a 500 or other type of error, how can I handle that?
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// how do i catch the response? is this the right place?
},
error: function(data) {
// how do I catch the error code here?
}
});
The response from the server in both cases would be passed to the callback as the data variable in your example. Try using console.log(data) inside of your callbacks to see the result in your developer console.
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('#myForm').serialize(),
success: function(response) {
$("#yourDIV").html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError); //output, 500
}
});
});
More on this: ajax()

How do I know if a JSON string has loaded?

Forgive me, I am a complete JSON newbie here. I'm trying to load a file of json information from an external file, and I'm not sure how I can tell if the information has loaded or not. Here's what I have so far:
$(document).ready(function(){
$.ajax({
dataType: 'json',
success: function(string) {
data = $.parseJSON(string);
console.log(data);
alert(data);
document.write(data);
},
url: 'http://www.site.com/mystuff.php'
});
});
I've tried putting all kinds of stuff to see if the info has loaded, as you can see, and nothing has. How do I know if I've even gotten anything? I would really appreciate any help!
As already pointed out, two things:
You don't need to parse the string when setting the datatype as JSON
Check if the request returned successfully at all
Which could look like this:
$(document).ready(function(){
$.ajax({
dataType: 'json',
success: function(json) {
console.log(data);
},
error : function(xhr, text) {
console.log('An error occurred', xhr, text);
},
url: 'http://www.site.com/mystuff.php'
});
});
When setting the datatype to JSON you also have to make sure that mystuff.php sets the Content-Type header to application/json:
<?php
header('Content-Type: application/json');
?>
No need to parse to json again.. you can directly use the object
Also add the error Function to keep a check if you are getting any error..
$(document).ready(function(){
$.ajax({
dataType: 'json',
beforeSend : function() {
console.log('Before Ajax Request Starts !!');
},
success: function(data) {
console.log(data);
alert(data);
document.write(data);
},
error : function(jqXHR, textStatus, errorThrown) {
alert("Error occurred: " + errorThrown);
},
beforeSend : function() {
console.log('Ajax Request Complete !!');
},
url: 'http://www.site.com/mystuff.php'
});
});
This makes sure you have feedback at every step..

Jquery: probleme with $.ajax (json datatype)

I have a problem to refresh a bloc in my page.
Here is the request:
> $("#pwd_lost_link").click(function(){
alert('1');
$.ajax({
type : 'POST',
url: 'test.php',
dataType: 'json',
data :{"nom" : "akbar"},
success : function(data){
$("#main_bloc").append(data.msg);
alert('2');
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
alert(errorThrown); }
}); })
and here is the php file
<?php
$return['nom'] = "ffrfrfrfr";
echo json_encode($return)
?>
It doesn't work. It give me a status error ( 0 ) and the page is automatically reloaded
Thanks
Michaƫl
Confusing question Michael, not sure what you mean by "the page is automatically reloaded" but you should do 2 things:
In the $.ajax() method, make sure your success called back is handling the data correctly. You are looking for data.msg but I don't see where .msg comes from.
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
url: url,
success: function(data) {
// parse data object so you can see what's being returned ex. alert(data) or alert(data[0]) or alert(data.nom)
},
error: function (xhr, status, error) {
// XHR DOM reference: http://www.w3schools.com/dom/dom_http.asp
// check for errors ex. alert(xhr.statusText);
}
});
On the PHP side, you may want to debug there to see what is being received and what you are sending back.
Aside from that using an XHR viewer like Firebug or Chrome's built-in utility (CTRL+SHIFT+I) can be very helpful.
And on a final note, if pwd_lost_link is a link elment a id="pwd_lost_link" href="..." then you will have to stop the browser from following the link before you process the AJAX.
$("#pwd_lost_link").click(function(e) {
e.preventDefault();
alert('1');
$.ajax({
...
});
If you aren't seeing the '1' being alerted then that is definitely your first problem.
You're trying to access data.msg, but your PHP script is only creating data.nom. So data.msg doesn't exist. Try changing data.msg to data.nom and see if this does what you want.

Resources