I'm making an Ajax request that works perfectly fine. The issue I'm having is that I attached the "error" method onto the call and when I modify the URL to try to make it throw an error....I get no error. Here is my code:
function instagramAjax () {
$.ajax ({
url: "url that works",
dataType: "jsonp",
success: function(returnedData) {
//my success code that works
},//end success
error: function(jqXHR, textStatus, errorThrown) {
console.log("Error " + errorThrown);
}
});//end ajax request
}//end instagramAjax function
What is the url that you'd set?
This handler is not called for cross-domain script and cross-domain JSONP requests.
window.MyCallback = function (data) {
console.log(data);
};
function instagramAjax () {
$.ajax ({
url: "url that works",
dataType: "jsonp",
crossDomain: true,
jsonpCallback: 'MyCallback',
success: function(returnedData) {
//my success code that works
},//end success
error: function (xhr, status, err) {
console.log(status, err);
}
});//end ajax request
}//end instagramAjax function
or you can do it:
function instagramAjax () {
$.ajax ({
url: "url that works",
dataType: "jsonp",
crossDomain: true,
jsonp: 'MyCallback',
success: function(returnedData) {
//my success code that works
},//end success
error: function (xhr, status, err) {
console.log(status, err);
}
});//end ajax request
}//end instagramAjax function
Related
I have a React Component which calls an AJAX POST request.
The POST request creates an entry in the database as expected. (status 201 returned) However the success/error methods of the same are not called.
$.ajax({
url: '/api/put/comment/',
dataType: 'json',
type: 'POST',
data: comment,
beforeSend: function(xhr) {
console.log('before send');
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
},
success: function(data) {
console.log('success');
this.loadData();
},
error: function(xhr, status, err) {
console.log('error');
this.setState({data:comments});
console.error(this.props.url, status, err.toString());
}
});
The request is called through a button click. Also the browser hangs once the request is made, and the solution is to open a new tab.
Also i do not see the POST request on the Network tab of Chrome, but see it on the backend.
Any hints?
Try using ES6 arrow functions or bind your functions with this
$.ajax({
url: '/api/put/comment/',
dataType: 'json',
type: 'POST',
data: comment,
beforeSend:(xhr) => {
console.log('before send');
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
},
success:(data) => {
console.log('success');
this.loadData();
},
error:(xhr, status, err) => {
console.log('error');
this.setState({data:comments});
console.error(this.props.url, status, err.toString());
}
});
I am using this method to send post request but it gives me error 500 internal error for jquery.1.11.1.min.js.
$(document).ready(function () {
$.ajax({
type: "POST",
url: '#Url.Action("cashondelivery", "Home")',
data: "",
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (result) {
alert(result);
},
error: function (data) {
alert(data);
}
});
});
//this is action method in controller
[HttpPost]
public ActionResult cashondelivery(productinfoModel mmodel)
{
return View();
}
try to call the url in DHC(chrome plugin),the response status code 500 means server internal error, it's the server-webapp developer's mistake. not your mistake.
The alert from done function is executing before success. Please help me. What am I doing wrong here:
function load_organization()
{
return $.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
});
}
});
}
$(document).ready(function(){
load_organization().done(function(){
alert('Success');
});
});
"Done" is a callback triggered from a running XHR instance with jQuery.
The doc says:
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, refer to deferred.done() for implementation details.
Take a look:
function load_organization()
{
$.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
});
}
})
// Use done here -> look official API doc for some explanations: http://api.jquery.com/jQuery.ajax/
.done(function(){
alert('Success');
});
}
$(document).ready(function(){
load_organization();
});
Hope this could help you in your solution
You are executing alert('Success'); when load_organization() is called. so irrespective of ajax, the message is displaying. You can alert the success in same single function. And .done() has only one callback and it is the success callback.
function load_organization()
{
return $.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
alert('Success');
});
}
});
}
I have a problem with my WCF service. I want to call it after some action. Here is ajax call:
$.ajax({
type: "Get",
async: false,
url: 'service_adress/DoWork',
success: function () {
alert("Success");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown);
}
});
Method do work should return string . When im putting service_adress/DoWork into adressbar in browser im getting correct response(< string>Something< /string>), but my ajax is throwing error NS_Error_failure. What is wrong here?
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()