Home » Javascript » Return table with ajax based on select dropdown selection

Return table with ajax based on select dropdown selection

Posted by: admin August 19, 2018 Leave a comment

Questions:

I have a chosen- select html dropdown list of users. I want to select a user from that select list and return a table of all Assets(computers) associated with that particular user. I have the table and Dropdownlist binded to a SQL database that is populated by a stored procedure call in the code behind.

I have code to filter a table based on the selector, but I’m wanting to generate a new grid (Post) based on every selection. I’m in search of some ajax code to accomplish this task. The function below (displaygrid) only filters based on selection, I want to generate new table based selection for different users.

I’m fairly new to Javascript/ajax so any help is greatly appreciated. Thanks in advance!

Script code :

<script>
    $(document).ready(function () {
    $(".chzn-select").chosen().change(function () {  
          displaygrid();                      
    });
});

 function displaygrid() {

    $('#ddlUser').change(function () {
        var selection = $(this).val();
        $('tblEquipment')[selection ? 'show' : 'hide']();
        if (selection) {  // iterate only if `selection` is not empty
            $.each($('#tblEquipment tbody tr'), function (index, item) {
                $(item)[$(item).is(':contains(' + selection + ')') ? 
                    'show' : 'hide']();
            });
         }
      });
   };

 </script>

HTML code:

<select id="ddlUser" runat="server" datavaluefield="UserID" datatextfield="FullName" class="chzn-select" style="width: 350px;" tabindex="2">
        </select>


 <table id="tblEquipment" class="tablesorter">
            <thead>
                <tr>
                    <th style="display: none"></th>
                    <th>AssetTagNumber</th>
                    <th>ManufacturerName</th>
                    <th>TypeName</th>
                    <th>AssetName</th>
                    <th>Receptiondate</th>
                    <th>StartDate Size</th>
                    <th>Active?</th>
                </tr>
            </thead>
            <asp:Repeater ID="rptEquipment" runat="server" EnableViewState="false">
                <HeaderTemplate>
                    <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td class="mmid" style="display: none"><%# Eval("AssetID") %></td>
                        <td><%# Eval("AssetTagNumber") %></td>
                        <td><%# Eval("ManufacturerName") %></td>
                        <td><%# Eval("TypeName") %></td>
                        <td><%# Eval("AssetName") %></td>
                        <td><%# Eval("Receptiondate") %></td>
                        <td><%# Eval("StartDate") %></td>
                        <td><%# Eval("Active") %></td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </tbody>
                </FooterTemplate>
            </asp:Repeater>
        </table>
Answers: