CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobilecross-domain
Bacon2305
Bacon2305

Reputation: 311

Ajax function will not work on mobile browser

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.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/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.net/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>

Upvotes: 3

Views: 18108

Answers (1)

Nico
Nico

Reputation: 12683

Just 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.net/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.net/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.

Now this is the error that is coming 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.net/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.net/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.net/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>

Upvotes: 2

Related Questions