title: Issue with JavaScript position/ordering in MVC application
body: <p>perhaps this question may already asked. But I have not find satisfactory answer for below scenario.</p>
  
  <p>I have MVC application, in which, when I click on button it popup a jquery dialog. It works fine if I include jquery***.js  in header. But it is not working if I include after Body. </p>
  
  <p>According to best practices, we should include all scripts after body. So, why this dialog does not open when I include script at bottom.</p>
  
  <pre><code>**Layout.cshtml**
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      @Content.Css("themes/base/jquery.ui.all.css", Url)
      @Content.Css("Site.css", Url)
  
      /**** Dialog works fine if I include 
      *** @Content.Script("jquery-1.5.1.min.js", Url) ***
      ***here*****/
  
  &lt;/head&gt;
  &lt;body&gt;
  
     *********
     *********
  
      @Content.Script("jquery-1.5.1.min.js", Url)
      @Content.Script("jquery-ui-1.8.11.min.js", Url)
      @Content.Script("jquery.unobtrusive-ajax.min.js", Url)
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  Index.cshtml
  
  @model ****
  
  &lt;script&gt;
      $(function () {
          $("#dialog").dialog({
              autoOpen: false,
              model: true
          });
      });
  
      function btn1Click() {
          $("#dialog").dialog("open");
      }
  &lt;/script&gt;
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  @using (Html.BeginForm () )
  {
      &lt;input id="btn1" value="Index1" type="button" onclick="btn1Click()"  /&gt; 
      &lt;br /&gt;
  
          &lt;div id="dialog" title="Basic dialog"&gt;
          &lt;p&gt;Testing...&lt;/p&gt;
          &lt;/div&gt;
  } 
  </code></pre>