How Do I use Chosen iquery Search Dropdown with Modal PoPup

Question

How Do I use Chosen iquery Search Dropdown with Modal PoPup

abiodunajai 396

Please I have an HTML modal that shows a Dropdown List.

Everything works well except that I want the user to search the List or select by scrolling through the list. The scrolling is working but the searching using the chosen jQuery is not working.

I will appreciate any assistance to make it work, please.

Below is my Script.

<a href="#showDialog" class="btn btn-primary" title="Apportionment" data-toggle="modal" data-id="">Insurers</a>


      <div class="row">
            <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
                <div id="showDialog" tabindex="-1" role="dialog" aria-labelledby="showDialogLabel" aria-hidden="true" class="modal fade" data-backdrop="static" data-keyboard="false">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="showDialogLabel">Risk Apportionment</h4>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table id="requestItems" class="table table-bordered table-striped table-hover" cellspacing="0">
                                            <tr>
                                                <td>
                                                    <div " class="btn btn-primary btn-sm">
                                                        <strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
                                                    </div>
                                                </td>
                                                <td>Insurer Branch Code</td>
                                                <td>Lead Insurer</td>
                                                <td>Percentage Covered</td>
                                                <td>Confirm?</td>

                                            </tr>
                                        </thead>

                                        @{if (!string.IsNullOrEmpty(Model.Underwriting_PolicyFile.PolicyRefCode))
                                        {
                                            var prefx4 = "Underwriting_InsurerPolicyDistribution";
                                            var prefx6 = prefx4 + ".index";
                                            for (var i = 1; i <= Model.Underwriting_InsurerPolicyDistribution.Count; i++)
                                            {
                                                var itemIndex3 = string.Format("X{0}", i);
                                                var n7 = string.Format("{1}[X{0}].PolicyRefCode", i, prefx4);
                                                var n8 = string.Format("{1}[X{0}].InsBranchCode", i, prefx4);
                                                var n9 = string.Format("{1}[X{0}].InsuerLeadCode", i, prefx4);
                                                var n10 = string.Format("{1}[X{0}].PercentageCover", i, prefx4);
                                                var n11= string.Format("{1}[X{0}].isConfirmed", i, prefx4);
                                                <tr>
                                                    <td>
                                                        <input type="hidden" name="@prefx6" value="@itemIndex3" />
                                                        @Html.Hidden(n7, Model.Underwriting_InsurerPolicyDistribution[i - 1].PolicyRefCode, new { id = n7 })
                                                        <button type="button" style="background-color:#89006e !important; color:#fff; text-align:center" class="btn-primary btn-xs delbtn"><span class="glyphicon glyphicon-remove"></span></button>
                                                    </td>                                                    
                                                    <td>
                                                        @Html.DropDownList(n8, new SelectList(Html.InsurerBranchDropDownList(), "InsBranchCode", "FullDescription", Model.Underwriting_InsurerPolicyDistribution[i - 1].InsBranchCode), new { id = n8, @class = "form-control input-sm" })
                                                        @Html.ValidationMessage(n8, "", new { @class = "text-danger" })
                                                    </td>
                                                    <td>
                                                        @Html.CheckBox(n9, Model.Underwriting_InsurerPolicyDistribution[i - 1].InsuerLeadCode, new { id = n9, @class = "form-control input-sm" })
                                                        @Html.ValidationMessage(n9, "", new { @class = "text-danger" })
                                                    </td>
                                                    <td>
                                                        @Html.TextBox(n10, Model.Underwriting_InsurerPolicyDistribution[i - 1].PercentageCover, new { id = n10, @class = "form-control input-sm", @style = "width: 65px;" })
                                                        @Html.ValidationMessage(n10, "", new { @class = "text-danger" })
                                                    </td>
                                                    <td>
                                                        <div class="form-check" type="checkbox">
                                                            @Html.CheckBox(n11, Model.Underwriting_InsurerPolicyDistribution[i - 1].isConfirmed, new { id = n11, @class = "form-check-input" })
                                                            @Html.ValidationMessage(n11, "", new { @class = "text-danger" })
                                                        </div>
                                                    </td>
                                                    
                                                </tr>
                                            }
                                           }

                                        }
                                    </table>
                                    <input type="submit" class="btn btn-primary" value="Add New" onclick="addRow('requestItems'); return false;" />
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Next</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>




