Search jQuery

jQuery Forum

jQuery.Ajax not working for mobile app or any browser other than working in IE

in jQuery Mobile • 10 years ago

Working on a Data driven mobile app (for iPhone, Android, WP7, ETC.) using HTML5 and jQuery. I am using WCF webservice to connect to the DB. Using JSON to POST and GET data. However it works on IE but not in any other browser or a mobile app. Sample working code in IE is below:-

<!doctype html>
<html lang="en">
<head>
<link href="Content/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var Type;
var Url;
var Data;
var ContentType;
var DataType;
var ProcessData;
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
function WCFJSON() {
var userid = "1";
Type = "POST";
Url = "http://localhost:7907/AlertService.svc/GetAlertForDevice";
Data = '{"deviceID": "' + userid + '"}';
ContentType = "application/json; charset=utf-8";
DataType = "json";
ProcessData = false;
CallService();
}
// Function to call WCF Service
function CallService() {
$.ajax({
type: Type, //GET or POST or PUT or DELETE verb
url: Url, // Location of the service
data: Data, //Data sent to server
contentType: ContentType, // content type sent to server
dataType: DataType, //Expected data format from server
processdata: ProcessData, //True or False
success: function (msg) {//On Successfull service call
ServiceSucceeded(msg);
},
error: ServiceFailed// When Service call fails
});
}
function ServiceFailed(result) {
alert('Service call failed: ' + result.status + '' + result.statusText);
Type = null;
varUrl = null;
Data = null;
ContentType = null;
DataType = null;
ProcessData = null;
}
function ServiceSucceeded(result) {
if (DataType == "json") {
resultObject = result.GetAlertForDeviceResult;
var str = '';
for (i = 0; i < resultObject.length; i++) {
$('#alertList').append('<li><a href="#">' + resultObject[i] + '</a </li>').listview('refresh');
}
}
}
$(document).ready(
function () {
WCFJSON();
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h3>
Test Page
</h3>
<a href="#" data-role="button" data-direction="reverse">My Test</a>
<a href="#" data-role="button" data-icon="plus">Done</a>
</div>
<div data-role="content">
<ul id="alertList" data-role="listview" data-inset="true">
<li data-role="list-divider">Navigate To</li>
</ul>
</div>
</div>
</body>
</html>

I have seen some post using JSONP but I guess it only supports GET not sure how I will do POST, DELETE.

Help is much appreciated

Replies(4)

mspisars

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

10 years ago

You're misunderstanding something... cross domain within jQuery ONLY supports GET...

http://api.jquery.com/jQuery.ajax/ search for "cross-domain" or "JSONP"

http://en.wikipedia.org/wiki/Same_origin_policy

joyjeetm

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

10 years ago

This means JSONP is the only answer can I cannot JSON on a mobile application as I cannot host Web Service inside an app. This answers the second part however, I am still confused why my current test pages works in IE but not in Chrome, Firefox, Sarari and mobile browsers. (Please note while testing on mobile, i replace Localhost with a domain url).

I am new to this hence would appreciate if someone can point me to a sample where an update or delete is done using JSONP.

Thank you so much in advance.

joyjeetm

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

10 years ago

I updated the $.ajax call and the WCF service with GET and JSONP as below, but not I get error message with result.status = 0 and result.statusText = success. I chrome console it does show the returned data from the database as

{"GetAlertForDeviceResult":["Alaska","Caribbean","Europe","Delhi","Summer","T"]}

but it also shows error "Uncaught SyntaxError: Unexpected token:"

What am I missing?

<script type="text/javascript">
var Type;
var Url;
var Data;
var ContentType;
var DataType;
var ProcessData;
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
$.mobile.allowCrossDomainPages = true;
function WCFJSON() {
var userid = "1";
Type = "GET";
Url = "http://localhost:7907/AlertService.svc/GetAlertForDevice?format=json";
Data = '{"deviceID": "' + userid + '"}';
ContentType = "application/json; charset=utf-8";
DataType = "jsonp";
ProcessData = false;
CallService();
}
// Function to call WCF Service
function CallService() {
$.ajax({
url:Url, // Location of the service
data:Data, //Data sent to server
dataType:DataType, //Expected data format from server
jsonp:'$callback',
success:function(msg) {//On Successfull service call
ServiceSucceeded(msg);
},
error:ServiceFailed
});
}
function JsonpCallback(data) {
if (data.responseStatus == "200")
alert(data.responseData.feed.title);
else
alert(data.responseDetails);
}
function ServiceFailed(result) {
alert('Service call failed: ' + result.status + '' + result.statusText);
Type = null;
varUrl = null;
Data = null;
ContentType = null;
DataType = null;
ProcessData = null;
}
function ServiceSucceeded(result) {
if (DataType == "json") {
resultObject = result.GetAlertForDeviceResult;
var str = '';
for (i = 0; i < resultObject.length; i++) {
$('#alertList').append('<li><a href="#">' + resultObject[i] + '</a></li>').listview('refresh');
}
}
}
$(document).bind("mobileinit", function () {
$.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
$.mobile.allowCrossDomainPages = true;
});
$(document).ready(
function () {
WCFJSON();
}
);
</script>

joyjeetm

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

10 years ago

Finally started working for chrome and all other browsers after I changed the url to

http://localhost:7907/AlertService.svc/GetAlertForDevice?callback=?

I updated the web.config of the WCF service as well.

I do not see the data in the WP7 emulator broser but I guess it might be a seperate issue. Thank you for help and hope the solution helps someone else who is having simlar issues.

Top Reply

Response title

Attachments

jQuery Forum

jQuery.Ajax not working for mobile app or any browser other than working in IE

Replies(4)

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

Re: jQuery.Ajax not working for mobile app or any browser other than working in IE

Statistics

Tags

Actions