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>
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.
Member
94 Points
137 Posts
Ajax weather
Nov 25, 2014 07:13 AM|Foad Jesus|LINK
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 :)
All-Star
113020 Points
18361 Posts
MVP
Re: Ajax weather
Nov 25, 2014 07:58 AM|Rion Williams|LINK
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.
Member
94 Points
137 Posts
Re: Ajax weather
Nov 25, 2014 08:37 AM|Foad Jesus|LINK
wow that was very simple and helpful, it worked like a charm :)