Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JavaScript help with an external weather service

    I am using an external web weather service to output the weather of a city to my webpage. I am trying to use a drop down list to allow the user to switch between looking at the weather in the 2 citys that are available from the drop down list.
    Dublin is permanently selected in the table but if a user selects Belfast, Dublin still appears in the table and Belfasts weather is output below and outside of the table.
    Can anyone guide me so that if a user selects Belfast that it appears in the table and Dublins weather disappears or is hidden?

    Code:
    <select id="WeatherSelect">
                        <option value ="WeatherDublin" selected="selected">Dublin</option>
                        <option value ="WeatherBelfast">Belfast</option>
                    </select>
                    
                    <table id="weatherTable">
                        <tr>
                            <th>Location</th>
                            <th>Temperature</th>
                            <th>Sky Conditions</th>
                            <th>Humidity</th>
                    
                    <% 
                    String[] city = {"Dublin", "Belfast"};
                    
                    for(String country : city){
                    Weather d;
                    if(country.equalsIgnoreCase("Belfast")){
                        d = new Weather(country, "United Kingdom");
                    }else{
                        d = new Weather(country, "Ireland");
                    }
                    String file = d.getWeather();
                    String temperature  = file.substring(file.indexOf("<Temperature>")+ 13,file.indexOf("</Temperature>"));
                    String location  = file.substring(file.indexOf("<Location>")+ 10,file.indexOf("</Location>"));
                    String skyConditions  = file.substring(file.indexOf("<SkyConditions>")+ 15,file.indexOf("</SkyConditions>"));
                    String humidity  = file.substring(file.indexOf("<RelativeHumidity>")+ 18,file.indexOf("</RelativeHumidity>"));
                    %> 
                    
                    <div id="Weather<%=country%>" class="WeatherInformation">
                    <tr>  
                        <td><%= location %></td>
                        <td><%= temperature %></td>
                        <td><%= skyConditions %></td>
                        <td><%= humidity %></td>
                    </tr>
                    </div>
                    
                    </table>
                    
                    <%
                                   }
                    %>
                    
                    <script> 
                        document.getElementById("WeatherSelect").onchange = function(){
                            getWeather();
                        }
                        getWeather();
    
                        function getWeather(){
                        document.getElementById("WeatherDublin").style.display = "none";
                        document.getElementById("WeatherBelfast").style.display = "none";
                        var country = document.getElementById("WeatherSelect");
                        var option = country.options[country.selectedIndex].value;
                        document.getElementById(option).style.display = "block";
                        }
                    </script>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,570
    Thanks
    23
    Thanked 643 Times in 642 Posts
    Just some comments on the JS:
    Code:
    <script>
    document.getElementById("WeatherSelect").onchange = function(){
        getWeather2();
    }
    //getWeather();  <- THIS CAUSES THE getWeather() FUNCTION TO EXICUTE ON START UP. NOT NEEDED.
    
    function getWeather(){
    	//document.getElementById("WeatherDublin").style.display = "none"; <- YOU DON'T HAVE AN ELEMENT WITH THIS ID
    	//document.getElementById("WeatherBelfast").style.display = "none"; <- YOU DON'T HAVE AN ELEMENT WITH THIS ID
    	var country = document.getElementById("WeatherSelect").value; // <- ADDED THE .value
    	//var option = country.options[country.selectedIndex].value; <- DOES NOT WORK AND IS NOT NEEDED
    	//document.getElementById(option).style.display = "block"; <- YOU DON'T HAVE AN ELEMENT WITH THIS ID
    }
    </script>
    Just a hint on how I'd do it:
    Code:
    <script>
    function getWeather2(){
    	var country = document.getElementById("WeatherSelect").value;
    	document.getElementById("location").innerHTML = country;
    	document.getElementById("temperature").innerHTML = country+" temperature ";
    	document.getElementById("conditions").innerHTML = country+" skyConditions ";
    	document.getElementById("humidity").innerHTML = country+" humidity ";
    }
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Jc_Hoop (04-30-2014)

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I really appreciate the reply and tips sunfighter.
    Unfortunately my JavaScript skills arent the best and this is still causing me a problem.
    Leaving things to the last minute is never a good idea!

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Has anybody got any more insight into this?

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,570
    Thanks
    23
    Thanked 643 Times in 642 Posts
    I do not know how to pass ASP variables to JAVASCRIPT, but think this should work:
    <script type="text/javascript">
    function getWeather(){
    var country = document.getElementById("WeatherSelect").value;

    if(country == 'Belfast'){
    document.getElementById("location").innerHTML = country;
    document.getElementById("temperature").innerHTML = "<%= belfasttemperature %>";
    document.getElementById("conditions").innerHTML = "<%= belfastskyConditions %>";
    document.getElementById("humidity").innerHTML = "<%= belfasthumidity %>";
    }else{
    document.getElementById("location").innerHTML = country;
    document.getElementById("temperature").innerHTML = "<%= dublintemperature %>";
    document.getElementById("conditions").innerHTML = "<%= dublinskyConditions %>";
    document.getElementById("humidity").innerHTML = "<%= dublinhumidity %>";
    }
    }
    </script>
    Last edited by sunfighter; 05-01-2014 at 07:32 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Oslo, Norway
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, you have several problems here including confusing variable names (belfast and dublin are not countries ), but I have at least a few pointers for you:

    Code:
        <select id="WeatherSelect">
            <option value ="WeatherDublin" selected="selected">Dublin</option>
            <option value ="WeatherBelfast">Belfast</option>
        </select>
                    
        <table id="weatherTable">
            <tr>
                <th>Location</th>
                <th>Temperature</th>
                <th>Sky Conditions</th>
                <th>Humidity</th>
                    <-- closing tag missing for tr-element (this is tolerated by most browsers, but it looks bad and may lead to confusion and errors) -->
            <% 
                String[] city = {"Dublin", "Belfast"};
                   
                for(String country : city){
                    Weather d;
                    if(country.equalsIgnoreCase("Belfast")){
                        d = new Weather(country, "United Kingdom");
                    }else{
                        d = new Weather(country, "Ireland");
                    }
                    String file = d.getWeather();
                    String temperature  = file.substring(file.indexOf("<Temperature>")+ 13,file.indexOf("</Temperature>"));
                    String location  = file.substring(file.indexOf("<Location>")+ 10,file.indexOf("</Location>"));
                    String skyConditions  = file.substring(file.indexOf("<SkyConditions>")+ 15,file.indexOf("</SkyConditions>"));
                    String humidity  = file.substring(file.indexOf("<RelativeHumidity>")+ 18,file.indexOf("</RelativeHumidity>"));
            %> 
                    
            <div id="Weather<%=country%>" class="WeatherInformation">  <--DIV is not a valid child of TABLE. the browser will probably wrap the div in <tr><td>...</td></tr> -->
                <tr>  
                    <td><%= location %></td>
                    <td><%= temperature %></td>
                    <td><%= skyConditions %></td>
                    <td><%= humidity %></td>
                </tr>
            </div>
                    
        </table>  <-- this closing tag is inside the for-loop, meaning it will be added twice. this is why the Belfast wheather ends up outside the table-->
                    
        <%
                }
        %>
    Your javascript seems to work just fine, although since you should remove the DIV-tag from the table and rather have id's on the TR, you should also set display to "table-row" rather than "block".
    Code:
                    
                    <script> 
                        document.getElementById("WeatherSelect").onchange = function(){
                            getWeather();
                        }
                        getWeather();
    
                        function getWeather(){
                        document.getElementById("WeatherDublin").style.display = "none";
                        document.getElementById("WeatherBelfast").style.display = "none";
                        var country = document.getElementById("WeatherSelect");
                        var option = country.options[country.selectedIndex].value;
                        document.getElementById(option).style.display = "block";// set this to "table-row" if the element with id is TR
                        }
                    </script>
    Here is a working demo without the server-side code:
    Plunker


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •