[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74
  • Last Modified:

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?
 <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>

Open in new window

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;
}

Open in new window

0
ITsolutionWizard
Asked:
ITsolutionWizard
  • 6
  • 3
1 Solution
 
Julian HansenCommented:
1. Make sure your class is decorated with the ScriptService decorator
[ScriptService]

2. Remove 'static' from GetData WebMethod

3. You can then use this jQuery
<script>
$(function () {
    $('#PRODUCT_STATE').change(function () {
        $.ajax({
            url: 'Default.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>

Open in new window

0
 
ITsolutionWizardAuthor Commented:
". Make sure your class is decorated with the ScriptService decorator" - What does it mean?
Can you show me in codes?
0
 
ITsolutionWizardAuthor Commented:
the codes do not seem working
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
ITsolutionWizardAuthor Commented:
I make quick testing page below. and using same webmethod. And does not work.
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>

Open in new window

0
 
ITsolutionWizardAuthor Commented:
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>

Open in new window

0
 
Julian HansenCommented:
Are you sure your web method is working - what do you see if you go into the console (F12) - change select 1 - what shows?
0
 
ITsolutionWizardAuthor Commented:
Hey! Julian, it works when I put static. Regardless thank you.
0
 
ITsolutionWizardAuthor Commented:
Great Helper. Response fast for helps
0
 
Julian HansenCommented:
You are welcome
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now