Here is the code for my dialog.(removed parts that didn't pertain since there is a character limit)
<div id="editTMR" class="easyui-dialog" style="width:1040px" data-options="iconCls:'<%=icon%>', closed:true, buttons:'#editTMRButtons', closable:false">
<form id="tmrForm" method="post">
<table>
<tr>
<td>
<div class="easyui-panel" title="Quick Data" style="width:1020px; padding:5px; borderWidth:0" data-options="iconCls:'<%=icon%>'">
<table>
<tr>
<td><strong>TMR #:</strong></td>
<td>
<input id="tmrNumber" class="easyui-validatebox easyui-tooltip" readonly name="tmrNumber" title="The Trouble Management Report Number" style="width:80px" />
</td>
<td style="padding:1px; border:1px solid #ddd">
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Go to the Trouble Report Number" data-options="iconCls:'icon-tr',plain:true" onclick="verifyGoToTroubleReport()"><strong>Trouble Report #:</strong></a>
</td>
<td>
<input id="trNumber" class="easyui-validatebox easyui-tooltip" readonly name="trNumber" title="The Trouble Report Number" style="width:80px" onclick="verifyGoToTroubleReport()"/>
</td>
<td><strong>Rank:</strong></td>
<td>
<input id="rank" class="easyui-validatebox easyui-tooltip" readonly name="rank" style="width:40px" title="The Rank for the Trouble Management Report"/>
</td>
<td>
<div id="severityRanking">
<table>
<tr>
<td><strong>Qty Rank:</strong></td>
<td>
<input id="quantityRank" class="easyui-validatebox easyui-tooltip" readonly name="quantityRank" style="width:40px" title="The Quantity Rank for the Trouble Management Report"/>
</td>
</tr>
</table>
</div>
</td>
<td><strong>IDX:</strong></td>
<td>
<input id="indexPoints" class="easyui-numberbox easyui-tooltip" name="indexPoints" readonly style="width:30px" value="0" title="Index Points for the Trouble Report" />
</td>
<td><strong>TMR Due Date:</strong></td>
<td>
<input id="tmrDueDate" class="easyui-datebox" name="tmrDueDate" readonly style="width:100px"/>
</td>
<td><strong>Status:</strong></td>
<td>
<input id="status" class="easyui-validatebox easyui-tooltip" readonly name="status" title="The Status of the Trouble Management Report" style="width:135px" />
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="tabs" class="easyui-tabs" style="width:1020px; height:440px">
<div title="Main" style="padding:10px" data-options="iconCls:'icon-main'">
....
</div>
<div title="Analysis" style="padding:10px" data-options="iconCls:'icon-analysis'">
....
</div>
<div title="Cause" style="padding:10px" data-options="iconCls:'icon-cause'">
<div class="easyui-panel" title="Cause" style="height:210px;width:1000px; padding:0px; borderWidth:0" data-options="iconCls:'icon-cause'">
<table id="causeGrid" class="easyui-datagrid"
data-options="toolbar:'#causeToolbar', idField:'causeNumber', pagination:true, fit:true,
rownumbers:false, fitColumns:true, singleSelect:true, striped:true, autoRowHeight:false,
onSelect: function(rowIndex, rowData) {$('#causeDetails').val($.trim(rowData.cause));},
onDblClickRow: function(rowIndex, rowData) {viewCause(true, false);},
url: '../TMR_Cause_ReadServlet',
queryParams : {
<%=DB_Constants.DB_TMR_MAIN_TMR_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>
}">
<thead>
<tr>
<th data-options="field:'causeNumber',width:0,hidden:true"></th>
<th data-options="field:'itemNumber',width:40">Item #</th>
<th data-options="field:'cause',width:350">Cause</th>
<th data-options="field:'lastModifiedBy',width:0,hidden:true"></th>
<th data-options="field:'lastModifiedByName',width:50">Last Updated By</th>
<th data-options="field:'lastModifiedDate',width:50">Last Updated Date</th>
</tr>
</thead>
</table>
</div>
<br />
<div class="easyui-panel" title="Cause Details" style="width:1000px; height:160px; padding:5px; borderWidth:0" data-options="iconCls:'icon-comment'">
<table>
<tr>
<td>
<textarea id="causeDetails" name="causeDetails" class="easyui-tooltip" title="The Cause"
style="width:975px; height:110px; resize:none;" placeholder="The Cause" readonly></textarea>
</td>
</tr>
</table>
</div>
</div>
<div title="Countermeasure" style="padding:10px" data-options="iconCls:'icon-countermeasure'">
<div class="easyui-panel" title="Countermeasures" style="height:250px;width:1000px; padding:0px; borderWidth:0" data-options="iconCls:'icon-countermeasure'">
<table id="countermeasuresGrid" class="easyui-datagrid"
data-options="idField:'countermeasureNumber', toolbar:'#countermeasuresToolbar',pagination:true, autoRowHeight:false,
rownumbers:false, fitColumns:true, singleSelect:true, striped:true, fit:true,
onSelect: function(rowIndex, rowData) {showCMA(rowData);},
onDblClickRow: function(rowIndex, rowData) {viewCountermeasure(true, false);},
url: '../TMR_Countermeasures_ReadServlet',
queryParams : {
<%=DB_Constants.DB_TMR_MAIN_TMR_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>
}">
<thead>
<tr>
<th data-options="field:'countermeasureNumber',width:0,hidden:true"></th>
<th data-options="field:'causeNumber',width:0,hidden:true"></th>
<th data-options="field:'causeItemNumber',width:15">Cause #</th>
<th data-options="field:'tmrNumber',width:0,hidden:true"></th>
<th data-options="field:'itemNumber',width:13">Item #</th>
<th data-options="field:'countermeasureDetails',width:120">Details</th>
<th data-options="field:'cmAssignedTo',width:0,hidden:true"></th>
<th data-options="field:'cmAssignedToName',width:35">Assigned To</th>
<th data-options="field:'cmDueDate',width:23">Due Date</th>
<th data-options="field:'cmCompletedDate',width:30">Completed Date</th>
<th data-options="field:'cmAnalysisResponse',width:0,hidden:true"></th>
<th data-options="field:'cmaDoneBy',width:0,hidden:true"></th>
<th data-options="field:'cmaDoneByName',width:0,hidden:true"></th>
<th data-options="field:'cmaCompletedDate',width:0,hidden:true"></th>
<th data-options="field:'cmaPlatformQA',width:0,hidden:true"></th>
<th data-options="field:'cmaPlatformQAName',width:0,hidden:true"></th>
<th data-options="field:'lastModifiedBy',width:0,hidden:true"></th>
<th data-options="field:'lastModifiedByName',width:35">Last Updated By</th>
<th data-options="field:'lastModifiedDate',width:30">Last Updated Date</th>
</tr>
</thead>
</table>
</div>
<br />
<div class="easyui-panel" title="Countermeasure Analysis" style="width:1000px; height:130px; padding:5px; borderWidth:0" data-options="iconCls:'icon-countermeasure-alysis'">
<table>
<tr>
<td style="vertical-align:top;text-align:'right'">Response:</td>
<td colspan="5">
<textarea id="cmTabResponse" name="cmTabResponse" class="easyui-tooltip" title="The Response to the Countermeasure"
style="width:890px; height:50px; resize:none;" placeholder="The Response to the Countermeasure" readonly></textarea>
</td>
</tr>
<tr>
<td>CMA Done By:</td>
<td>
<select id="cmTabDoneBy" class="easyui-combogrid" name="cmTabDoneBy" style="width:200px"
data-options="panelHeight:50,panelWidth:200, idField:'key', textField:'value', readonly:true,
columns: [[
{field:'key', title:'', width:0, hidden:true},
{field:'value', title:'Person Name', width:180}
]]">
</select>
</td>
<td>CMA Completed Date:</td>
<td>
<input id="cmTabCompletedDate" class="easyui-datebox" name="cmTabCompletedDate" readonly style="width:150px" />
</td>
<td>Platform QA Engineer:</td>
<td>
<select id="cmTabPlatformQA" class="easyui-combogrid" name="cmTabPlatformQA" style="width:200px"
data-options="panelHeight:50,panelWidth:200, idField:'key', textField:'value', readonly:true,
columns: [[
{field:'key', title:'', width:0, hidden:true},
{field:'value', title:'Person Name', width:180}
]]">
</select>
</td>
</tr>
</table>
</div>
</div>
<%-- ------------------------------- --%>
<%-- This is where the issue occurs --%>
<%-- ------------------------------- --%>
<div title="Images and Attached Files" style="padding:10px" data-options="iconCls:'icon-attachment'">
<div class="easyui-tabs" style="height:380px">
<div title="Images" style="padding:10px" data-options="iconCls:'icon-image'">
<div class="easyui-panel" style="height:200px;width:970px; padding:0px; borderWidth:0">
<table id="imageGrid" class="easyui-datagrid" style="width:100%"
data-options="toolbar:'#imagesToolbar', idField:'fileNumber',
pagination:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, fit:true,
onSelect: function(rowIndex, rowData) {$('#imageFileNotes').val(rowData.notes);},
onDblClickRow: function(rowIndex, rowData) {viewFile(externalFileType.image);},
url: '../TR_External_File_ReadServlet',
queryParams : {
<%=DB_Constants.DB_TR_REFERENCE_TYPES_REFERENCE_TYPE_NUMBER%> : <%=TR_Constants.REFERENCE_TYPE_NUMBER_TMR%>,
<%=DB_Constants.DB_FIELD_REFERENCE_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>,
<%=DB_Constants.DB_TR_FILE_TYPES_FILE_TYPE_NUMBER%> : <%=TR_Constants.FILE_TYPE_PICTURE%>,
<%=TR_Constants.REQUESTING_SYSTEM%> : '<%=requestingSystem%>'
}">
<thead>
<tr>
<th data-options="field:'fileNumber',width:0,hidden:true"></th>
<th data-options="field:'fileLocation',width:0,hidden:true"></th>
<th data-options="field:'thumbnail',width:15">Thumbnail</th>
<th data-options="field:'fileName',width:50">Filename</th>
<th data-options="field:'notes',width:40">Notes</th>
</tr>
</thead>
</table>
</div>
<br />
<div class="easyui-panel" title="Notes" style="width:970px; height:110px; padding:0px; borderWidth:1" data-options="iconCls:'icon-comment'">
<table>
<tr>
<td style="vertical-align:text-top">
<div style="padding:1px; border:1px solid #ddd">
<a href="#" id="imageEditNotes" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
onclick="editFileNotes(externalFileType.image)">Edit the Image Notes</a>
</div>
</td>
<td>
<textarea id="imageFileNotes" name="imageFileNotes" class="easyui-tooltip" title="Any notes related to the Image"
style="width:785px; height:65px; resize:none;" placeholder="Any notes for the selected Image" readonly></textarea>
</td>
</tr>
</table>
</div>
</div>
<div title="Attached Files" style="padding:10px" data-options="iconCls:'icon-attachment'">
<div class="easyui-panel" style="height:200px;width:970px; padding:0px; borderWidth:0">
<table id="attachedFileGrid" class="easyui-datagrid" style="width:100%"
data-options="toolbar:'#attachedFilesToolbar', idField:'fileNumber', fit:true,
pagination:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, autoRowHeight:false,
onSelect: function(rowIndex, rowData) {$('#attachedFileNotes').val(rowData.notes);},
onDblClickRow: function(rowIndex, rowData){viewFile(externalFileType.attachment);},
url: '../TR_External_File_ReadServlet',
queryParams : {
<%=DB_Constants.DB_TR_REFERENCE_TYPES_REFERENCE_TYPE_NUMBER%> : <%=TR_Constants.REFERENCE_TYPE_NUMBER_TMR%>,
<%=DB_Constants.DB_FIELD_REFERENCE_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>,
<%=DB_Constants.DB_TR_FILE_TYPES_FILE_TYPE_NUMBER%> : <%=TR_Constants.FILE_TYPE_OTHER%>,
<%=TR_Constants.REQUESTING_SYSTEM%> : '<%=requestingSystem%>'
}">
<thead>
<tr>
<th data-options="field:'fileNumber',width:0,hidden:true"></th>
<th data-options="field:'fileLocation',width:0,hidden:true"></th>
<th data-options="field:'fileName',width:50">Filename</th>
<th data-options="field:'notes',width:15">Notes</th>
</tr>
</thead>
</table>
</div>
<br />
<div class="easyui-panel" title="Notes" style="width:970px; height:110px; padding:0px; borderWidth:0" data-options="iconCls:'icon-comment'">
<table>
<tr>
<td style="vertical-align:text-top">
<div style="padding:1px; border:1px solid #ddd">
<a href="#" id="fileEditNotes" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
onclick="editFileNotes(externalFileType.attachment)">Edit the File Notes</a>
</div>
</td>
<td>
<textarea id="attachedFileNotes" name="attachedFileNotes" class="easyui-tooltip" title="Any notes related to the Attached File"
style="width:805px; height:65px; resize:none;" placeholder="Any notes related to the Attached File" readonly></textarea>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<%-- -------------- --%>
<%-- End of issue --%>
<%-- -------------- --%>
<div title="Accountability" style="padding:10px" data-options="iconCls:'icon-person'">
....
</div>
<div title="Comments" style="padding:10px" data-options="iconCls:'icon-comment'">
....
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
Here are the external files I'm linking too
<%-- jQuery --%>
<script src="/is/js/jquery/2.1.3/jquery-2.1.3.min.js" type="text/javascript"></script>
<%-- jQuery EasyUI - enhances jQuery --%>
<script src="/is/js/jquery-easyui/1.4.2/jquery.easyui.min.js" type="text/javascript"></script>
<%-- jQuery EasyUI - enhances jQuery - Required for the TreeGrid --%>
<script src="/is/js/jquery-easyui/1.4.2/datagrid-detailview.js" type="text/javascript"></script>
<%-- jQuery EasyUI - enhances jQuery - Patch--%>
<script src="/is/js/jquery-easyui/1.4.2/jquery.easyui.patch.js" type="text/javascript"></script>
Any help is appreciated.
Thank you.