@section scripts {
    <script src="~/Scripts/chosen.jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

        $(document).ready(ReadyMenu);


        $("#Underwriting_InsurerPolicyDistribution[X1].InsBranchCode").chosen({
            disable_search_threshold: 5
        });


  });

</script>

Best Regards

Abiodunajai

SurferOnWww 4,711 Reputation points

2023-07-24T00:41:51.37+00:00

What is the "model" you use? Ajax Control Toolkit ModalPopupEntender? jQuery UI Dialog? Bootstrap Model? or something else?

abiodunajai 396

Thank you SuferOnWww for your response.

Please find the Model details under Lan Huang.

 public class DropdownDTO
    {
        public string InsBranchCode  { get; set; }
        public string FullDescription { get; set; }
    }


    public class Underwriting_InsurerPolicyDistribution
    {
        public string InsBranchCode  { get; set; }
        public string PolicyRefCode{ get; set; }
        public string InsurerLeadCode{ get; set; }
        public string PercentageCover{ get; set; }
        public string InsBranchCode  { get; set; }
        public bool isConfirmed{ get; set; }

    }


       public static IEnumerable<DropdownDTO> InsurerBranchDropDownList(this HtmlHelper htmlHelper)
        {
            var context = HttpContext.Current;

            var itemList = new List<DropdownDTO>();

            if (itemList == null)
            {
                var list = new List<DropdownDTO>();
                list.Add(new DropdownDTO() { InsBranchCode = string.Empty, FullDescription = "Please select a Branch...." });
                list.Add(new DropdownDTO() { InsBranchCode = "0001", FullDescription = "United State" });
                list.Add(new DropdownDTO() { InsBranchCode = "0002", FullDescription = "Europe" });
                list.Add(new DropdownDTO() { InsBranchCode = "0003", FullDescription = "Australia" });
                list.Add(new DropdownDTO() { InsBranchCode = "0004", FullDescription = "Asia" });
                itemList = list;
            }
            return itemList;
        }

Best regards,

Abiodunajai

Accepted answer

0 additional answers

Your answer

SurferOnWww 4,711 Reputation points

2023-07-24T00:41:51.37+00:00

What is the "model" you use? Ajax Control Toolkit ModalPopupEntender? jQuery UI Dialog? Bootstrap Model? or something else?
abiodunajai 396 Reputation points

2023-07-24T09:02:38.6+00:00

Thank you SuferOnWww for your response.

Please find the Model details under Lan Huang.

public class DropdownDTO { public string InsBranchCode { get; set; } public string FullDescription { get; set; } } public class Underwriting_InsurerPolicyDistribution { public string InsBranchCode { get; set; } public string PolicyRefCode{ get; set; } public string InsurerLeadCode{ get; set; } public string PercentageCover{ get; set; } public string InsBranchCode { get; set; } public bool isConfirmed{ get; set; } } public static IEnumerable<DropdownDTO> InsurerBranchDropDownList(this HtmlHelper htmlHelper) { var context = HttpContext.Current; var itemList = new List<DropdownDTO>(); if (itemList == null) { var list = new List<DropdownDTO>(); list.Add(new DropdownDTO() { InsBranchCode = string.Empty, FullDescription = "Please select a Branch...." }); list.Add(new DropdownDTO() { InsBranchCode = "0001", FullDescription = "United State" }); list.Add(new DropdownDTO() { InsBranchCode = "0002", FullDescription = "Europe" }); list.Add(new DropdownDTO() { InsBranchCode = "0003", FullDescription = "Australia" }); list.Add(new DropdownDTO() { InsBranchCode = "0004", FullDescription = "Asia" }); itemList = list; } return itemList; }

