locked
chzn-select Not Working In Dropdownlist RRS feed

  • 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