Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery, aspx

Posted on 2016-09-07
10
Medium Priority
?
70 Views
Last Modified: 2016-09-07
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
Comment
Question by:ITsolutionWizard
  • 6
  • 3
9 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41787654
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
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41788081
". Make sure your class is decorated with the ScriptService decorator" - What does it mean?
Can you show me in codes?
0
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41788092
the codes do not seem working
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41788111
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
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41788113
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
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41788199
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
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41788273
Hey! Julian, it works when I put static. Regardless thank you.
0
 
LVL 1

Author Closing Comment

by:ITsolutionWizard
ID: 41788274
Great Helper. Response fast for helps
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41788278
You are welcome
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question