JQuery Ajax call often not working on Safari 6 - ajax

My Ajax call is really simple as below:
function ajax(reqUrl, params , callback) {
console.log("Request URL "+reqUrl);
var cond;
cond = $.ajax({
type: 'post',
url: reqUrl,
data: params,
error:function(){ alert("some error occurred") },
success: callback
});
console.log("Server response "+cond.readyState);
}
// Call it as
var url = "/getResult";
var params = {};
params.param1 = "test1";
params.param2 = "test2";
ajax(url, params, function(returnCallback) {
console.log(returnCallback);
alert("Success");
});
That works fine in most cases. But sometimes (about 1 times in 3) it doesn't return anything to callback.
I found many questions and answers for Not working ajax in Safari but fine in chrome and FireFox. My problem is different from them, because it's fine most of the time (I don't mean it was not fine usually because when I refresh my browser, that may cause my ajax call to work).
My main question is why does my ajax call sometimes fail? I don't get any errors on my JS console. When this situation, I refresh my browser to get my ajax call to. Any Ideas?
Update:
I found that sometimes my ajax call method didn't call out because console.log("Request URL "+reqUrl); did not execute. When I don't want to refresh my browser, I clicked many times on my page's link to produce result. will something late to execute?

Finally, I found error .. Safari doesn't reload my JavaScript files again even disable Cache. So I put all of my JS code into:
$(document).ready(function(){
// start load my js functions
init();
});
to reload my JS files when my page was ready. Cheer !

I also met this problem.
When I moved all code into $(function() {}), it worked.
After that, I found I had defined a variable named key, which caused the problem.
Just rename it, all things will be running.

This seems to be a Safari issue. In this post there is a suggestion to add a beforeSend to your ajax-request.
In your case:
cond = $.ajax({
type: 'post',
url: reqUrl,
data: params,
beforeSend: function (event, files, index, xhr, handler, callBack) {
$.ajax({
async: false,
url: 'closeconnection.php' // add path
});
},
error:function(){ alert("some error occurred") },
success: callback
});

Please Test below Code. it is working fine.
$.ajax({
type: "POST",
url:'#Url.Action("getResult","Controller")',
data: "{userName :'" + userName + "',password :'" + password + "' }",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data) {
alert("here" + data.toString());
});

This is use for MVC application.
$.ajax({
type: "POST",
url:'getResult',
data: "{userName :'" + userName + "',password :'" + password + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("here" + data.toString());
});
For Asp.net Application :
$.ajax({
type: "POST",
url:'getResult',
data: "{userName :'" + userName + "',password :'" + password + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("here" + data.toString());
});
if u have still the issue than please post ur complete code here. i will test and reply soon

Related

Variable loses some value when used in Ajax API Call

I have an issue that causes my variable “tempid” to lose some of its values when put into the second API call. As you can see from my image, if I log the variable to console (console.log(tempid)) it shows just fine. However, as soon as I place it in an API call it has some of the value but not all. Could you please help me by explaining why this would happen?
[console example][1]
$(document).ready(function() {
$.ajax({
url: "/api/Template/GetTemplates?classId=7ac62bd4-8fce-a150-3b40-16a39a61383d",
async:true,
dataType: 'json',
success: function(data) {
$(data).each(function (data) {
if (this.Name === "Name of Template"){
var tempid = this.Id
console.log (tempid)
var tempurl = "/api/V3/Projection/CreateProjectionByTemplate?id=" + tempid + "&createdById=703853d4-ffc4-fce3-3034-0b838d40c385"
$.ajax({
url: tempurl,
async: false,
dataType: 'json',
success: function(data) {
}
});
}
});
}
});
})
[1]: https://i.stack.imgur.com/gyesK.png
I found the answer, the console is just showing a shortened version of the URL and happened to cut off part of the tempid. Thank you

.ajax JSONP parsererror

