refresh contents of div without id

Question

I am trying to add a refresh button to a table. I currently am using.

var $target = $(this).parent().parent().next('.box');
$target.load("$site #" +$target.prop("nodeName");

There are many .box on the page. When I use the .load() is there a way I can reference the specific .box maybe by location in the DOM?

Also, is there a way to delay the table loading tell the update in the database has finished? I handle the update to the database before i load the content, but it still seems to load as if the database update had not happened, and a refresh is required.

Thank you

Answer 1

You can reorganize the Html a little bit, for example wrapping the .box-content inside the .refresh div

<section class="col col-lg-8">
    <div class="box">
        <div class="box-header">
                <h2> <i class="fa fa-user"></i><span class="break"></span>Recently Added</h2>

            <div class="box-icon"><a class="btn-minimize" href="#"><i class="fa fa-chevron-up"></i></a>

            </div>

        </div>
        <!-- Box Header -->
        <div class="box-icon"><a class="btn-reload" href="#">reload<i class="fa fa-circle"></i></a>


        <div class="box-content">
            <table class="table table-striped table-bordered bootstrap-datatable datatable">
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Date registered</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
   </div>

then var $target = $(this).parent().parent().next('.box-content'); can be changed to something like:

var $target = $(this).find('.box-content');

Otherwise the .parent.parent style you have now should work as long as the HTML maintains that layout for each section; You are referencing it's location in the DOM using the parent.parent.next code since you know that will be the location of the proper box-content div.

Edit: To elaborate on why find will work with your html structure .find and the similar .children elements only look at descendant elements: from http://api.jquery.com/find/

Based on the sample Html you showed me:

<.box>
    <box descendant>
        <descendant element>
    </box descendant>
    <box descendant2>
    </box descendant2>
</box>
<.box>
    <box descendant>
        <descendant element>
    </box descendant>
    <box descendant2>
    </box descendant2>
</box>

Doing:

 $(.box).click(function(){
    $(this).find(descendant element)
});

Will always get the correct element since .find will stay within the parent element