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
Related
how would I access the hair with Javascript (as in Black)? I tried using normal accessing from within other elements gradually through defining variables accessing the table and tr it was in, but it still didn't work. Please respond if you have an answer. Thx
<table id="customers" class="customers">
<tr class="parent" data-toggle="toggle">
<th id="rank" style="text-align: center;">Number</th>
<th id="name" style="text-align: center;">Name</th>
<th id="name" style="text-align: center;"></th>
</tr>
<tbody class="content">
<div class="one">
<tr>
<td>1</td>
<td class="name">Object A</td>
<td class="down">
<button onclick="toggleText()" type="button" class="collapsible" id="1">
+
</button>
</td>
</tr>
</div>
<tr class="panel" id="one-a" colspan="3">
<div class="panel">
<td class="expand">
<div class="hair">
Black
</div>
</td>
</div>
</tr>
</tbody>
</table>
It may have something to do with the table being a table and not being able to fetch certain values like normal code.
Try
var hairColor = document.getElementsByClassName("hair")[0].innerHTML;
it will return an array of elements , your array will be of length 1 (because you only have one tag with the specified class, "hair" in this case) so the value you need is of index 0.
How to use JavaScript to get elements by class name?
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="PageHeadingTable">
<tr>
<td id="PageHeading" nowrap="true">OTP Verification</td>
<td id="PageHeadingDate">
<xsl:value-of select="//faml/request/datetime" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<div class="y_scroll" id="contentarea" style="width:98%;position:absolute">
<!--y_scroll start-->
<div class="contentarea">
<!--contentarea start-->
<span id="box" class="box"> <!--rounded curve/border start-->
<div class="toppanel"><ul><li></li></ul></div>
<div class="middlepanel">
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Confirm your identity</caption>
<tr> <td>A One Time Password(OTP) has been sent to your mobile phone with number ending in </td><td id="output"></td>
</tr>
<tr ><td > If this is not your mobile number, you are advised to end your internet banking and call us</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</div>
</table>
</div>
<div class="bottompanel"><ul><li></li></ul></div>
</span>
</div>
<!--contentarea end-->
</div>
</td>
</tr>
</table>
I am trying to make an OTP page where user can input the recieved OTP on the screen.Since I have masked the user's phone number for security reasons. I am getting the value of masked phone number in seperate <td>. The only problem is there is a space between my two <td>. I am not sure how to remove the space since its nested. I have added the code in the snippet for better understanding of my problem.
Any help or suggestion will be appreciated.Thanks!!
I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>
You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.
I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!
This is a two part question, I have searched under multiple tags to find an answer to no avail.
I have a table containing 4 columns and 4 nuggets, I am trying to get them to auto align on the page load so that the four columns take the whole width of the page across the bottom. I would like it to look the same whether the user is on a 22" wide screen or a 15" screen:
Would this best be done by JavaScript or is there a more efficient
way of doing this?
How would you achieve this?
Edit: sorry I should have been more specific, this is my code:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
</table>
Unless there's a particular reason why you're using such outdated HTML (tables for layout, use of things like valign and align in the HTML, etc), the most efficient (with regards to page load) way of achieving what you want is by restructuring your HTML to something more along the lines of:
<div id="nuggets">
<div id="nugget1">
<h2 class="menutitle"> FAQ's </h2>
</div>
<div id="nugget2" class="col">
<h2 class="menutitle"> Contacts </h2>
</div>
<div id="nugget3">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
<div id="nugget4">
<h2 class="menutitle"> Mail </h2>
</div>
</div>
You can then have CSS along the lines of:
#nuggets {
height: 459px;
}
#nuggets > div {
width: 25%;
height: 459px;
float: left;
text-align: center;
}
Assuming a nugget is a table cell, this is probably what you're looking for:
This sounds like a job for CSS.
Relevant CSS:
table {
width: 100%;
}
You can try setting the table width to correspond to screen resolution, perhaps using this ?
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>
If you are using the actual HTML <table> tag for your table, then the easiest way to do it is with the <colgroup> tag.
In your case, the code would be:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<colgroup width="25%" />
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
Any attributes in the <colgroup> will apply to all of the columns in that group. If you have specific styling that you'd like to do to any of the individual columns, you can add <col> tags within the <colgroup> for each column, to define them. You can also nest <colgroup> tags inside each other.
I would like to wrap a span tag around text (shown below) which exists already in my table.
Text to wrap in span tag:
Build Muscle and Train Harder<br> Boost Energy without the
Calories<br> Promote Nitric Oxide Production
My HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Build Muscle and Train Harder<br> Boost Energy without the Calories<br> Promote Nitric Oxide Production<br><br>
<table cellspacing="0" cellpadding="0" border="0" id="tttt">
<tbody>
<tr>
<td><b><font class="pricecolor colors_productprice"><span class="PageText_L483n"><h3><b style="font-size:13px"><span class="saleprice"><font class="text colors_text"><b><span class="PageText_L335n">Sale Price</span>: </b></font></span> <b class="prodPrOr">$34.05 </b></b></h3></span></font></b><br><a class="pricecolor colors_productprice" href="/ShoppingCart.asp?ProductCode=amino%2Dchewables"><b><span class="PageText_L655n"><img class="AddRight" src="/v/vspfiles/assets/images/addtocartsmall.gif"></span></b></a>
</td>
</tr>
</tbody>
</table>
<br><br>
<a onclick="window.open('/help_FreeShipping.asp', 'FreeShipping', 'scrollbars,status,resizable,width=300,height=300');" href="javascript:void(0);">
<img border="0" alt="" src="/v/vspfiles/templates/2007New/images/Icon_FreeShipping.gif" class="vCSS_img_icon_free_shipping"></a>
</td>
<td valign="top" align="right" id="v65-productdetail-action-wrapper" class="v65-productdetail-options">
<div id="contact">
<img src="/v/vspfiles/assets/images/osw0001_talk_button.jpg">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<ul></ul>
</td>
</tr>
</tbody>
</table>
You should add a class or id to the td you're trying to select to make it a lot simpler. E.g. if you made it:
<td class="myText">Build ... </td>
Now that you can easily select it (though if you can't add the class for some reason there are ways around that - it's just the simplest way to do it), imho.
$('.myText').html().replace($('.myText').html().match(/^.*/), '<span class="myClass">'+$('.myText').html().match(/^.*/)+'</span>');