0

I created a master by putting together various sections that repeat themselves in every page, I created a Head, Footer and menu section.

In the footer I put my scripts <script src tags. I have a <script srctag that contains a script that all the pages use, this script has a document.ready function.

I want to use another script like in this case is a datatables script in the example of the page it shows the script like this

$(document).ready(function() {
$('#example').DataTable( {
    scrollY:        300,
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
    fixedColumns:   true
} );
} );

I want to put that script inside a javascript file and put it at the end of the page and not in the master page footer section because that script will only be used by one page, but since that script needs a document.ready function, can I create two scripts with a document.ready function? one before the other? what is the best practice to solve this?

Here is the script that is in all the pages

$(document).ready(function () {
$('#side-menu').metisMenu();



//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function () {
    $(window).bind("load resize", function () {
        topOffset = 50;
        width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

    height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
    height = height - topOffset;
    if (height < 1)
        height = 1;
    if (height > topOffset) {
        $("#page-wrapper").css("min-height", (height) + "px");
    }
});
var url = window.location;
var element = $('ul.nav a').filter(function () {
    return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
    element.addClass('active');
}
});
Bill_Data23
  • 659
  • 2
  • 14
  • 30
  • Yes; you can call functions as many times as you want. – SLaks Aug 29 '16 at 18:09
  • 2
    Possible duplicate of [Can you have multiple $(document).ready(function(){ ... }); sections?](http://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections) – Cave Johnson Aug 29 '16 at 18:11
  • Additionally, calling $(document).ready() multiple times keeps the order of the callbacks you set. See http://stackoverflow.com/questions/10883786/jquery-enforce-order-of-execution-of-document-ready-calls – kamerynn Aug 29 '16 at 18:14

0 Answers0