0

I am trying to integrate Open Weather API in my website, for this I have written some coding and it's working as expected in my local system. The same code is not working in Live. it's returning error and I have googled for this error and I tried so many examples like xml json XMLHttpRequest jsonp But all examples is working locally when Live it's not working. Throwing same error as below.

enter image description here

For above I have tried below code:

Example 1

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="./bootstrap-switch.min.js"></script>
<script type="application/javascript">

    jQuery(document).ready(function(){

        var xhr = new XMLHttpRequest();
        var url = "http://api.openweathermap.org/data/2.5/forecast/daily?appid=c9d49310f8023ee2617a7634de23c2aa&q=" + "Hyderabad";
        xhr.open("GET", url);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                weatherObj = JSON.parse(xhr.responseText);
                console.log(weatherObj);
                if (weatherObj.cod && weatherObj.cod == 404) {
                    //$("#errLocationNotFound").hide().removeClass("hidden").slideDown();
                    //$("#output").parent().slideUp("fast", function () { this.classList.add("hidden") });
                }
                else {
                    //$("#errLocationNotFound").slideUp(function () { this.classList.add("hidden") });
                    //$("#output").html(getWeatherStr()).parent(".hidden").hide().removeClass("hidden").slideDown();;
                }
            }
        }
        xhr.send();

    });


</script>

Example 2

<script type="application/javascript">

        jQuery(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "http://api.openweathermap.org/data/2.5/forecast/daily?q=Hyderabad,IN&mode=xml&appid=c9d49310f8023ee2617a7634de23c2aa",
                dataType: "xml",
                success: function(data) {
                    /* handle data here */
                    console.log(data);

                    //$('<p>Text</p>').appendTo('#weather_report');

                    /*var wrapper = $("#weather_report");
                     wrapper.empty();
                     wrapper.append("<div class='city'> <p>Place: " + data.city.name + "</p><p>Country: " + data.city.country + "</p></div>");
                     wrapper.append("<div class='day_1'> <p>Place: " + data.city.name + "</p><p>Country: " + data.city.country + "</p></div>");*/

                },
                error: function(xhr, status) {
                    /* handle error here */
                }
            });
        });

    </script>

In Example 2 I have tried both xml,json and jsonp Mode in url and datatype. But again throwing same Error.

Could you please suggest me how to do it.

  • Its seems your domain is https and you sending request through http protocol your url should look like https://api.openweathermap.org/data/2.5/forecast/daily?appid=c9d49310f8023ee2617a7634de23c2aa&q=" + "Hyderabad" – Aman Alam Jun 21 '16 at 6:51
  • @aman_uni when I trying to access above url (with https) Browser throwing Error Page cannot display. – Bojjaiah Jun 21 '16 at 6:56
  • Are you using php seems your domain is not in php or not magento i think – Aman Alam Jun 21 '16 at 7:05
  • @aman_uni Yes You are correct. I am trying to access html page with JQuery server is IIS. – Bojjaiah Jun 21 '16 at 7:13
  • 1
    If their is option to user php let me know will let you know alternate solution that may work for you and solve your problem – Aman Alam Jun 21 '16 at 7:15
2

It's not possible due to the Same Origin Policy.

That's because , you are using HTTPS protocol and calling api by HTTP protocol.

You have to convert Ajax requests to HTTPS

Otherwise try CURL with the answer/trick shown here by @aman_uni

0

Here is your alternate answer :

Create a php file in your server called weather.php and write below mentioned code their.

<?php
$appid = $_GET['appid'];
$q = $_GET['q'];
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,"http://api.openweathermap.org/data/2.5/forecast/daily?appid=".$appid."&q=".$q);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
echo $output=curl_exec($ch);
curl_close($ch);

?>

now you need to heat your ajax with url https://www.yourdomain.com/weather.php?appid=c9d49310f8023ee2617a7634de23c2aa&q=Hyderabad

And you will receive json return from openweathermap.

Note: curl php extension must be enabled on your server.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.