Click here to Skip to main content
14,766,145 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Dear Code Project Team,

Please solve my code puzzle, i have tried a lot and don;t want to give up,

I have build cascading dropdownlist using asp.net jquery
Code for cascading dropdown is as follows,

My JSCRIPT
<script type="text/javascript">
     $(function () {
         $('#<%=ddlclassification2.ClientID %>').attr('disabled', 'disabled');
         $('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
         $('#<%=ddlclassification2.ClientID %>').append('<option selected="selected" value="0">Select Category</option>');
         $('#<%=ddlSubCategory.ClientID %>').empty().append('<option selected="selected" value="0">Select SubCategory</option>');

         $('#<%=ddlclassification1.ClientID %>').change(function () {
             var Entity = $('#<%=ddlclassification1.ClientID%>').val()
             $('#<%=ddlclassification2.ClientID %>').removeAttr("disabled");
             $('#<%=ddlSubCategory.ClientID %>').empty().append('<option selected="selected" value="0">Select SubCategory</option>');
             $('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
             $.ajax({
                 type: "POST",
                 url: "DigitalPrepping.aspx/BindCategory",
                 data: "{'Entity':'" + Entity + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (msg) {
                     var j = jQuery.parseJSON(msg.d);
                     var options;
                     for (var i = 0; i < j.length; i++) {
                         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                     }
                     $('#<%=ddlclassification2.ClientID %>').html(options)
                 },
                 error: function (data) {
                     alert('Something Went Wrong')
                 }
             });

         });
         $('#<%=ddlclassification2.ClientID %>').change(function () {
             var Category = $('#<%=ddlclassification2.ClientID%>').val()
             $('#<%=ddlSubCategory.ClientID %>').removeAttr("disabled");
             $.ajax({
                 type: "POST",
                 url: "DigitalPrepping.aspx/BindSubCategory",
                 data: "{'Category':'" + Category + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (msg) {
                     var j = jQuery.parseJSON(msg.d);
                     var options;
                     for (var i = 0; i < j.length; i++) {
                         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                     }
                     $('#<%=ddlSubCategory.ClientID %>').html(options)
                 },
                 error: function (data) {
                     alert('Something Went Wrong')
                 }
             });
         })
         $('#<%=rdlist.ClientID %> input').change(function () {
             // The one that fires the event is always the
             // checked one; you don't need to test for this

             var Data = $(this).val();
             $.each(Data.split(/\|/), function (i, val) {
                 if (i == 0) {
                     $('#<%=ddlclassification1.ClientID %>').val($.trim(val));

                 }
                 if (i == 1) {

                     $.ajax({
                         type: "POST",
                         url: "DigitalPrepping.aspx/BindSubCategory",
                         data: "{'Category':'" + Category + "'}",
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function (msg) {
                             var j = jQuery.parseJSON(msg.d);
                             var options;
                             for (var i = 0; i < j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                             }
                             $('#<%=ddlSubCategory.ClientID %>').html(options)
                         },
                         error: function (data) {
                             alert('Something Went Wrong')
                         }
                     });

                     $('#<%=ddlclassification2.ClientID %>').val($.trim(val));

                 }
                 if (i == 2) {
                 }
             })

         });
     })
</script>


ASP.NET controls,

<tr>
    <td>
        <asp:Label ID="lblclassification1" Text="Classification" runat="server"></asp:Label>
    </td>
    <td>
        <asp:DropDownList ID="ddlclassification1" CausesValidation="true" runat="server"
            Width="170px" AutoPostBack="True" ValidationGroup="req" OnSelectedIndexChanged="ddlclassification1_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td>
        <asp:Label ID="lblClassification2" Text="Category" runat="server"></asp:Label>
    </td>
    <td>
        <asp:DropDownList ID="ddlclassification2" CausesValidation="true" runat="server"
            Width="170px" AutoPostBack="True" ValidationGroup="req" OnSelectedIndexChanged="ddlclassification2_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td>
        <asp:Label ID="lblClassification3" Text="SubCategory" runat="server"></asp:Label>
    </td>
    <td>
        <asp:DropDownList ID="ddlSubCategory" runat="server" Width="170px" OnSelectedIndexChanged="ddlSubCategory_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
    <td>
        <asp:Label ID="lblTypeTOSearch" runat="server" Text="Type to Search" Visible="False"></asp:Label>
    </td>
</tr>


C# code.

[WebMethod]
 public static string BindCategory(string Entity)
 {
     BAL_UploadVendorDocument b_up = new BAL_UploadVendorDocument();
     DataTable dt = b_up.GetClassification_2("ZI100115", Entity);

     StringWriter builder = new StringWriter();
     builder.WriteLine("[");
     if (dt.Rows.Count > 0)
     {
         builder.WriteLine("{\"optionDisplay\":\"Select Category\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
         for (int i = 0; i <= dt.Rows.Count - 1; i++)
         {
             builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["DocumentCategory_Value"] + "\",");
             builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["DocumentCategory_ID"] + "\"},");
         }
     }
     else
     {
         builder.WriteLine("{\"optionDisplay\":\"Select Category\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
     }
     string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
     returnjson = returnjson + "]";
     return returnjson.Replace("\r", "").Replace("\n", "");
 }

 [WebMethod]
 public static string BindSubCategory(string Category)
 {
     BAL_UploadVendorDocument b_up = new BAL_UploadVendorDocument();
     DataTable dt = b_up.GetClassification_3("ZI100115", Category);

     StringWriter builder = new StringWriter();
     builder.WriteLine("[");
     if (dt.Rows.Count > 0)
     {
         builder.WriteLine("{\"optionDisplay\":\"Select SubCategory\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
         for (int i = 0; i <= dt.Rows.Count - 1; i++)
         {
             builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["SubCategory_Value"] + "\",");
             builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["SubCategory_ID"] + "\"},");
         }
     }
     else
     {
         builder.WriteLine("{\"optionDisplay\":\"Select SubCategory\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
     }
     string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
     returnjson = returnjson + "]";
     return returnjson.Replace("\r", "").Replace("\n", "");
 }


my Cascading drop down works absolutely fine
ex: when i select classification1 it populates classification 2 & when i select Classification 2 it populates SubCategory list.


Problem:

I have classification suggestion radiobutton list
when i select suggestion it should auto populate classification 1, 2 & SubCategory list.

What I have tried:

When i select suggestion radiobutton list it should auto populate all three dropdown list by matching values.


$('#<%=rdlist.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this

var Data = $(this).val();
$.each(Data.split(/\|/), function (i, val) {
if (i == 0) {
//below line works fine as classification 1 is populated on page load of my code
$('#<%=ddlclassification1.ClientID %>').val($.trim(val));
//It fires trigger and calls my classification1 change event and populates values in //classification 2 dropdown
$('#<%=ddlclassification1.ClientID %>').trigger('change');
}
if (i == 1) {
//Below line does not work
$('#<%=ddlclassification2.ClientID %>').val($.trim(val));

}
if (i == 2) {
}
})

});


I will appreciate if somebody could spend little time and solve this.
I am very frustrated.


Thanks & Regards,
Sunil mali
Posted
Updated 9-Sep-16 8:46am

1 solution

First off, since you are doing the cascading implementation at the client-side then there's no need for you to set AutoPostback to true for your dropdownlist.

Quote:
//Below line does not work
$('#<%=ddlclassification2.ClientID %>').val($.trim(val));


What's the value of $.trim(val)? You need to make sure that the value you set does exist in your dropdownlist for it to make it work.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900