Forum
Log In
Home
Topic RSS
17:00
17/12/2008
Offline
Hello,
I want to do several ajax tabs on a page, when click on a tab, a grid is dynamically loaded which allows form editing. I can load the grid successfully when running the grid page ('testJqGrid.jsp') directly, but the grid can't be loaded on the tab.
Do I need to configure the grid page to make it work for tab? I used jQuery Plugin Tabs by Klaus Hartl. Here are my codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....tional.dtd">
<html>
<head>
<title>Test grid on tab</title>
<link rel="stylesheet" type="text/css" media="screen"
href="jquery.tabs/jquery.tabs.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="jquery.tabs/jquery.tabs-ie.css" />
<script src="jquery.tabs/jquery-1.1.3.1.pack.js"
type="text/javascript"></script>
<script src="jquery.tabs/jquery.history_remote.pack.js"
type="text/javascript"></script>
<script src="jquery.tabs/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#navtabs').tabs({remote:true});
});
</script>
</head>
<body>
<div id='navtabs'>
<ul>
<li>
<a href='testJqGrid.jsp'><span>Grid 1</span>
</a>
</li>
<li>
<a href='testJqGrid2.jsp'><span>Grid 2 </span>
</a>
</li>
</ul>
</div>
</body>
</html>
Could someone please share an example?
I see the jqgrid demo site doing grid on tab (http://trirand.com/jqgrid/jqgrid.html), but I can't figure out how that's working.
Thanks!
Maggie
08:28
Moderators
30/10/2007
Offline
Hello,
Check to see how tabs load the contents - I mean what is used - get or post or true ajax. It is quite possible that the tabs(the way they call the remoute page) do not allow execution of the scripts.
Check to see if there is a option when the page is loaded in the tab to allow script execution.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
15:56
17/12/2008
Offline
This is helpful. I checked the execution of scripts and figured out that I need to put the reference to the grid script on the tab page, and remove the htl header part from the grid page. It works now. Here are my codes:
Tab page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....tional.dtd">
<html>
<head>
<title>Test Tab</title>
<link rel="stylesheet" type="text/css" media="screen"
href="jquery.tabs/jquery.tabs.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="jquery.tabs/jquery.tabs-ie.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/themes/jqModal.css" />
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery.tabs/jquery.history_remote.pack.js"
type="text/javascript"></script>
<script src="jquery.tabs/jquery.tabs.pack.js" type="text/javascript"></script>
<script src="jquery/jquery.jqGrid.js" type="text/javascript"></script>
<script src="jquery/js/jqModal.js" type="text/javascript"></script>
<script src="jquery/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#navtabs').tabs({remote:true});
});
</script>
</head>
<body>
<p>Testing tab and grid, form editing for the Weekly Report.</p>
<!-- id attribute for the DIV container MUST be the same as the element selector in step 3 above: 'navtabs'-->
<div id='navtabs'>
<ul>
<li>
<a href='testJqGrid.do'><span>Tab 1</span>
</a>
</li>
<li>
<a href='testEcho.do'><span>Tab 2 </span>
</a>
</li>
</ul>
</div>
</body>
</html>
Grid page (It should be just segment of html which does not include header):
<table id="editgrid" class="scroll" cellpadding="0" cellspacing="0"></></table>
<div id="pager" class="scroll" style="text-align: center;"></div>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#editgrid").jqGrid({
url:'servlet/testGrid',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:60, editable:true,editoptions:{readonly:true,size:10}},
{name:'invdate', index:'invdate', width:90, editable:true,editoptions:{size:25}},
{name:'amount', index:'amount', width:80, align:'right', editable:true,editoptions:{size:25}},
{name:'tax', index:'tax', width:80, align:'right', editable:true,editoptions:{size:25}},
{name:'total', index:'total', width:80, align:'right', editable:true,editoptions:{size:25}},
{name:'note', index:'note', width:150, sortable:false, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: "desc",
viewrecords: true,
imgpath: 'jquery/themes/basic/images',
caption: 'My first grid',
editurl:'servlet/testGridUpdate'
});
$("#bedata").click(function(){
var gr = jQuery("#editgrid").getGridParam('selrow');
if( gr != null ) jQuery("#editgrid").editGridRow(gr,{width: 600, height:280, modal:false, reloadAfterSubmit:false});
else alert("Please Select Row");
});
});
</script>
Thanks!
Maggie
15:56
17/12/2008
Offline
This is helpful. I checked the execution of scripts and figured out that I need to put the reference to the grid script on the tab page, and remove the htl header part from the grid page. It works now. Here are my codes:
Tab page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....tional.dtd">
<html>
<head>
<title>Test Tab</title>
<link rel="stylesheet" type="text/css" media="screen"
href="jquery.tabs/jquery.tabs.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="jquery.tabs/jquery.tabs-ie.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/themes/jqModal.css" />
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery.tabs/jquery.history_remote.pack.js"
type="text/javascript"></script>
<script src="jquery.tabs/jquery.tabs.pack.js" type="text/javascript"></script>
<script src="jquery/jquery.jqGrid.js" type="text/javascript"></script>
<script src="jquery/js/jqModal.js" type="text/javascript"></script>
<script src="jquery/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#navtabs').tabs({remote:true});
});
</script>
</head>
<body>
<p>Testing tab and grid, form editing for the Weekly Report.</p>
<!-- id attribute for the DIV container MUST be the same as the element selector in step 3 above: 'navtabs'-->
<div id='navtabs'>
<ul>
<li>
<a href='testJqGrid.do'><span>Tab 1</span>
</a>
</li>
<li>
<a href='testEcho.do'><span>Tab 2 </span>
</a>
</li>
</ul>
</div>
</body>
</html>
Grid page (It should be just segment of html which does not include header):
<table id="editgrid" class="scroll" cellpadding="0" cellspacing="0"></></table>
<div id="pager" class="scroll" style="text-align: center;"></div>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#editgrid").jqGrid({
url:'servlet/testGrid',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:60, editable:true,editoptions:{readonly:true,size:10}},
{name:'invdate', index:'invdate', width:90, editable:true,editoptions:{size:25}},
{name:'amount', index:'amount', width:80, align:'right', editable:true,editoptions:{size:25}},
{name:'tax', index:'tax', width:80, align:'right', editable:true,editoptions:{size:25}},
{name:'total', index:'total', width:80, align:'right', editable:true,editoptions:{size:25}},
{name:'note', index:'note', width:150, sortable:false, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: "desc",
viewrecords: true,
imgpath: 'jquery/themes/basic/images',
caption: 'My first grid',
editurl:'servlet/testGridUpdate'
});
$("#bedata").click(function(){
var gr = jQuery("#editgrid").getGridParam('selrow');
if( gr != null ) jQuery("#editgrid").editGridRow(gr,{width: 600, height:280, modal:false, reloadAfterSubmit:false});
else alert("Please Select Row");
});
});
</script>
Thanks!
Maggie
Most Users Ever Online: 715
Currently Online:
49 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
