jQuery Grid Plugin - jqGrid

Hi Tony,

I think I know where the problem is, but I don't know "why" it happens

Following are the code to my program

<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.core.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.draggable.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.resizable.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqueryUI/development-bundle/ui/ui.dialog.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("#divModal").dialog({
            autoOpen: false,
            overflow: true,
            title: "testing modal"
        });

        $("#btnPopUp").click(function() {
            $("#divModal").dialog('open');
        });
    });
</script>

<table id="list" cellpadding="0" cellspacing="0"></table>
<div id="pager"></div>
<input type="button" id="btnPopUp" value="PopUp" />

<div id="divModal">
    <script type="text/javascript">
        $(function() {
            $("#list2").jqGrid({
                url: '/Home/Test3Data/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Name'],
                colModel: [
                { name: 'Name', index: 'Name', width: 680, align: 'left'}],
                pager: '#pager2',
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                sortname: 'Name',
                sortorder: "desc",
                viewrecords: true,
                imgpath: '<%= Url.Content("~/Scripts/jqueryUI/css/ui-lightness/images") %>',
                caption: 'My first grid'
            });
            $("#list2").navGrid('#pager2', { add: true, del: true, edit: false, refresh: false, search: false, view: false }, {}, {}, {}, {}, {});
        });
    </script>
    <table id="list2" cellpadding="0" cellspacing="0"></table>
    <div id="pager2"></div>
</div>

The code above will generate the error I post before. If you move the javascript "inside" the divModal out of it(outside the divModal), there will not be any problem. You may ask why I didn't put all the javascript in one place, the reason is that divModal is actually a user control I created and use repeatedlly on some other pages. I am happy to pin point down the problem, but I guess this is not a bug.