How alleviate multiple jQuery's files in a framework?

ReneFroger

First, I would like to thank you all for the tremendous work on the awesome DataTables! And sorry for my poor English.

I would like to use the DataTables, but I stumbled on many problems.

In a company we are using a custom framework, where many applications are loaded. The applications are loaded within a template window. Outside the template window, the default jQuery 1.6.1 from the framework is being loaded. Even when your template file is empty.
Unfortunately, we have no possibility to update the jQuery 1.6 to 2.0 because another applications in the framework will not work anymore then. It's company policy.

The DataTables use jQuery >1.9. So inside the template file of the application, I loaded the most recent jQuery with this inline code:

 <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js">
 </script>

As result, I see in the source code two jQuery scripts are being loaded with the application, namely first 1.6 and then 1.10.2. While DataTables fully loaded, I see in the console output, there are some errors, like this:

Uncaught TypeError: undefined is not a function

fSetTab

(anonymous function)

e.resolveWith

e.extend.ready

c.addEventListener.

Uncaught TypeError: undefined is not a function

window.onerror

It seems I have same problem as this user on StackOverflow

However, even with these errors, the DataTables worked well.

The problems occurs, when I would like to customize the DataTables. An option like this:

    $(document).ready( function() {
    $('#table_id').DataTable( {
               "language": { "thousands": "."}
                  } )
                  } )

This worked so far. But when I add an extension, like FixedHeader:

$(document).ready( function () {
    var table = $('#table_id').DataTable();
    new $.fn.dataTable.FixedHeader( table );
} );

I still see the table. But there is still no fixed header.

When I looked in the console, new errors are added:

Uncaught TypeError: undefined is not a function

(anonymous function)

c

p.fireWith

x.extend.ready

Uncaught TypeError: undefined is not a function

window.onerror

It's clear to me, the problem is the jQuery 1.6 and 1.10.2. being loaded. 2 jQuery files within a page.

But alas, there is no way to turn jQuery 1.6 off (the code to load is not visible within template file). And another applications are depending on jQuery 1.6.

If I exclude jQuery 1.10.2, the DataTables will not work as expected. I discovered jQuery.noconflict, but I couldn't figure it out how to get working.

Any thoughts how I could handle with two jQuery files with DataTable?

Many thanks in advance for your reply, if you want.

ReneFroger

allan

Ideally you would load only one jQuery file per page. DataTables 1.9.x will work with jQuery 1.3.2 and newer. DataTables 1.10 requires jQuery 1.7 or newer.

Another option is that you could use noConflict to assign jQuery to a variable and then modify the DataTables script slightly (right at the very end) to take that new variable rather than the current jQuery.

Allan

ReneFroger

Thanks for your reply.

Seems the TableTools, especially the function to export to CSV, is available in DataTables 1.9.x too. I really appreciate it. I will further look into .

Have a great day!

allan

It is yes. 1.9 is no longer supported directly (it can be with a support contract, but generally speaking not) but it does still work :-)

Allan