I'm trying to use an ajax call to bring back data from a web api. I wrote 2 similar functions and neither work. I can see the data come back through Fiddler, but it won't go to the success call, for both of the functions below. What am I doing wrong? The data comes back in both functions in Fiddler, it just doesn't go to success.
Here is attempt 1:
function PopulateDivisions()
{
$.support.cors=true;
$.ajax({
type:'GET',
url:'http://IP/Service/api/DivisionSearch/GetAllDivisions',
data: {},
contentType: 'application/json; charset=utf-8',
dataType: 'jsonp',
success: function(data) {
alert(data);
$("#divisionSelect").append($('<option></option>').val("-99").html("Select One"));
$.each(data, function(i, item){
$("#divisionSelect").append($('<option></option>').val(item.Name).html(item.Name));
});
},
error: function(xhrequest, ErrorText, thrownError) {
alert("Original: " + thrownError + " : " + ErrorText);
}
});
}
Error: jQuery19102671239298189216_1382022403977 was not called : parser error
Here is the data Fiddler is showing comes back:
[{"Id":1,"Description":"Executive","Name":"Executive "},{"Id":2,"Description":"ASD","Name":"Administrative Services Division "},{"Id":3,"Description":"COM","Name":"Communications "},{"Id":4,"Description":"CP","Name":"Contracts and Procurement "},{"Id":5,"Description":"PMD","Name":"Program Management Division "},{"Id":6,"Description":"RED","Name":"Research and Evaluation Division "},{"Id":7,"Description":"IT","Name":"Information Technology "}]
Here is attempt #2:
function PopulateDivisions2()
{
$.support.cors=true;
$.ajax({
type:'GET',
url:'http://IP/Service/api/DivisionSearch/GetAllDivisionsJsonP',
data: {},
contentType: 'application/json; charset=utf-8',
dataType: 'jsonp',
jsonp: false,
jsonpCallback: "myJsonMethod",
success: function(data) {
//data = JSON.parse(data):
alert(data);
$("#divisionSelect").append($('<option></option>').val("-99").html("Select One"));
$.each(data, function(i, item){
$("#divisionSelect").append($('<option></option>').val(item.Name).html(item.Name));
});
},
error: function(xhrequest, ErrorText, thrownError) {
alert("PopulateDivisions2: " + thrownError + " : " + ErrorText);
}
});
}
Error: myJsonMethod was not called : parsererror
Here is the data Fiddler shows is coming back:
"myJsonMethod([{\"Id\":1,\"Description\":\"Executive\",\"Name\":\"Executive \"},{\"Id\":2,\"Description\":\"ASD\",\"Name\":\"Administrative Services Division \"},{\"Id\":3,\"Description\":\"COM\",\"Name\":\"Communications \"},{\"Id\":4,\"Description\":\"CP\",\"Name\":\"Contracts and Procurement \"},{\"Id\":5,\"Description\":\"PMD\",\"Name\":\"Program Management Division \"},{\"Id\":6,\"Description\":\"RED\",\"Name\":\"Research and Evaluation Division \"},{\"Id\":7,\"Description\":\"IT\",\"Name\":\"Information Technology \"}]);"
contentType: 'application/json; charset=utf-8' Tells your server that you are sending JSON data, but you don't have any data you are sending. Try leaving that setting out.
If you were to brows to your url in the browser do you get json back?
I'm not sure if this would matter, but I would remove the error setting because it says in the jQuery Ajax documentation that This handler is not called for cross-domain script and cross-domain JSONP requests.
I would try to run this with the least amount of configuration like this:
$.ajax({
url:'http://IP/Service/api/DivisionSearch/GetAllDivisions',
dataType: 'jsonp',
success: function(data) { console.log(data); }
});
See if this works and then build on top of it. Without jsfiddle it's hard to debug what's going on.
Here is a link that should be a good resource for you: Basic example of using .ajax() with JSONP?
function PopulateDivisions2(){
$.support.cors=true;
$.ajax({
type:'GET',
url:'http://IP/Service/api/DivisionSearch/GetAllDivisionsJsonP?callback=?',
data: {},
contentType: 'application/json; charset=utf-8',
dataType: 'jsonp',
jsonpCallback: "myJsonMethod" });
function myJsonMethod(data) {
//data = JSON.parse(data):
alert(data);$("#divisionSelect").append($('<option></option>').val("-99").html("Select One"));
$.each(data, function(i, item){
$("#divisionSelect").append($('<option></option>').val(item.Name).html(item.Name));
});
}}
Can you try the above code? I have removed the success callback and included callback in query string.