Best regards,

Abiodunajai

Answer 1

Lan Huang-MSFT 30,191 Microsoft External Staff

Hi @abiodunajai,

You'd better provide the rest of your code so we can reproduce your issue.

Based on the code you've provided so far, you'd be better off using a class to position the dropdown. instead of an ID.

@Html.DropDownList(n8, new SelectList(Html.InsurerBranchDropDownList(), "InsBranchCode", "FullDescription", Model.Underwriting_InsurerPolicyDistribution[i - 1].InsBranchCode), new { id = n8, @class = "form-control input-sm test" })


@section scripts {
    <script src="~/Scripts/chosen.jquery.min.js"></script>
    <link href="~/Content/chosen.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {

            $(".test").chosen({
                disable_search_threshold: 5
            });
        });

    </script>
}

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

abiodunajai 396

Thank you so much Lan Huang for your prompt response.

Apologies for the incomplete code. Please find below the other necessary code for your usage and advise.

public class DropdownDTO
    {
        public string InsBranchCode  { get; set; }
        public string FullDescription { get; set; }
    }


    public class Underwriting_InsurerPolicyDistribution
    {
        public string InsBranchCode  { get; set; }
        public string PolicyRefCode{ get; set; }
        public string InsurerLeadCode{ get; set; }
        public string PercentageCover{ get; set; }
        public string InsBranchCode  { get; set; }
        public bool isConfirmed{ get; set; }

    }


       public static IEnumerable<DropdownDTO> InsurerBranchDropDownList(this HtmlHelper htmlHelper)
        {
            var context = HttpContext.Current;

            var itemList = new List<DropdownDTO>();

            if (itemList == null)
            {
                var list = new List<DropdownDTO>();
                list.Add(new DropdownDTO() { InsBranchCode = string.Empty, FullDescription = "Please select a Branch...." });
                list.Add(new DropdownDTO() { InsBranchCode = "0001", FullDescription = "United State" });
                list.Add(new DropdownDTO() { InsBranchCode = "0002", FullDescription = "Europe" });
                list.Add(new DropdownDTO() { InsBranchCode = "0003", FullDescription = "Australia" });
                list.Add(new DropdownDTO() { InsBranchCode = "0004", FullDescription = "Asia" });
                itemList = list;
            }
            return itemList;
        }

Your kind assistance is anticipated and will be greatly appreciated.

Best regards,

Abiodunajai

abiodunajai 396

Thank you, Lan Huang.

I attempted the suggested script by placing the "test" in a <div class="test">

as shown below but the Drop Down is not showing at all.


                                                    <td>
                                                        <div class="test">
                                                            @Html.DropDownList(n8, new SelectList(Html.InsurerBranchDropDownList(), "InsBranchCode", "FullDescription", Model.Underwriting_InsurerPolicyDistribution[i - 1].InsBranchCode), new { id = n8, @class = "form-control input-sm" })
                                                            @Html.ValidationMessage(n8, "", new { @class = "text-danger" })
                                                        </div>
                                                    </td>



@section scripts {
    <script src="~/Scripts/chosen.jquery.min.js"></script>
    <link href="~/Content/chosen.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {

            $(".test").chosen({
                disable_search_threshold: 5
            });
        });

    </script>
}

I hope it was implemented correctly.

Best regards,

Abiodunajai

Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2023-07-24T09:57:02.6166667+00:00

Hi @abiodunajai,

First, you need to add the chosen.css file. Use a class to position the dropdown list. and add width in chosen method.Also, the number of disable_search_threshold is less than the number of elements in the select dropdown box.

Here are my test results:

abiodunajai 396

Thank you so much Lan Huang for your assistance so far.

The ".test" class is now working for the first item in the table. However, when I clicked on the "Add New" button it displays the next row but the Drop Down is not opening up. How do I integrate the addRow() method's script below with the working ".test" class.


<input type="submit" class="btn btn-primary" value="Add New" onclick="addRow('requestItems'); return false;" />


