Because of performance purposes I put loading of jQuery scripts at the bottom of the page (just before the closing body tag).
My question is how to enable page specific scripts? I don't want to put everything inside $(document).ready method (again because of performance purposes).
Update: I'm using a template system so I put jQuery loading in the template. That way jQuery calls don't get recognized even if I put them at the end of a specific page because jQuery is not loaded at that point.
I'm not 100% sure what you're asking, but if it's what I think it is, the answer is that you can't have your cake and eat it too.
It seems that you've moved jQuery to the button of the page but have some elements of the page that you want to use JavaScript on, but don't want to wait for document.ready for all of the? Maybe something like the following?
<html> <body> <ul id="maybe-some-menu-that-needs-js-initialization-for-example"> ... </ul> <script> /* javascript goes here that uses jquery for the above menu (or whatever) AND you don't want to wait for document.ready for this to happen */ </script> ... <script src="including jquery here"></script> <script src="including other scripts here"></script> </body> </html> If that's the case, then refer to what I said from the get-go. You'll have to move jQuery (at least the library, not necessarily all your other JavaScript) back to the top of the page. Either that or don't us jQuery for the things you don't want to wait for document.ready for.
Edit: If you want to perform actions based on the page that you are, then there are two methods, each better and more preferable then the last.
location.pathname to determine what functionality you need.
location.pathname will give you the path of the page. For example, for this page, it is "/questions/1558816/using-jquery-put-at-the-bottom-of-the-page-on-specific-page/1559027"The $(document).ready() will not be overridden when using it more than once, so you can load 2 script files that both adds functionality to be run when the document is loaded.
using $(document).ready, it doesn't matter where in the page it is, as it will only execute when the DOM has finished loading. The only code that should go inside $(document).ready is code that needs to be set up when the DOM has loaded, e.g. event handlers, any effects/animations that you want to run as soon as the DOM has finished loading, etc. Other functions do not need to be in $(document).ready, such as a function used in sorting an array, named functions called when events are raised, etc.
As has been pointed out, you can have more than one $(document).ready function on a page, as what you are doing is specifying a function (named or anonymous) to execute when the ready event (a jQuery event) is raised.
EDIT:
That article that you have linked to in the comments on this answer provides and example of what you are trying to achieve. As an example, you would have a JavaScript file with the following setup to declare a global variable
var myPageLibrary = { homePage : { init : function() { $(document).ready(function() { /* page specific functions that need to run, for exmaple, binding event handlers, etc */ }); } }, aboutPage : { init : function() { $(document).ready(function() { /* page specific functions that need to run, for exmaple, binding event handlers, etc */ }); } } } /* you might have functions here that are bound to events. Here is an example */ function showSubMenu(e) { $(e.target).next('div').show(); } function hideSubMenu(e) { $(e.target).next('div').hide(); } Then in your pages, you would have the following structure (this example uses the home page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>This is my Home Page</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="path-to-myPageLibrary.js"></script> <script type="text/javascript"> myPageLibrary.homePage.init(); </script> </head> <body> <!-- Page content --> </body> </html> with jQuery script file referenced first, followed by myPageLibrary script file, followed by the script block calling myPageLibrary.homePage.init();
If I understand correctly, you need to put some javascript code that calls jquery in the middle of your page. But your jquery include is at the bottom of the body. You can do this by calling the jquery at the window.load event. This event fires after all async scripts have loaded and executed. e.g.:
<body> <script> $("#myElem").val(); // fails, "$" not defined window.addEventListener("load", function(evt) { $("#myElem").val(); // ok, jquery is loaded }); </script> <span id="myElem>hi</span> <script src="//cdn.jquery.com"></script> </body> This allows you to call jQuery plugin methods in the body and load jQuery plugin on to bottom of the page headjs
As I understand your issue:
If I got you right, here is the solution:
In <head> define global task array:
... <script> const JQUERY_READY_TASKS = [] </script> </head> After you load jQuery and other scripts define:
... <script> jQuery(document).ready(() => { // Execute all tasks added by templates for (let n=0; n<JQUERY_READY_TASKS.length; n++) JQUERY_READY_TASKS[n](jQuery) } }); </script> </body> Wrap initialization code of your templates in functions:
... <script> // Within template JQUERY_READY_TASKS.push(($) => { // Template init code // You can use $ as jquery here }) </script> ... Just have a page-specific $(document).ready().
Have you tried "@section script"? It will automatic add the codes at the end of the page, thus you can have page specific jQuery scripts.
@section scripts { <script> jQuery(document).ready(function () { //put your jQuery codes here }); </script> } 
@section would be specific
$(document).ready()