Script works only with WI-FI Connection



  • Hi guys i have a section where my app shows the weather from a city.
    But i have a problem. This script is working only with wi-fi. When the device is using 3G/4G i have just the message : loading loading. Looking for the script below , anyone has some advice to solve this problem?

    $(function () {
        'use strict';
    
        function getWeather() {
            $.ajax({
                url: 'http://api.openweathermap.org/data/2.5/weather?lang=pt&lat=-29.3797216&lon=-50.9014878&units=metric&appid=keyhere',
               
                dataType: 'json',
            success: function (json) {
                $('.location').html(json.name);
                  
                var weatherIcon = json.weather[0].icon;
                var daynight, color;
                if (weatherIcon[2] === 'n') {
                    daynight = 'night';
                    color = '#0D47A1';
                } else {
                    daynight = 'day';
                    color = '#64B5F6';
                }
                $('body').css({
                    'backgroundColor': color,
                    'color': color
                });
                // display weather info
                $('.location').html(json.name);
                $('.temperature').html(Math.round(json.main.temp));
                $('.weather-text').html(json.weather[0].description);
                $('.icon').html('<i class="wi wi-owm-' + daynight + '-' + json.weather[0].id + '"></i>');
            },
            error: function (xhr, status, error) {
                $('.location').html('Error retrieving weather');
                console.log(xhr.status + ' ' + error);
                $('.weather-text').clear();
            }
            });
    }
     
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                getWeather(position.coords.latitude, position.coords.longitude);
            }, function () {
                $('.location').html('message ');
            });
        } else {
            $('.location').html('message');
    }
    
      
    
    });
    
    


  • I haven’t implemented everything as you coded, but here is a working example that is returning results both on wifi and telco.

    $.ajax({
               url: 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=WORKING_APP_ID_HERE',
               data: {
                  format: 'json'
               },
               error: function(d) {
                  alert('error'+JSON.stringify(d));
               },
               dataType: 'jsonp',
               success: function(data) {
                  alert('success'+JSON.stringify(data));
               },
               type: 'GET'
            });
    

    Regardless of dataType and structure, I think - although not tested - type: GET is the most important change you can implement.



  • hi @munsterlander ! Yes your code is working well ,better than last . now i just need to burn my brain to make something to shorten the alert on temperature, description and icon

     // display weather info
                $('.location').html(json.name);
                $('.temperature').html(Math.round(json.main.temp));
                $('.weather-text').html(json.weather[0].description);
                $('.icon').html('<i class="wi wi-owm-' + daynight + '-' + json.weather[0].id + '"></i>');
    

    0_1461363440847_Screenshot_2016-04-22-19-16-24.jpg
    0_1461363453704_Screenshot_2016-04-22-19-16-28.jpg



  • thank you so much! @munsterlander



  • @Leonardo-Augusto Your Welcome! Just curious, was it type: GET that did it as I suspect that was the cause?



  • @munsterlander yes man! . GET!!! The code was loading and loading. But now is faster! Just a doubt if you understands open Weather API:
    how i can filter the alert for example : show only the description and the city name.



  • @Leonardo-Augusto

    Basically, the JSON response can be thought of as nested arrays/objects. You get the data by using:

    success: function(data) {
          alert(data.weather[0].description+'\n'+data.name);
     }
    

    EDIT: To get more data, reference this document:

    http://openweathermap.org/current#current_JSON

    Basically, to get any of the inset items, then you would use: parent[0].inset_item

    So:

    success: function(data) {
        data.main[0].temp
        data.sys[0].country
        etc
    // But the ones that don't have an inset, can be referenced directly.
        data.name
    }
    


  • @munsterlander hummm thanks for your big help! Dale dale Dartitis!



  • @munsterlander said:

    success: function(data) {
    alert(data.weather[0].description+’\n’+data.name);
    }

    hooohohohoh that was it!!!

    http://openweathermap.org/current#current_JSON
    :stuck_out_tongue_closed_eyes: :stuck_out_tongue_closed_eyes: :stuck_out_tongue_closed_eyes: :stuck_out_tongue_closed_eyes:



  • @Leonardo-Augusto Glad it all worked out!



  • @munsterlander yes , now i’ll make an adaptation for the project. Using Onsen Ui Alert . Amazing!! when you’ll open your class to teach! :grimacing:



  • @Leonardo-Augusto Jeje, I definitely couldn’t teach other than hacking things together! :smiley: I do want to give a :thumbsup: to the Onsen team with https://onsen.io/2/reference/ons.notification.html, you can do such amazing things with it, just like you did for Dartitis. Awesome stuff and can’t wait to see your new app!



  • @munsterlander Yes . Onsen notification is very useful. I have used on my new app.
    Could be possible to use a Custom icon in Ons notification.



  • I would see no reason why you couldn’t. I know there was a bug with dynamic icons, but here is a response for custom ones.



  • @munsterlander ohhh new to me, (Inside ons notification)i’ll check out!


Log in to reply