locked
Ajax weather RRS feed

  • Question

  • User-478384874 posted

    Hi,

    I'm writing a simple code to show the weather of a US state and a related city but when I click on the button I doesn't work, can anyone help me and show me the right syntax and also the reason that why this happens?

    my code is as below:

    JQUERY
    
            $(document).ready(function () {
                $('#btn').click(function () {
                    var state = $('#ddl_states option:selected').text();
                    var city = $('#ddl_cities option:selected').text();
    
                    alert(state + city);
    
                    $.ajax({
                        url: "http://api.wunderground.com/api/b5579d1a73a33985/conditions/q/" + state + "/" + city + ".json",
                        dataType: "jsonp",
                        success: function (item) {
                            console.log(item);
    
                            var html = "";
                            html += "<article><p>" + item.current_observation.feelslike_string + "</p>";
                            html += "<img src='" + item.current_observation.icon_url + "' alt='' </img>";
                            html += "</article>";
    
                            $("#weatherdiv").append(html);
                        }
                    });
                });
            });
    HTML
    
    <body>
        <form id="form1" runat="server">
    
            <asp:DropDownList ID="ddl_states" runat="server" DataSourceID="DS1" DataTextField="state" DataValueField="state_id"></asp:DropDownList>
            <asp:SqlDataSource runat="server" ID="DS1" ConnectionString="<%$ ConnectionStrings: statesCS %>"
                SelectCommand="select [state], [state_id] from [states]"></asp:SqlDataSource>
    
            <asp:DropDownList ID="ddl_cities" runat="server" DataSourceID="DS2" DataTextField="city" DataValueField="city"></asp:DropDownList>
            <asp:SqlDataSource runat="server" ID="DS2" ConnectionString="<%$ ConnectionStrings: statesCS %>"
                SelectCommand="select state, city from cities where state=@state order by city">
                <SelectParameters>
                    <asp:ControlParameter Name="state" ControlID="ddl_states" />
                </SelectParameters>
            </asp:SqlDataSource>
    
            <button id="btn">Get weather</button>
    
            <div id="weatherdiv"></div>
    
        </form>
    </body>

    Thanks in advance :)

     

    Tuesday, November 25, 2014 7:13 AM

Answers

  • User281315223 posted

    There are a few things that could be going on here. 

    Firstly, you'll want to ensure that you have a jQuery reference loaded (I'm assuming you do since you are using jQuery). Next, you'll want to make sure that your actual click event doesn't cause a PostBack within your <form>. You can do this by using the e.preventDefault() function as seen below :

    $(document).ready(function () {
                // Notice the e added as a parameter
                $('#btn').click(function (e) {
                    // Prevent default behavior (e.g. PostBack)
                    e.preventDefault()
    
                    // Code omitted for brevity
                });
    });

    Finally, I would recommend using the Developer Tools within your browser to ensure that your request is being made. Open up these Developer Tools (using F12) and select the "Network" tab. Once you have done this, simply refresh your page and click your button to trigger your event. You should see your AJAX request being made within the Network window and you'll be able to see it's status.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 25, 2014 7:58 AM

All replies

  • User281315223 posted

    There are a few things that could be going on here. 

    Firstly, you'll want to ensure that you have a jQuery reference loaded (I'm assuming you do since you are using jQuery). Next, you'll want to make sure that your actual click event doesn't cause a PostBack within your <form>. You can do this by using the e.preventDefault() function as seen below :

    $(document).ready(function () {
                // Notice the e added as a parameter
                $('#btn').click(function (e) {
                    // Prevent default behavior (e.g. PostBack)
                    e.preventDefault()
    
                    // Code omitted for brevity
                });
    });

    Finally, I would recommend using the Developer Tools within your browser to ensure that your request is being made. Open up these Developer Tools (using F12) and select the "Network" tab. Once you have done this, simply refresh your page and click your button to trigger your event. You should see your AJAX request being made within the Network window and you'll be able to see it's status.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 25, 2014 7:58 AM
  • User-478384874 posted

    wow that was very simple and helpful, it worked like a charm :)

    Tuesday, November 25, 2014 8:37 AM