Remove From My Forums

chzn-select Not Working In Dropdownlist

Question

User-807418713 posted

Hello

I Used This Code In My Page https://forums.asp.net/post/6265870.aspx

If i apply this below code to dropdownlist data not showing why?

 <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen({
                search_contains: true                
             });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                //Binding Code Again
                $(".chzn-select").chosen({
                search_contains: true                
             });
            }
        });
    </script>

Thank You

Thursday, June 13, 2019 7:04 PM

Answers

User288213138 posted

Hi Gopi.MCA,

By defaults,Ajax is using asynchronous method to send requests. The data has not been sent back when jquery.chosen() is executed, resulting in no data binding.

You can try to set the async property in ajax to false.

The code:

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="chzn-select"></asp:DropDownList>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" />
    <script type="text/javascript">
        $(function () {

            SetDrop1();//bind dropdownlist1
            $("#DropDownList1").change(function () {
                var selectedText = $(this).find(':selected').text();
                SetDrop2(selectedText);
            });
            $("#DropDownList2").change(function () {
                $("#TextBox1").val($("#DropDownList2").val());
            });
             $(".chzn-select").chosen({
                search_contains: true                
             });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                //Binding Code Again
                $(".chzn-select").chosen({
                search_contains: true                
             });
            }
        })
        function SetDrop1() {
            $("#DropDownList1").empty();
            $.ajax({
                type: "POST",
                url: "WebForm9.aspx/DropDownList1Bind",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                async: false,
                success: function (result) {
                    var response = JSON.parse(result.d);
                    console.log(response);
                    for (var i = 0; i < response.length; i++) {
                        $("#DropDownList1").append("<option value='" + response[i]['ID'] + "'>" + response[i]['Supplier'] + "</option>");
                    }
                    SetDrop2($('#DropDownList1 :selected').text());
                }
            });
        }

        function SetDrop2(selectedText) {
            $("#DropDownList2").empty();
            $.ajax({
                type: "POST",
                url: "WebForm9.aspx/DropDownList1Change",
                data: '{supplier: "' + selectedText + '" }',
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                async: false,
                success: function (result) {
                    var response = JSON.parse(result.d);
                    console.log(response);
                    for (var i = 0; i < response.length; i++) {
                        $("#DropDownList2").append("<option value='" + response[i]['Rate'] + "'>" + response[i]['ItemName'] + "</option>");
                    }
                    $("#TextBox1").val($("#DropDownList2").val());
                },
            });
        }
     
    </script>

The result:

Best Regards

Sam

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, June 14, 2019 9:45 AM

Answered by:

chzn-select Not Working In Dropdownlist

Question

Answers