0

I get the exception - "JavaScript runtime error: Object doesn't support property or method 'jqGrid'" when I move below block from maincontent of content page to header section of master page. 

<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="../Content/jquery.jqGrid/jquery-ui-custom.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="../Scripts/jquery.jqGrid.js"></script>
<script src="../Scripts/i18n/grid.locale-en.js"></script>


It only works when I place this block in trailing section of master page.
Could someone help me understand why it works only when I place this block in trailing section of master page but not in header section? I think this has something to do with loading dependencies and initialization of jqGrid, however I need concrete understanding.

SuicideSheep
  • 5,260
  • 19
  • 64
  • 117
AbSharp
  • 119
  • 2
  • 6
  • 20

1 Answers1

5

You have to wait until DOM finishes loading. Then you can apply your scripts. Since, in your master page, you are using the script at the bottom, since the parser uses top down approach, it executes the script, after the body is completed loading.

So, if you do want to put in head section, ensure that all your script is inside document.ready() function

Also , know that it is always a best practice to put all your scripts at bottom rather than at the header.

This is a good performance indicator. Also it avoids the usage of ready function

Hope this helps..

Sai Avinash
  • 4,683
  • 17
  • 58
  • 96