Ajax function will not work on mobile browser

javascript jquery ajax jquery-mobile cross-domain

16,511

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>

16,511

Bacon2305

I am a full-time student and created this account to learn as much as possible about topics covered in my coursework.

Updated on September 15, 2022

Comments

Bacon2305 over 1 year

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>

Bacon2305 over 10 years

I will give it a try now and let you know! EDIT: Attempted and no luck. Still the same result. the header and footer is displaying, just none of the content. Thank you for comment, I appreciate it!
Bacon2305 over 10 years

Thank you for the insight. I have the file loaded on the same server as the site I am attempting to extract information from. Again, though I may be overlooking something. If the webmaster allows cross-site access for the site, will the issue still exist? or will I need to attempt a work around?
Bacon2305 over 10 years

Also, I know the webmaster is not experienced with adding cross-domain access. Is the permission code he needs to add to the site straight forward?
Nico over 10 years

Ok.. Can you post the URL to the page and I can inspect it on the Mac using an IOS device. Cheers
Nico over 10 years

Updated my response with the actual fix.. please update and I can test again.
Nico over 10 years

No problem... Maybe just mark it as an answer and we will call it even. Glad your problem is solved.
Bacon2305 over 10 years

Check. Do you provide any contact info for future questions?
Nico over 10 years

The best place to get quick help is Stackoverflow. It is quite popular and questions are answered quickly. Cheers!