jQuery send string as POST parameters

I want to send a string as an ajax Post parameter.
The following code:
$.ajax({
type: "POST",
url: "http://nakolesah.ru/",
data: 'foo=bar&ca$libri=no$libri',
success: function(msg){
alert('wow'+msg);
}
});
Is not working. Why?
Try like this:
$.ajax({
type: 'POST',
// make sure you respect the same origin policy with this url:
// http://en.wikipedia.org/wiki/Same_origin_policy
url: 'http://nakolesah.ru/',
data: {
'foo': 'bar',
'ca$libri': 'no$libri' // <-- the $ sign in the parameter name seems unusual, I would avoid it
},
success: function(msg){
alert('wow' + msg);
}
});
$.ajax({
type: 'POST',
url:'http://nakolesah.ru/',
data:'foo='+ bar+'&calibri='+ nolibri,
success: function(msg){
alert('wow' + msg);
}
});
I see that they did not understand your question.
Answer is: add "traditional" parameter to your ajax call like this:
$.ajax({
traditional: true,
type: "POST",
url: url,
data: custom,
success: ok,
dataType: "json"
});
And it will work with parameters PASSED AS A STRING.
For a similar application I had to wrap my data object with JSON.stringify() like this:
data: JSON.stringify({
'foo': 'bar',
'ca$libri': 'no$libri'
}),
The API was working with a REST client but couldn't get it to function with jquery ajax in the browser. stringify was the solution.
Not sure whether this is still actual.. just for future readers.
If what you really want is to pass your parameters as part of the URL, you should probably use jQuery.param().
Not a direct answer to your question.. But following is the only syntax that used to work for me -
data: '{"winNumber": "' + win + '"}',
And the parameter-name match with the argument of the server method
I was facing the problem in passing string value to string parameters in Ajax. After so much googling, i have come up with a custom solution as below.
var bar = 'xyz';
var calibri = 'no$libri';
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "http://nakolesah.ru/",
data: '{ foo: \'' + bar + '\', zoo: \'' + calibri + '\'}',
success: function(msg){
alert('wow'+msg);
},
});
Here, bar and calibri are two string variables and you can pass whatever string value to respective string parameters in web method.
I have also faced this exact problem. But I have got a solution and it worked perfectly. I have needed to pass the parameters which are already produced by javascript function. So below code is working for me. I used ColdFusion for the backend. I just directly used the parameters as a variable.
$.ajax({
url: "https://myexampleurl.com/myactionfile.cfm",
type: "POST",
data : {paramert1: variable1,parameter2: variable2},
success: function(data){
console.log(data);
} )};
Instead of this, encode the POST request as a string and pass to the data parameter,
var requestData = "Param1=" + encodeURIComponent(jsParam1) + "&Param2="+ encodeURIComponent(jsParam2);
var request = $.ajax({
url: page + "?" + getVars,
method: "POST",
data: requestData,
dataType: "html",
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
});

jQuery.ajax returns 400 Bad Request

