JQuery AJAX functions not working in iOS 5 Safari/iPad - ios

Using the latest version of jQuery 1.6 on iOS 5 safari from an iPad, I'm noticing that all my ajax calls are failing. These same ajax calls work as expected on all other browsers I've tried, and I'm pretty sure they were also working on iOS 4's version of Safari (although I could be wrong). Has anyone else experienced this behavior as well? If so, is there a fix or workaround? Below is a quick example of a simple jQuery AJAX call that is returning an error in iOS 5's Safari. Thanks in advance for any insight!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<a id="my-link" href="javascript:;">Click Me!</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#my-link").bind("click", function() {
jQuery.get("test.php", function(data) {
alert(data);
});
});
});
</script>
</body>
</html>

I had a similar issue just now. I had
$.ajax({
type: 'post',
url: 'http://IP../ws',
data: {1:1},
dataType: 'json',
success: function(response) {
if (lng.Core.toType(callback) === 'function') {
// setTimeout(callback, 100, response);
callback(response);
}
},
error: function(xhr, type) {
console.log('error')
if (error) {
setTimeout(error, 100, result);
}
}
});
changed url: 'http://IP../ws', to url: 'ws',
I'm not a jQuery user at all but have to use it for a project so not sure if this is help to you or not but worked for me.

Restart Safari - leave it and kill it from the running tasks.
From other things I have read it is related to security contexts and prevention of cross site scripting attacks, and Safari not getting things quite right when it was previously running on a different network and is now on an new network without it having been stopped between changing networks.
Ran into it myself today, w/ plain HTML/JavaScript/PHP XMLHttpRequest request.

