error $("#list").jqGrid is not a function in mvc3 razor - asp.net-mvc-3

Question

I have written a function in javascript for JQgrid.I checked it in JSFiddle and in JSfiddle it tells me that "your javascript code is valid".But when I run it in mvc3 razor, view grid is not display and it gives me an error in firebug that
TypeError: $("#list").jqGrid is not a function
below is my view file code
#model CBS.Models.Gledg
#{
ViewBag.Title = "JV";
}
<h2>JV</h2>
<link href="/Content/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.multiselect.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.locale-en-4.1.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#list").jqGrid({
url: '/Home/GetJVLedg()/',
datatype: 'json',
mtype: 'GET',
colNames: ['Code', 'Remarks', 'Debit'],
colModel: [
{ name: 'Code', index: 'Code', width: 40, align: 'left' },
{ name: 'Remarks', index: 'Remarks', width: 240, align: 'left' },
{ name: 'Debit', index: 'Debit', width: 200, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Code',
sortorder: "desc",
viewrecords: true,
//imgpath: '/scripts/themes/coffee/images',
caption: 'Gledg'
});
});
});
</script>
<fieldset>
<legend> Journal Voucher</legend>
<div id="txtArea">
<label>
Voucher NO
</label>
<input type="text" id="" name="VID" maxlength="20" PlaceHolder="Voucher No..." />
<label>Remarks</label>
<input type="text" id="" name="Rem" maxlength="150" PlaceHolder="Remarks..." />
<label>Voucher Date</label>
<input type="Text" id="datepicker" name="VDate" />
</div>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</fieldset>
I searched a lot but no solution is found which can solve my problem. help me

Answer 1

Place your code inside
$(document).ready(function (){})
then it will work.
And make sure that you have mentioned all your script&css reference links to get JQGrid in head section