ITsolutionWizard
asked on
jquery, aspx
When both below html controls are on change,
I want to fire up GetData and fill up the product_subcode dropdown.
Can you show me how to do it in jquery?
[WebMethod()]
I want to fire up GetData and fill up the product_subcode dropdown.
Can you show me how to do it in jquery?
<select runat="server" required class="form-control" id="PRODUCT_STATE" name="PRODUCT_STATE">
<option value="" disabled="disabled" selected="selected" class="disabled">Product State</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="ZZ">All Other States</option>
</select>
<select runat="server" required class="form-control" id="PRODUCT_SUBCODE" name="PRODUCT_SUBCODE">
<option value="" disabled="disabled" selected="selected" class="disabled">Product Code 2</option>
</select>
Default.aspx[WebMethod()]
public static List<string> GetData(string state)
{
List<string> tmpStr = new List<string>();
if (state == "ND")
{
tmpStr.Add("Ricky");
tmpStr.Add("John");
tmpStr.Add("Tom");
}
else
{
tmpStr.Add("Mary");
tmpStr.Add("Susan");
}
return tmpStr;
}
ASKER
". Make sure your class is decorated with the ScriptService decorator" - What does it mean?
Can you show me in codes?
Can you show me in codes?
ASKER
the codes do not seem working
ASKER
I make quick testing page below. and using same webmethod. And does not work.
Please correct me if I done anything wrong...
Please correct me if I done anything wrong...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestMe.aspx.cs" Inherits="AppService.TestMe" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function () {
$('#PRODUCT_STATE').change(function () {
$.ajax({
url: 'TestMe.aspx/GetData',
data: '{"state":"' + $(this).val() + '"}',
contentType: "application/json; charset=utf-8",
type: 'POST',
dataType: 'JSON'
}).done(function (resp) {
var sc = $('#PRODUCT_SUBCODE').empty();
$.each(resp.d, function (i, d) {
sc.append($('<option/>').val(d).html(d));
});
});
});
});
</script>
<select runat="server" class="form-control" id="PRODUCT_STATE" name="PRODUCT_STATE">
<option value="" disabled="disabled" selected="selected" class="disabled">Product State</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="ZZ">All Other States</option>
</select>
<select runat="server" class="form-control" id="PRODUCT_SUBCODE1" name="PRODUCT_SUBCODE">
<option value="" disabled="disabled" selected="selected" class="disabled">Product Code 2</option>
</select>
</form>
</body>
</html>
ASKER
sorry. please ignore previous post. and use below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestMe.aspx.cs" Inherits="AppService.TestMe" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function () {
$('#PRODUCT_STATE').change(function () {
$.ajax({
url: 'TestMe.aspx/GetData',
data: '{"state":"' + $(this).val() + '"}',
contentType: "application/json; charset=utf-8",
type: 'POST',
dataType: 'JSON'
}).done(function (resp) {
var sc = $('#PRODUCT_SUBCODE').empty();
$.each(resp.d, function (i, d) {
sc.append($('<option/>').val(d).html(d));
});
});
});
});
</script>
<select runat="server" class="form-control" id="PRODUCT_STATE" name="PRODUCT_STATE">
<option value="" disabled="disabled" selected="selected" class="disabled">Product State</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="ZZ">All Other States</option>
</select>
<select runat="server" class="form-control" id="PRODUCT_SUBCODE" name="PRODUCT_SUBCODE">
<option value="" disabled="disabled" selected="selected" class="disabled">Product Code 2</option>
</select>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hey! Julian, it works when I put static. Regardless thank you.
ASKER
Great Helper. Response fast for helps
You are welcome
[ScriptService]
2. Remove 'static' from GetData WebMethod
3. You can then use this jQuery
Open in new window