<table id="requestItems" class="table table-bordered table-striped table-hover" cellspacing="0">


function addRow(tableID) {
        var table = document.getElementById(tableID);
        //var rowZeroId = table.rows[0].id;
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        row.id = "X" + rowCount;
        var colCount = table.rows[1].cells.length;

        for (var i = 0; i < colCount; i++) {

            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/X1/g, row.id);
            switch (newcell.childNodes[0].type) {
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
                case "hidden":
                    newcell.childNodes[0].value = "";
                    break;
            }
        }
    }

Please note that the onclick="addRow"(.requestItems') and table id="requestItems" are already included in the previously sent Razor View. the only script missing is the function addRow(tableID) shown above.

I will appreciate your assistance in integrating these two together as they work hand in hand. It was working well previously before the introduction of the ".test" class after which it stops working.

Whilst appreciating your assistance so far, I will be eternally grateful if you can assist me to resolve the addRow() function.

Best regards,

Abiodunjai

AgaveJoe 1,510 Reputation points

2023-07-24T13:11:09.9366667+00:00

The code Lan Huang-MSFT suggested assumes the chosen selects exists in the HTML and are initialized when the page loads in the browser (ready).

It seems you have a new requirement and must initialize a dynamically generated chosen select when a new row is added.

Add code to the for loop to initialize the new chosen select. You'll also need to update the inputs names with the new index. There is still JavaScript designed and written especially if a user can delete a row.

Use the browser's dev tools to debug your code.
abiodunajai 396 Reputation points

2023-07-24T15:37:55.64+00:00

Thank you AgaveJoe for your guide.

Yes, it's a new requirement to dynamically generate chosen select when a new row is added, although it was working without the chosen select, however, the user has to scroll through a long list which is sometimes quite frustrating.

Any assistance with a code snippet to the for loop to initialize and update will be greatly appreciated. Please note that it is the same Dropdown, only that it's a new row.

The script for the row deletion is in order as at now, it's only the addRow() that is having issues.

Best regards,

Abiodunajai

abiodunajai 396

Thanks a million, Lan Huang. You have been so wonderful for your contributions. AgaveJone, you are highly appreciated for your guide. I have figured it out. The final script to implement the addRow() is shown below for someone who might have the same issue.

  function addRow(dataTable) {
        var table = document.getElementById(dataTable);
        var rowCount = table.rows.length;
        if(rowCount < 500){
            $(".chosen_select_L").chosen('destroy');
            var row = table.insertRow(rowCount);
            row.id = "X" + rowCount;
            var colCount = table.rows[1].cells.length;

            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/X1/g, row.id);

                switch (newcell.childNodes[0].type) {
                    case "text":
                        newcell.childNodes[0].value = "";
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
                    case "hidden":
                        newcell.childNodes[0].value = "";
                        break;
                }
            }
        }

        $(".chosen_select_L").chosen({
            width: "95%",
            no_results_text: "Oops, nothing found!",
            disable_search_threshold: 5
        });
    }

You are all greatly appreciated for your time and efforts to get this issue resolved.

Best regards,

Abiodunajai

AgaveJoe 1,510 Reputation points

2023-07-24T18:02:22.1433333+00:00
although it was working without the chosen select, however

It depends on what you mean by "working". Keep in mind, we cannot see all your code. If the code does a standard form post then there are model binder naming convention bugs. The design can end up with duplicate input names and broken name indexes.

As I stated in my previous post, copying HTML does not initialize a chosen widget. You have to actually write code to initialize a new chosen widget.

$("newChosenSelector").chosen({ disable_search_threshold: 5 });
abiodunajai 396 Reputation points

2023-07-26T14:03:53.98+00:00

Thank you so much AgaveJoe.

I have followed your guide to initialize the chosen widget in the script.

Thank you so much for your continuous assistance.

Best regards,

Abiodunajai

Share via

How Do I use Chosen iquery Search Dropdown with Modal PoPup

0 additional answers

Your answer