I have to render a column of a table in jsp. Now, this jsp page is being used in one other page also. That particular column should come up only in other page, not in my page. So for this i am using one context variable, which i am getting somehow and saving it in my javascript value.
how to do this ?
<html>
<head>
<script>
function getPageId(){
var someValue = fetching it some how using url.
var pageId=someValue;
}
</script>
<script language="JavaScript">getPageId();</script>
</head>
<body>
<table id="pageContent" width="100%" valign="top">
<tr>
<td id="firstColumn">
<div class="className">
<jsp:include page="/pages/common/blank.jsp" />
</div>
</td>
<td id="secondColumn" width="100%" style="padding-left:16px">
</td>
</tr>
</table>
</body>
</html>
Column td with id="firstCoulmn" has to get conditionally rendered based on value of pageId variable
Please help
If var someValue can be determined by the url parameter, then you have to do the logic in the server side itself.
<body>
<table id="pageContent" width="100%" valign="top">
<tr>
<%
String someValue = request.getParameter("someValue");
// Your logic goes here
if("test".equals(someValue)) { %>
<td id="firstColumn">
<div class="className">
<jsp:include page="/pages/common/blank.jsp" />
</div>
</td>
<% } %>
<td id="secondColumn" width="100%" style="padding-left:16px">
</td>
</tr>
</table>
</body>
Related
I am developing a Flask application, I have an HTML template in which I have two tables, for which I want to use the datatable plugin. Here is the code of my HTML template with the tables
<doctype html>
<html>
<head>
<title> car_name </title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='aesthetic.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
$(document).ready( function () {
$('#table_1').DataTable();
$('#table_2').DataTable();
} );
</script>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Shops">Shops</a>
</div>
<div id="bigbox">
<table id="table_1" border="1" style="background: white">
<thead>
<tr>
<th><b>Phosphosite ID</b></th>
<th><b>Protein</b></th>
<th ><b>Gene</b></th>
<th><b>Residue</b></th>
</tr>
</thead>
<tbody>
{% for x in searchshops %}
<tr>
<td> {{x.NAME}} </td>
<td> {{x.RESOURCES}} </td>
<td> {{x.CARS}} </td>
<td> {{x.BRANDS}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Cars">Cars</a>
</div>
<div class="bigbox">
<table id="table_2" border="1" style="background: white">
<tr>
<th><b>Name</b></th>
<th ><b>Shop</b></th>
</tr>
{% for x in searchcars %}
<tr>
<td> {{x.CAR}}</td>
<td> {{x.Shop}} </td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
(searchshops and searchcars are SQLAlchemy queries to a database, in my Flask python script)
The datatable attributes (search bar, sort columns), show on the first table but not the second one.
I have also tried the following script, (having added class="display" after both tables, based on this example https://datatables.net/examples/basic_init/multiple_tables.html )
<script>
$(document).ready(function() {
$('table.display').DataTable();
} );
</script>
But I have the same problem.
How can I apply the datatable plugin to both tables?
Thank you.
I think it's a bug that it only applies to the first table and not on the succeeding table/s regardless if the first table is initialized or not with DataTable. I've tried it, it's the same.
Maybe you can use this concept. The datatables were rendered serverside.
multitable serverside rendering
I have the below html tags. I will have n number of buttons and respective tables in a page. The page is dynamic, the data may increase, or decrease with respective backend where it feeds the data from. I would like to implement pagination, and showcase only 2 buttons and tables per page. if user wanna see they have to use pagination to see remaining data.
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">Source_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>111</th>
</tr>
<tr>
<td>111</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">Source_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>222</th>
</tr>
<tr>
<td>222</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">Source_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>333</th>
</tr>
<tr>
<td>333</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve the pagination to display only 2 <div>buttons</div> per page.
You can use Jquery data tables, it is very simple and easy to use with PAGINATION, SORT, SEARCH features.
<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
$(document).ready(function(){
$('.data_table').DataTable();
});
Like above sample u can create multiple data tables with different class name or Id.
if you are asking how then try this site
http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery
has some info but if your making a tutorial....well you are not wrong
I have a table generated using #for component.
one of the column in table contains a direct link that invokes a method and adds 1 more row to the table source.
Now what I want to do is refresh this table on UI.
it works ok, if I refresh the whole page. But when I am using the updateComponent tag on the directlink. I just see 1 row. My understanding is that my componentid is on a row that is why only one row is getting updated.
Can you suggest, how could I just update the whole table.
I tried putting the #for on say tbody, but that does not work.
Code:
<div id="compFeeTableDiv" jwcid="compFeeTableDivTap#Any" style="visibility: hidden">
<fieldset>
<legend>
</legend>
<table height="100%" cellSpacing="2" cellPadding="2" width="100%" border="0" id="compFeeTable">
<thead>
<tr>
<th>
<span key="abc" />
</th>
</tr>
</thead>
<tbody>
<tr jwcid="#For" source="ognl:compFees" value="ognl:compFee" element="tr" index="ognl:loopIndex">
<td valign="center" align="center" height="15" class="listlabel2">
<span jwcid="#If" condition="true">
<div jwcid="#Any">
<a href="" jwcid="#DirectLink" name="ognl:'edit_link_'" listener="listener:newCompFee" size="5">
<img src="images/addAction.png" alt="addAction">
</a>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
Backing Java listener method
public void newcompFee(IRequestCycle cycle) {
compFee newcompFee = compFeeFactory.createDefaultcompFee(null,getAgent().getCompany());
List<compFee> compFees = getcompFees();
compFees.add(newcompFee);
setcompFees(compFees);
getAgent().getCompany().setcompFeeApplicable(YesNo.Yes);
}
I did try the updateComponent attribute on directlink and point it to id of my #for. but that only renders 1 row after refresh.
I am using tapestry 4.1.6.
Please advise.
Thanks
So.
The problem was really stupid. it was as #Tusar points out in his comment. it was because <thead> was not closed.
What worked for me:
<div id="compFeeTableDiv" jwcid="compFeeTableDivTap#Any" style="visibility: hidden">
<fieldset>
<legend>
</legend>
<table height="100%" cellSpacing="2" cellPadding="2" width="100%" border="0" id="compFeeTable">
<thead>
<tr>
<th>
<span key="abc" />
</th>
</tr>
</thead>
<tbody>
<tr jwcid="#For" source="ognl:compFees" value="ognl:compFee" element="tr" index="ognl:loopIndex">
<td valign="center" align="center" height="15" class="listlabel2">
<span jwcid="#If" condition="true">
<div jwcid="#Any">
<a href="" jwcid="#DirectLink" name="ognl:'edit_link_'" listener="listener:newCompFee" size="5" updateComponent="compFeeTableDivTap">
<img src="images/addAction.png" alt="addAction">
</a>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
So Basically, i am calling the enclosing div on updateComponent of directlink. Works perfectly.
UPDATE
After correcting the . The whole page was getting refreshed.
The problem here was that there was a typo in updateComponent. this should be updateComponents.
All works perfectly now
sample main page for example index.html content :
<iframe src="a.html" width="400" height="300" frameborder="1" id="frame"></iframe>
a.html content :
<html><body><form >
<div id="container"><div id="main"><div class="red_bl"><div class="red_br">
<div class="red_tl"><div class="red_tr"><div id="content">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody id="subContent1">
<tr>another tags</tr>
<tr>
<td colspan="2" class="cell2" valign="top">
sample text
</td>
<td id="td_address" class="cell3">sample code</td>
</tr>
</tbody>
</table>
</div></div></div></div></div></div></div>
</form></body></html>
i want change :
<td id="td_address" class="cell3">sample code</td>
to for example :
<td id="td_address" class="cell3">another text</td>
by jQuery In index.html .
This is because your document.ready doesn't wait for the iframe to load.
Therefore, the code that you run is executed before #td_address is added to DOM.
For various solutions to this problem (depending on what are you able to change), look at answers to this question.
With JQuery:
$('#frame').contents().find('td#td_address').html('another text');
Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.