showing weather data of different cities using openweathermap

Question

I have built a weather widget for my website using openweathermap. JS & html is -- Script in main.html page-->

$(function() {

    $('.weather-temperature').openWeather({
        city: 'Dhaka, BD',
        descriptionTarget: '.weather-description',
        windSpeedTarget: '.weather-wind-speed',
        minTemperatureTarget: '.weather-min-temperature',
        maxTemperatureTarget: '.weather-max-temperature',
        humidityTarget: '.weather-humidity',
        sunriseTarget: '.weather-sunrise',
        sunsetTarget: '.weather-sunset',
        placeTarget: '.weather-place',
        iconTarget: '.weather-icon',
        customIcons: 'images/icons/weather/',
        success: function() {

            //show weather
            $('.weather-wrapper').show();

        },
        error: function(message) {

            console.log(message);

        }
    });

}); 

HTML -->/*

                                <div class="weather-wrapper hide">
            <select id='list'>
                    <option value='Dhaka,BD'>Dhaka</option>
                    <option value='Pabna,BD'>Pabna</option>
            </select>

            <img src="" class="weather-icon" alt="Weather Icon" />

            <p><strong>Place</strong>
            <br /><span class="weather-place"></span></p>

            <p><strong>Temperature</strong>
            <br /><span class="weather-temperature"></span> (<span class="weather-min-temperature"></span> - <span class="weather-max-temperature"></span>)</p>

            <p><strong>Description</strong>
            <br /><span class="weather-description capitalize"></span></p>

            <p><strong>Humidity</strong>
            <br /><span class="weather-humidity"></span></p>

            <p><strong>Wind speed</strong>
            <br /><span class="weather-wind-speed"></span></p>

            <p><strong>Sunrise</strong>
            <br /><span class="weather-sunrise"></span></p>

            <p><strong>Sunset</strong>
            <br /><span class="weather-sunset"></span></p>

        </div>      */

Without any 'select' option it working properly for 'Dhaka' city. I want to change city name using select option and show changed weather data.I have tried ------

     /*
      var loc;
         $('#list').change(function() {
         loc = $('#list').val();
         $('.weather-temperature').openWeather({
           city: "' + loc + '",
            //etc.
      */

Here is openweather.js code -----

    /*
      ;(function($) {

$.fn.openWeather  = function(options) {

    //return if no element was bound
    //so chained events can continue
    if(!this.length) { 
        return this; 
    }

    //define default parameters
    var defaults = {
        descriptionTarget: null,
        maxTemperatureTarget: null,
        minTemperatureTarget: null,
        windSpeedTarget: null,
        humidityTarget: null,
        sunriseTarget: null,
        sunsetTarget: null,
        placeTarget: null,
        iconTarget: null,
        customIcons: null,
        units: 'c',
        city: null,
        lat: null,
        lng: null,
        key: null,
        success: function() {},
        error: function(message) {} 
    }

    //define plugin
    var plugin = this;

    //define element
    var el = $(this);

    //api URL
    var apiURL;

    //define settings
    plugin.settings = {}

    //merge defaults and options
    plugin.settings = $.extend({}, defaults, options);

    //if city isn't null
    if(plugin.settings.city != null) {

       //define API url using city (and remove any spaces in city)
       apiURL = 'http://api.openweathermap.org/data/2.5/weather?q='+plugin.settings.city.replace('', '');

    } else if(plugin.settings.lat != null && plugin.settings.lng != null) {

       //define API url using lat and lng
       apiURL = 'http://api.openweathermap.org/data/2.5/weather?lat='+plugin.settings.lat+'&lon='+plugin.settings.lng;
    }

    if(plugin.settings.key != null) {

        apiURL += '&APPID=' + plugin.settings.key;

    }

 etc....
  */

I am really sorry for this long writing. This problem is burning me badly and i am not pro coder. So plz help me to get out from this problem.

Answer 1

change city: "' + loc + '", to city:loc, and it should work