I had face one issue that jQuery ajax call fail in IPad in Safari browser. Error is you have no permission to access the page / directory. I fix the issue by changing the Ajax async property to true.
$.ajax({
type: 'GET',
url: "".
async: true,
cache: true,
crossDomain: false,
contentType: "application/json; charset=utf-8",
dataType: 'json',
error: function (jqXHR, err) {
console.log(jqXHR.responseText);
alert("Error" + jqXHR.responseText);
},
success: function (data, status) {
});

There is a bug in Safari Mobile that suddenly and unexpectedly gives troubles with AJAX calls if there is any file serving going on. Safari can starts sending "OPTIONS" http messages rather than POST after it has been served a download with a Content-Disposition: attachment; header. You can look to see if this is happening by using Fiddler between Safari Mobile and the server to see what HTTP messages Safari is sending.
That "condition" in Safari Mobile is reset when restarted.
It is reviewed well here Stackoverflow: JQuery Ajax stopped working with IOS 5.0.1.

I've had to make it so that it re-try up to 20 times on error to make it work. Code example:
function my_original_function(form)
{
my_original_function_ajax(form, 1);
}
function my_original_function_ajax(form, attempts)
{
console.log('Attempts #'+(attempts));
jQuery.ajax({
type: 'POST',
url: form.action,
processData: false,
data: $(form).serialize(),
cache: false,
success: function(html){
console.log('success!!');
},
error: function (xhr, status, error) {
// make up to 20 attempts if error
if (attempts <= 20) {
my_original_function_ajax(form, attempts + 1);
}
}
});
}

I had the same issue but I ended up discovering something different totally.
I had something like:
function load_one(var1 = null, var2 = null) { ... }
function load_two() { ... }
And after that I had
$(window).load(function() {
load_one(var_x, var_y);
load_two();
});
Everything worked fine in Chrome, Firefox, Safari for OSX, Safari for iPhone, Chrome for iPhone, but on Edge and Safari for iPad nothing worked. So I opened it on Edge and inside the developer tools it was showing an error on the line where the load_one function was defined.
I wasn't sure what it was but the error said ) expected so I decided to remove the default values for the function parameters and everything worked all of a sudden. I am not sure if javascript has issues with default parameter values, but apparently some browsers have issues with that.

Related

RESTFul web service from html on IOS

Following is the technologies that I have used:
HTML 5, JS, JQuery, AJAX, RESTFul POST web service, IOS
Problem Statement:
I have created an iOS native application and placed certain HTML and JS files in my application. On starting the application on simulator I open my HTML file in web view and on click of a button I hit a web service that is deployed on my local windows machine.
However, I am not able to hit my web service. I am able to perform the same activity from Android emulator and from my local client test program.
Request you to please help me with this issue.
Below is the AJAX code that hits the service:
var jsonObject = new Object();
jsonObject.passengers= 4;
jsonObject.country= "India";
jsonObject.state= "Maharashtra";
var url = "http://<HOST>:<POST>/JerseyTest/services/emanual/demo";
$.ajax({
url: url,
type: "post",
data: inputJsonString,
success: function(data, status){
alert("success");
alert("In Success: " + JSON.stringify(status));
alert("In Success: " + JSON.stringify(data));
//$("#result").html('Submitted successfully');
},
error:function(data, status){
alert("failure");
alert("In Error: " + JSON.stringify(status));
alert("In Error: " + JSON.stringify(data));
//$("#result").html('There is error while submit');
}
});
This code works on from standalone HTML file, from Android Emulator.
Is there any extra configuration that I need to do on iOS machine or for simulator?
Any help is highly appreciated.
Regards,
Vineet
Make sure jQuery is loaded by putting an alert("jQuery is loaded") inside
$(function(){
alert("jQuery is loaded")
});
If jQuery isn't loaded, check in XCode if the jQuery source file is inside the Compile Sources which is under the Build Phases tab in the project Target. If it is, remove it and add it to Copy Bundle Resources.
Also, try formatting the AJAX like this,
$.ajax({
url:url,
type: 'post',
beforeSend: function(xhr, status, error){
xhr.overrideMimeType("application/json; charset=UTF-8");
},
data: {key: "value"},
error: function(data) {
alert("Error");
console.log("Error");
},
success: function(data, textStatus, jqXHR) {
alert("Success");
}
});
Sounds like a CORS issue. Make sure your REST service headers include:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Credentials: true

Ad blocker blocks Ajax call response html

I am rendering some stats on my page, as this takes a bit of time I made this request an ajax call after the page loads
<script type ="text/javascript">
$(document).ready(function () {
$.ajax({
url: '#Url.RouteUrl(Routes.MyAds.AjxCallFoAbc, new {advertId = Model.CreateAdvertHeader.SelectedAdvert.Id})',
type: 'GET',
cache: false,
success: function(response) {
$('.advert-performance').replaceWith(response);
}
});
});
</script>
This works perfectly for me, its causing grief when the user installs a ad-blocker, this content is being blocked, I have debugged the code-base and found the ajax call route is never being hit when the ad-blocker is enabled on the browser
What is the work-around for this, I need show the stats even if the ad-blocker is installed
Resolved it
The reason being, my route which the ajax was pointed to had a advert-stats as part of the url, which caused the blocker to block it,
simply changing the route has fixed it

Using Ajax/jsonp to receive data from Web Api

I've built a simple web service using the Web Api and I want to consume it from a simple mVC view using jQuery. I'm developing on localhost and consuming the service from Azure, which is why I'm using jsonp.
When I run my jQuery I view in Fiddler and the request is successful and json sent back but the .Ajax function returns these errors:
NaN, parsererror, and callback was not called
<script>
$(function () {
var callback = function(data) {
alert(data);
};
$.ajax({
url: 'http://itjobsdirect.azurewebsites.net/api/values/getbytitle?title=developer',
type: 'GET',
dataType: 'jsonp',
jsonpCallback: 'callback',
success: function (data) {
$('#main').text(data);
},
error: function(jqXHR, textStatus, error) {
alert(jqXHR.status + jqXHR.message);
alert(textStatus);
alert(error);
}
});
});
</script>
I found this question: JsonP with Web Api is it still relevant?
Thanks for your help!
Yes, the link to that question you have there is still relevant.
ASP.NET Webapi doesn't ship with a default formatter that understands the dataType of 'jsonp' and so the solution here is to add a custom JsonpMediaTypeFormatter (as shown in the answer for the questions you have linked).

Try to post JSON.stringify object to aspnet mvc controller - bad request

I'm trying to post a JS Object stored in a hidden field:
$("#hdnArr").val(JSON.stringify(arr));
<pre>
$.ajax({
url: form.action,
type: 'POST',
data: $(form).serialize(),
success: function (result) {
//
},
error: function (xhr, textStatus, exceptionThrown) {
//
}
});
</pre>
Locally it is working fine, but in a production server (windows 2012 server with IIS 8), it is returng a Bad Request Error. With Firebug I checked that my hidden value is like this:
hdnArr=%5B%7B%22Type%22%3A%22%22%2C%22TypeB%22%3A%22%22%2C%22TypeC%22%3A%22%22%2C%22TypeD%22%3A%22%22%7D%5D
This problem is basically the % character. How can I enable my server to accept this char?
Ok, I could solve this problem just switching the Managed Pipeline from App Pool to Classic Mode.

Phonegap + head.js on iOS, won't work?

I'm using Phonegap 2.1.0 on iOS. In my main.html-file I'm loading some html using jQuery.
However, one of the html-files I'm loading has its own Javascript that loads other files, in the same way ($.ajax etc.). Phonegap in Android loads these files and executes the Javascript in them, but iOS does not.
Example:
index.html:
<...>
<body>
<script>
$(document).on('pageinit', function() {
$.ajax({
url: 'some.url',
success: function(data, status, jqxhr) {
$("#some-div").html(data);
},
error: function(jqxhr, status, error) {}
});
});
</script>
</body>
</...>
some.url:
<script type="text/javascript">
head.js(
"config-file.js",
function() {
$.ajax({
url: PATH + 'some-other.url', // PATH? see below
success: function(data, status, jqxhr) {
$("#some-div").html(data);
},
error: function(jqxhr, status, error) {}
});
});
</script>
config-file.js:
var PATH = 'mypath';
some-other.url:
fails to load in iOS
All loaded files are served from the same domain.
Again, the code above works in Android. Any ideas why iOS fails to do this, and how to solve it? Is it head.js? (0.9.6)
Since you are using jQuery Mobile, which depends on jQuery anyways, why not just use jQuery to do the file loading ?
$.getScript('path')
.done(function(){
...
});
Otherwise you could also give HeadJS v0.99 a try to see if it fixes your issues.

Resources