This works fine:
jQuery('#my_get_related_keywords').click(function() {
if (jQuery('#my_keyword').val() == '') return false;
jQuery.getJSON("http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
function (data) {//do something}
This returns 400 Bad Request (Just a reformulation of the above jQuery using .ajax to support error handling).
jQuery('#my_get_related_keywords').click(function()
{
if (jQuery('#my_keyword').val() == '') return false;
jQuery('#my_loader').show();
jQuery.ajax(
{
url: "http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
success: function(data)
{//do something}
I think you just need to add 2 more options (contentType and dataType):
$('#my_get_related_keywords').click(function() {
$.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8", // this
dataType: "json", // and this
success: function (msg) {
//do something
},
error: function (errormessage) {
//do something else
}
});
}
Add this to your ajax call:
contentType: "application/json; charset=utf-8",
dataType: "json"
Late answer, but I figured it's worth keeping this updated. Expanding on Andrea Turri answer to reflect updated jQuery API and .success/.error deprecated methods.
As of jQuery 1.8.* the preferred way of doing this is to use .done() and .fail(). Jquery Docs
e.g.
$('#my_get_related_keywords').click(function() {
var ajaxRequest = $.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8",
dataType: "json"});
//When the request successfully finished, execute passed in function
ajaxRequest.done(function(msg){
//do something
});
//When the request failed, execute the passed in function
ajaxRequest.fail(function(jqXHR, status){
//do something else
});
});
Be sure and use 'get' or 'post' consistantly with your $.ajax call for example.
$.ajax({
type: 'get',
must be met with
app.get('/', function(req, res) {
===============
and for post
$.ajax({
type: 'post',
must be met with
app.post('/', function(req, res) {
I was getting the 400 Bad Request error, even after setting:
contentType: "application/json",
dataType: "json"
The issue was with the type of a property passed in the json object, for the data property in the ajax request object.
To figure out the issue, I added an error handler and then logged the error to the console. Console log will clearly show validation errors for the properties if any.
This was my initial code:
var data = {
"TestId": testId,
"PlayerId": parseInt(playerId),
"Result": result
};
var url = document.location.protocol + "//" + document.location.host + "/api/tests"
$.ajax({
url: url,
method: "POST",
contentType: "application/json",
data: JSON.stringify(data), // issue with a property type in the data object
dataType: "json",
error: function (e) {
console.log(e); // logging the error object to console
},
success: function () {
console.log('Success saving test result');
}
});
Now after making the request, I checked the console tab in the browser development tool.
It looked like this:
responseJSON.errors[0] clearly shows a validation error: The JSON value could not be converted to System.String. Path: $.TestId, which means I have to convert TestId to a string in the data object, before making the request.
Changing the data object creation like below fixed the issue for me:
var data = {
"TestId": String(testId), //converting testId to a string
"PlayerId": parseInt(playerId),
"Result": result
};
I assume other possible errors could also be identified by logging and inspecting the error object.
Your AJAX call is not completed with the following two params.
contentType: "application/json; charset=utf-8",
dataType: "json"
contentType is the type of data you're sending
dataType is what you're expecting back from the server
In addition try to use JSON.stringify() method. It is used to turn a javascript object into json string.

$.ajax is not working

In my web page there is a textbox to get the scanned barcode value. Once we scan the barcode it has to get details from the database. I am creating the change event for the textbox.
Problem: $.ajax is not working.
Code:
var target = $('#txtBarcode'), val = target.val();
target.change(monitor());
function monitor() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
url: "HomePage.aspx/SearchProduct",
dataType: "json",
success: function(data) {
alert("Success!!!");
}
});
}
You are trying to pass 'monitor' to the change method but you're actually calling it. It should look like this (no parens)
var target = $('#txtBarcode'), val = target.val();
target.change(monitor);
function monitor() {
You can always declare it inline too:
var target = $('#txtBarcode'), val = target.val();
target.change(
function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
url: "HomePage.aspx/SearchProduct",
dataType: "json",
success: function(data) {
alert("Success!!!");
}
});
});
Add an error handler.
Make sure your relative URL is right.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
url: "HomePage.aspx/SearchProduct",
dataType: "json",
success: function(data) {
alert("Success!!!");
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
// ...
}
});
EDIT: Dan is right about your change handler.
You can copy some answers posted here, and at least one of will likely to work, but you won't get the intimate knowledge of why. Here's an additional way:
Since you use asp.net, put the break point in the first line of HomePage.aspx/SearchProduct. This ensure that the request goes to the right URL on the server.
Step all the way through this method to make sure there's no exception that gets thrown.
Use FireFox and install Firebug (even if you target IE and have no intention to make it run on FF). You can inspect the http response.
Add an error handler in addition to the success handler.

Resources