Hello and thanks for looking this over. Very new to jQuery/ajax etc. This website has FTP access to appropriate server, so I (as far as I know) am not violating cross-domain policy. This is website works fine on any desktop browser but does not work on any mobile browser. I feel like the issue is obviously but I don't know what to do. Can someone help me with This?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GRID Mobile</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<link href=".3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src=".8.3.min.js" type="text/javascript"></script>
<script src=".3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: 'GET',
url: '.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>'+title+'</h3><p>'+description+link+'</p>');
});
}
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h1>GRID MOBILE</h1>
</div>
<div data-role="content">
<div id="feedContainer"></div>
<h3></h3>
<p></p>
</div>
<div data-role="footer">
<h4>Advertisements</h4>
</div>
</div>
</body>
</html>
Hello and thanks for looking this over. Very new to jQuery/ajax etc. This website has FTP access to appropriate server, so I (as far as I know) am not violating cross-domain policy. This is website works fine on any desktop browser but does not work on any mobile browser. I feel like the issue is obviously but I don't know what to do. Can someone help me with This?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GRID Mobile</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<link href="http://code.jquery./mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery./jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery./mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: 'GET',
url: 'http://www.e-grid/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>'+title+'</h3><p>'+description+link+'</p>');
});
}
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h1>GRID MOBILE</h1>
</div>
<div data-role="content">
<div id="feedContainer"></div>
<h3></h3>
<p></p>
</div>
<div data-role="footer">
<h4>Advertisements</h4>
</div>
</div>
</body>
</html>
1 Answer
Reset to default 2Just a thought, have you tried wrapping your ajax call in a load event. I havent tested this on a mobile browser. However try.
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: 'http://www.e-grid/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
});
}
});
});
</script>
Note the only changes was the $(function() { }); wrapping.
EDIT: Tested on OSX.
Just a quick FYI I tested your page on an IPhone 5s on OSX and there are definitly Cross site origin problems.
The actual error is
XMLHttpRequest cannot load http://www.e-grid/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.
Now this is the error that is ing from the IPhone using the Safari web inspector. Additionally when this file was not hosted on a webserver and run as a simple HTML file the request works fine. Its as soon as you host the file in a webserver you will get the CORS issue.
To resolve this you will need to contact the webmaster and allow cross site origin, switch to a different method of retrieving the issue. There are other methods to try and get around CORS issues.
Sorry if this is not that helpful.
FINAL EDIT: The actual problem.
Ok from what I can tell the problem is the fully coded url http://www.e-grid/BayAreaTech/wp-rss2.php?cat=1 in your script. As you are on the same webserver on the same host i would suggest using a relative url as
/BayAreaTech/wp-rss2.php?cat=1
The reason for this is if you are browsing without the www. in your browser (or device) then the script thinks it is calling another service as the URLs done match. However as you are hosting the service on the same server you can eliminate the http://www. part and this should work fine.
To test this open your desktop browser to.
http://www.e-grid/mobile/index.html
When you do this all works well. Now try. (note without the WWW). This does not work as you are now executing cross domain (as you have hard coded the www portion. portion in the url.
http://e-grid/mobile/index.html
Give this a try and let me know how it goes.
Try the following script block.
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: '/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
});
}
});
});
</script>