Looking for troubleshooting advice on conflict with other JS libraries

dwmosman

(update - moved from general to community forum, test case loaded to jsfiddle)

I have to generate a fairly straightforward table into a web page that is already full of corporate javascript libraries which I really can't get rid of. The table with DataTable is working very nicely but there is some kind of conflict with three of the libraries. If any one of the three links is uncommented, I lose my page and search input boxes.

I'm thinking that the initialization script:

<script type="text/javascript">
    $(document).ready(function () {
        $('#courseList').DataTable();
    });
</script>

is never getting executed when one of these three libraries are activated but I'm not sure how to check.

Since I'm new to jQuery and limited in Javascript, I'm a little at a loss how to proceed.

I would appreciate any advice on how to proceed here (or maybe a link to the dummies guide to jQuery debugging?? :) )

-- Doug

Notes:

I did run Data Tables debugger with the following result:
ukibuf - with the offending library links comments out so both page and search text boxes exist.
exist.
ucijih - one of the problem links is uncommented and neither page and search text boxes exist.

I have also put a test case in jsFiddle.

share link: http://jsfiddle.net/dwmosman/w43AB/4/

link to share full screen result: http://jsfiddle.net/dwmosman/w43AB/4/embedded/result/

The javascript libraries are quite large. I'm running jQuery 1.11.0 from the Frameworks and Extension section.

In the javascript window I have the following

1 - 523 Migrate 1.2.1

524 - 14907 DataTables 1.10

14914 - 15554 t4_jQuery

15556 Datatable activate script as listed above

In this setup the DataTable page window and search window will not be displayed at the top of the page. However, if t4_jQuery is deleted, then the page and search text boxes will re-appear.