我正在多选项卡中构建搜索功能,其中用户搜索条件将是一个选项卡,而用户搜索结果将在另一个选项卡中。当我第一次搜索时,我在第二个选项卡中使用正确的页面导航栏获得了结果。但是当用户返回上一个选项卡(搜索选项卡)并再次搜索时,我的网格结果会刷新为正确的值,但我的导航网格没有出现。我在萤火虫中找不到 navgrid 的 dom 以及最初在第一次搜索时出现的 dom。
以下是代码片段。
function dispSearchResults() {
var no = document.getElementById("stNo").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var dateOfBirth = document.getElementById("dateOfBirth").value;
document.getElementById("searchContainerModal").innerHTML='<table
id="searchResultsTab" style="width:100%"></table>';
jQuery("#searchResultsTab").jqGrid({
url : contextPath + '/web/getSearchViewResults.json',
datatype : "json",
mtype: "POST",
postData:{'NO': no, 'FIRST_NAME':firstName, 'LAST_NAME':lastName,
'DATE_OF_BIRTH':dateOfBirth},
colNames : [ 'no', 'First Name', 'Last Name', 'Date Of Birth'],
colModel : [ {
name : 'No',
index : 'No',
width : 100,
align : "center",
formatter: fmtStateno
}, {
name : 'firstName',
index : 'firstName',
width : 220,
align : "left",
formatter: fmFName
}, {
name : 'lastName',
index : 'lastName',
width : 220,
align : "left",
formatter: fmLName
}, {
name : 'dateOfBirth',
index : 'dateOfBirth',
width : 120,
align : "left",
formatter: fmBirthDate
}],
altRows : true,
altClass : 'oddRow',
loadComplete : function() {
document.getElementById("sResultsTab").style.visibility =
"visible";
if (jQuery("#searchResultsTab").getGridParam("records")==0) {
jQuery("#searchResultsTab").addRowData(
"blankRow", {"No":"No data was found",
"firstName":"", "lastName":"", "dateOfBirth":""}
);
}else{
$("tr.jqgrow:odd").addClass('oddRow');
}
},
onCellSelect: function(rowid,iCol,cellcontent,e) {
// alert(rowid);
cContent = cellcontent;
rId = rowid;
},
height : 240,
width : 1165,
rowNum : 25,
rowList : [25,50,75,100],
loadonce: true,
pagination:true,
pager : '#searchPagerDiv1',
sortname : 'no',
viewrecords : true,
sortorder : "desc",
caption : "Search Results",
gridview : true,
jsonReader : {
root : "rows",
page : "currentPage",
total : "totalPages",
repeatitems : false,
id : "id"
}
}).navGrid("#searchPagerDiv1",reloadAfterSubmit: false,
{edit:false,add:false,del:false});
});
$("#tabs").tabs("select", "#searchResultsTb");
}
Here are the code snippets
main jsp for tabs
------------------
<div id="mainContentDiv"<
<div id="tabs" style="background-color: transparent; height:auto"<
<ul id="Tabs1"<
<li id="sCriteriaTab"<<a href="#searchTab"<Search Criteria </a<
</li<
<li id="sResultsTab"< <a href="#searchResultsTb"<Search
Results</a< </li<
</ul<
<div id="searchTab" style="background-color: transparent" class="height250"<
<%@ include file="../search/SearchCriteria.jsp" % <
</div<
<div id="searchResultsTb" style="background-color: transparent;"<
<%@ include file="../search/SearchResults.jsp" %
<
</div<
SearchCriteria.jsp
-------------------
<form id="searchForm" name="searchForm"<
<div class="personDetailsDiv" id="personNameInfoDiv"<
<div style="float:right"<
<font class="standardInputTitle"<no</font<
<input id="No" name="No" class="standardInputText marginRight50" value=""
type="text"<</div< </div<
........
............
<div class="button-row"<
<a href="javascript:dispSearchResults()" class="button rounded blue effect-
3"<Search</a<
</div<
</div< </form<
SearchResults.jsp
----------------
<div id="searchContainerModal" style="width:100%"<</div<
<div id="searchPagerDiv1"<</div<
<div id="searchPagerDiv" style="width:100%"<
<div id="searchZeroRec" style="display:none;"< Zero Records Found ...
</div<
</div<
Appreciate your help !!!!