1

I am creating Windows Phone 8 HTML 5 App. I trying to ajax post for getting weather information. But i am not getting any response. I am unable to trace the problem behind it. 

$(document).ready(function () {

        var apiUrl = "http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=5&key=KEY GOES HERE";

        //CALL BACK FUNCTION

        function mapWeather() {
            $("#contentPanel").text("111");
            $.ajax({
                url: apiUrl,
                type: 'GET',
                success: function (data) {
                    $("#contentPanel").text("adfdf");
                }
            });
        }
});

HTML

    <div id="row-fluid">
        <div class="input-append">
            <input type="text" id="searchCity" />
            <button type="button" id="addCity" unselectable="on" class="btn btn-primary" onclick="mapWeather()">+</button>
        </div>
<div id="contentPanel">
        testing
    </div>
    </div>

2 Answers2

1

Reason :

is not allowed by Access-Control-Allow-Origin.

You are trying to do AJAX cross-domain.

EDIT

Example of a, here in php, proxy.php :

<?
$url=$_SERVER['QUERY_STRING'];
$from=strpos($url, 'url=')+4;
$url=substr($url, $from);
echo utf8_decode(file_get_contents($url));
?>

Then you call the ajax as

var apiUrl = "proxy.php?url=http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=YOURKEY";
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • You need to make a proxy, serverside – davidkonrad May 11 '13 at 09:40
  • can u pls give me an example ? –  May 11 '13 at 09:41
  • 2
    +1 for tracing the error, oh do i need to add server side coding. i just thinking of deploying application in phone itself. I just dont lik 2 go for a server side. Is there any other way ? –  May 11 '13 at 09:46
  • 1
    If you have control over the server, you could try this http://stackoverflow.com/a/6871067/1407478, OR see this, http://jquerymobile.com/demos/1.0.1/docs/pages/phonegap.html, allowCrossDomainPages, though I have never tried it. – davidkonrad May 11 '13 at 09:53
  • hi thanks, i already heard about phonegap. let me try on that. so anyway for my question the issue relates to cross domain and so i accept your answer. Thanks... –  May 11 '13 at 09:54
  • Thank you! Remember to remove your key from the URL (apiURL)!! – davidkonrad May 11 '13 at 09:58
0

The reason I mentioned callback=? in my comment above is because weatheronline.com supports JSONP which does support cross-domain requests.

This works for me from PC browser. I don't have a Windows 8 phone, so I can't test:

var apiUrl = "http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=5&key=KEY HERE&callback=?";

$("#addCity").click(function () {
   mapWeather(); 
});

//CALL BACK FUNCTION
function mapWeather() {
    $("#contentPanel").text("111");
    $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'jsonp',
        success: function (data) {
            $("#contentPanel").text(JSON.stringify(data));
        }
    });
}
mccannf
  • 16,619
  • 3
  • 51
  • 63
  • Are you using JQuery 2.x? This supports Windows 8 apps. See here: http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/ – mccannf May 11 '13 at 11:26
  • @yes am using `jquery-2.0.0.min.js` –  May 11 '13 at 11:31
  • its given there in link as `No More Same-Origin Issues` but am getting that issue –  May 11 '13 at 11:33
  • Maybe try and reach out to the JQuery folks to help - let them know it works in Chrome, but not in the Windows 8 app: http://bugs.jquery.com/newticket – mccannf May 11 '13 at 12:34