How to use jQuery .load so that it pulls in an element after all scripts have finished running?

Mike Published at Dev

Mike

I am currently using datatables.js to provide a directory on a WordPress site: example.com/directory.

I added the ability to filter the directory using a querystring so I can create links that when loaded show a subset of the directory: example.com/directory/?search=query.

Here is the code I am using on the directory page:

<script charset="utf-8" type="text/javascript">// <![CDATA[
jQuery(document).ready(function() {
    jQuery.urlParam = function(name){
        var results = new RegExp('[\\?&#038;]' + name + '=([^&#]*)').exec(window.location.href);
        if (!results)
        {
            return '';
        }
        return unescape(results[1]) || '';
    }

    jQuery('#directory').dataTable( {
         "sPaginationType": "full_numbers",
         "aLengthMenu": [[15, 30, -1], [15, 30, "All"]],
         "iDisplayLength" : 15,
         "oSearch": {"sSearch": jQuery.urlParam('search')}
         }).rowGrouping()

    jQuery('div.dataTables_filter input').focus();
});
// ]]></script>

And for a page to that includes a subset of the directory: example.com/departmentpage.

<script charset="utf-8" type="text/javascript">// <![CDATA[
jQuery(document).ready(function() {
    jQuery("#result").load("http://example.com/directory/?search=departmentname #directory > *");
});
// ]]></script>
<div id="result"></div>

The .load function works but it pulls in the entire raw table, not the table as it normally looks on the main directory page. My assumption is that the .load function is pulling the #directory before the scripts run.

Is there a way to make .load wait until the scripts on the included page have run before it pulls the content into the includer page?

tr3online

You are pulling #directory > * with .load(). If the script required to render the HTML you are pulling in is not contained in your .load() statement, nothing will happen. You will only be pulling raw HTML in.

You need to either include the script, or pull in the HTML via a different method and re-run the javascript needed to convert the table to its desired affect.

Upon initial inspection of the plugin you are using, I would recommend trying to use the sAjaxSource method to grab your data.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-7

Comments

0 comments

From Dev

Python, multiple scripts, each with multiple threads running, how can one script determine when threads in other scripts are finished?

From Dev

Related Related

Article