'Filter a repeater in a modal using JQuery

Any assistance would be appreciated.

I have a repeater with a list of events. One of the columns has an anchor that when clicked, opens a modal with a dynamically built repeater.

I need to use JQuery to filter the modal repeater based on a specific value

This is the anchor that is clicked:

<a class="openModal" id="btnSchedule" href="javascript:ShowModal();">View Schedule</a>

This is the modal with the repeater:

<!-- Modal -->
<div class="modal fade" id="eventSchedule" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="Title">Event Schedule</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <%-- <button type="button" runat="server" class="btnServerSchedule" ID="btnServerSchedule" OnClick="btnServerSchedule_Click"></button>--%>
         <asp:Repeater ID="rptEventSchedule" runat="server" OnItemDataBound="rptEventSchedule_ItemDataBound">
                    <HeaderTemplate>
                        <div class="table-responsive">
                            <table class="table table-bordered" id ="modalEvents">
                                <tr>
                                    <th style="width: 5%">
                                        <signify:SignifyLiteral ID="lblEventId" runat="server" Text="Ref" />
                                    </th>
                                    <th style="width: 5%">
                                        <signify:SignifyLiteral ID="lEventDate" runat="server" Text="Date" />
                                    </th>
                                    <th style="width: 5%">
                                        <signify:SignifyLiteral ID="lDayOfWeek" runat="server" Text="Day Of Week" />
                                    </th>
                                    <th style="width: 5%">
                                        <signify:SignifyLiteral ID="lStartTime" runat="server" Text="Start Time" />
                                    </th>
                                    <th style="width: 5%">
                                        <signify:SignifyLiteral ID="lEndTime" runat="server" Text="End Time" />
                                    </th>
                                    <th style="width: 10%;">
                                        <signify:SignifyLiteral ID="lDescription" runat="server" Text="Description" />
                                    </th>
                                </tr>
                    </HeaderTemplate>
                        <ItemTemplate>
                            <tr id="trItems" runat="server">
                                <td class="eventId">
                                    <asp:Literal ID="lblEventID" runat="server" Text='<%#Bind("FKObjectID") %>'></asp:Literal>
                                    <asp:Hiddenfield ID="hfEventId" runat="server" Value='<%#Bind("FKObjectID") %>'></asp:Hiddenfield>
                                </td>
                                <td>
                                    <asp:Literal ID="lDate" runat="server" Text='<%#Bind("ScheduleDate") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="lblDayOfWeek" runat="server" />
                                </td>
                                <td>
                                    <asp:Literal ID="lStartTime" runat="server" Text='<%#Bind("StartTime") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="lEndTime" runat="server" Text='<%#Bind("EndTime") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="lReferenceDescription" runat="server" Text='<%#Bind("ReferenceDescription") %>' />
                                </td>
                            </tr>
                             <tr>
                                <td>
                                    <asp:HiddenField ID="hfPK" runat="server" Value='<%#Bind("PK") %>' />
                                    <asp:HiddenField ID="hfObjectID" runat="server" Value='<%#Bind("ObjectID") %>' />
                                    
                                </td>
                             </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                        </div>
                    </FooterTemplate>
                </asp:Repeater>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

This is the JavaScript/JQuery section:

I have a document ready function to determine which event is clicked and send through that ID value to ShowModal():

var eventId = 0;
$(document).on("click", ".openModal", function (item) {
         eventId = $('#eventList tr').find('.eventId').find('.bt-content').html();
         //alert(eventId);
         //$('#eventList')
         //    .addEventListener('click', function (item) {
                 
         //    });
     });

This is the showModal() function I have created to do the filtering when the modal is opened:

function ShowModal() {
         $('#eventSchedule').modal('show');
         $('#eventSchedule').on('shown.bs.modal', function (e) {
             eventId;
             //var tr = $('#modalEvents tr');
             //var table = $('#modalEvents').;
             //var row = table.row(tr);
             //$('#modalEvents tr').each(function () {
             //    
             //    if (item == eventId) {
             //        $(this).hide();       //-------------- This hides everything
             //    }
             //});

             $('#modalEvents tr').each(function () {
                 $('td').filter(function () {
                     debugger;
                     return $(this).text().indexOf('2') === eventId;
                 }).closest('tr').hide();      //-------------- This hides nothing


                  //var item = $('#modalEvents tr').closest('tr').find('.eventId').text();
                  //const result = item.includes('2');
                  //console.log(result);  //-------------- returns true but when I add eventId it returns false
                  //$('#modalEvents tr:contains("2")').closest('tr').hide();
              
             });


             //if (item == eventId) {
             //    item.hide();
             //}

             //if (row.data() != null && row.data() != eventId) {
             //    row.child(format(row.data())).hide();
             //    $('#modalEvents tr td[colspan="8"]').attr("colspan", "10");
             //    tr.addClass('hidden');
             //}
             //$('#modalEvents tr').each(function () {
             //    debugger;
             //    if ($('#modalEvents tr').find('.eventId').text() === eventId) {
             //        $(this).hide();
             //    } else {
             //        $(this).show();
             //    }                         //-------------- This hides nothing
             //    //$('*[id*='+eventId+']').hide();
             //});
         });
     }

How do I hide specific tr's based on the eventId passed through to ShowModal()?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Filter a repeater in a modal using JQuery

Sources

Related Questions