Search code examples
mysqlajaxlaravelfunctiontags

Laravel/Ajax: use a class/id in an ajax function to call table content instead of tag

Firstly, here is my UI:

1

My output to my right displayed as a result of using the tag <tbody> inside my ajax:

success: function (response){
    var tbody="";
    $.each(response.all_categories, function (key, cat) {
    tbody+=`
    <tr>
        <td class="p-0 btn-category-list-col">
          <button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
        </td>
    </tr>`; });

    $('tbody').html(tbody) }

My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:

2

Is there some way to make my ajax function read a class or an id instead of the tag itself?:

So kind of like my line tbody+= becomes: tbody(class/id)+=

Here is my table that uses two tbody tags:

    <div class="col-md-2 border">
        <table id="categoryList" class="table">
            <thead>
                <tr>
                    <th class="thead-category-list">Category List</th>                
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

            <div class="col-md-10 border bbr-table-col">

                <div id="success_message"></div>
                <table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
                    <thead>
                        <tr class="bbr-table text-light">
                            <th>Group Name</th>                
                            <th>Group Type</th>
                            <th>Group Users</th>
                            <th>Status</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
    </div>

any help would be appreciated thanks

Solution

  • If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
    From the html above you could use the table class to identify it

    $('table.table-striped tbody').html(tbody);

    or you could fix the invalid duplicate ids and use the id to select the correct table

    <div class="col-md-2 border">
    <table id="side-categoryList" class="table">
        <thead>
            <tr>
                <th class="thead-category-list">Category List</th>                
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

        <div class="col-md-10 border bbr-table-col">

            <div id="success_message"></div>
            <table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
                <thead>
                    <tr class="bbr-table text-light">
                        <th>Group Name</th>                
                        <th>Group Type</th>
                        <th>Group Users</th>
                        <th>Status</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
</div>

    $('#main-categoryList tbody').html(tbody);