a solution to include jquery & js in the end of the html while at the same time a control which is included in the middle requires $(document).ready_问答_开发者

i am building a website using asp.net mvc and jquery.

as a best practice its known that including javascript should be done at the end of the html page.

so i basically include jquery.js and other js files in the end of the html before the /body tag.

now i have some controls which are included in the page as partials. and they need to add functionally to $(document).ready.

but i write the code as a script tag in the partial then the jquery library wont be even included at that time and i cant 开发者_JAVA百科include this javascript at the end of the html from within the partial. since the partial is included in the middle of the html.

Move all javascript in single file(you may exclude jQuery file) and move it to the bottom.

If you are talking of good practice then, then writing inline javascript is not a good practice too.

So I would suggest move all your java script to single file,there are many tools available that merge multiple javascript files and crunch them, use those!!

Edit1

You may try this:

//define this at before body (or at the beginning of body)
var arrReadyCollection = [];

Inside controllers:

arrReadyCollection.push(site.module.Dialog_AcceptChanges);
arrReadyCollection.push(some_thing_Else);

At the end, after jQuery file

for (i=0;i<arrReadyCollection.length; i++)
{
     var fn= arrReadyCollection[i];
     $(document).ready(fn);
}

Note: this is not recommended way, its just way you can solve your problem

You should use a javascript loader like LABjs.

You can use it to run javascript when certain libraries are loaded and run.

<head>
  <script src="lab.js"></script>
</head>
<body>
  <script>
    // $LAB uses async loading, no need to deferr to the end of body
    // keeping a reference to the $LAB deferred is important, so we can
    // use it from within partials (see below)
    myPage.$LAB = $LAB
      .script('someScript.js')
      .script('someOtherScript.js')
      .wait(function () {
        // your scripts are loaded!
      });
  </script>
</body>

In your partials you can hook into LABjs, eg like this:

<script>
  myPage.$LAB.script('jQuery.js').wait(function () {
    // jQuery was loaded!
    // if jQuery was loaded already by another partial or your main layout
    // it will not be loaded again, but the callback will fire immediately!
  });
</script>

That beeing said you really should follow the advice given by Praveen and tie your javascript files up as much as possible. Each request to your server will cost time and decrease the responsivness of your website.

Either fix your "control" files so that they don't require inline JavaScript, or else include jQuery at the top of the file.

You could also write a small "$" function of your own that you'd include before jQuery (and at the top). However, you'd be better off fixing those controls anyway.

~~Another possible solution would be to add a script tag dynamically from within the partial. This however could get messy if you want to run more than a few lines of code, eg:~~

~~<script> var script = docuement.createElement('script'); script.innerHTML = "$(document).ready(function () { doSomething(); });"; document.body.appendChild(script); </script>~~

~~This should run after the jQuery (which should be already somewhere at the end of the body) was loaded and run.~~

UPDATE: This does not work, I assumed that inserting script elements in a DOM that wasn't ready yet wouldn't execute before the DOM is ready.

Use CDN's and quit obsessing about doubtful optimization. From the excellent jQuery in Action book, sec 1.22

NOTE For performance reasons, script blocks can also be placed at the bottom of the document body, though modern browsers make the performance difference rather moot. The important concept is to avoid embedding behavioral elements within the structural elements.