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
<div id="cell">
<div class="choose">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><h3>Title</h3></td>
</tr>
<tr>
<td align="right">CLICK HERE</td>
</tr>
</table>
</div>
<div class="result">
<img src="images/blank.jpg" width="72" height="72">
</div>
</div>
Here's my HTML, what would be the proper combination for me to click (a.ex) and be able to modify the img scr of (div.result img)?
I think this is what you're looking for:
$(this).closest('div.choose').next('div.result').find('img')
Your question is a bit vague, and as Blunderfest mentioned in the comments, you could select the image directly with div.result img
I am trying to show small image of width 250px by using jQuery. I tried to set the width of the image, in jQuery I have use this command. here is my jQuery code, even after giving this command image comes with its original size, i.e.600px etc etc...
My html td tag shows this value, but not affect the image.
So can anyone tell how to set the size of image so that what ever its original weight and height but its shows the with of 250px?
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script language="javascript" type="text/javascript">
$(document).ready(function() {
$("table td #n1WPQ4").css("width","250px")
});
</script>
My HTML code after applying above script.
<table class="ms-formtable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td nowrap="" valign="top" width="190px" class="ms-formlabel">
<nobr>Picture</nobr>
</td>
<td valign="top" class="ms-formbody" width="400px" id="n1WPQ4" style="width: 250px;">
<img src="http://img.dashtees.com/mini-gloves/pakistan/pakistan.03.jpg" alt="">
</td>
</tr>
<tr>
<td nowrap="" valign="top" width="190px" class="ms-formlabel">
<nobr>Name</nobr>
</td>
<td valign="top" class="ms-formbody" width="400px" id="n2WPQ4">
<a onfocus="OnLink(this)" href="http://sharepoint/_layouts/15/listform.aspx? PageType=4&ListId={06ABE63D-FD6E-4EC6-A473- CF648BE5B384}&ID=2&ContentTypeID=0x0100C0EFC789E8F94545923F62567A0C1A52" onclick="EditLink2(this,7);return false;" target="_self">glove</a> </td></tr><tr><td nowrap="" valign="top" width="190px" class="ms-formlabel"><nobr>Description</nobr></td><td valign="top" class="ms-formbody" width="400px" id="n3WPQ4"><div dir="" class="ms-rtestate-field"></div> </td> </tr><tr><td nowrap="" valign="top" width="190px" class="ms-formlabel"><nobr>Article</nobr></td><td valign="top" class="ms-formbody" width="400px" id="n4WPQ4"> </td></tr></tbody></table>
You are not selecting image using selector, #n1WPQ4 is parent id of image tag.You should use:
$("#n1WPQ4 img")
or
$("#n1WPQ4").find("img")
td #n1WPQ4 will select child element under td with id n1WPQ4.
Since you've assigned id="n1WPQ4" to your td then you don't need space here.
Also, id is unique so you can change your selector to:
$("#n1WPQ4 img").css("width","250px")
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>');
There is no real reason that this code shouldn't work, as far as I can tell. I have a HTML file and an external .js file. Here is the statement that I am using inside of the html to load the .js file:
<script type="text/javascript" src="family.js"></script>
The name of the file is correct, and it is in the same directory. I'll post the full code of the html page below, just in case something is off with something else.
Is there anything that I am missing? The .js file should make a sliding menu, however it is simply not loading. I have an alert inserted in the .js file that should alert me when it's working, although it doesn't show up.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<title>The Jones Family</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="family.css" type="text/css" />
<script type="text/javascript" src="family.js"></script>
<script language="JavaScript" type="text/javascript">
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
alert ("Inside script is working");
</script>
</head>
<body >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td width="382" colspan="3" rowspan="2"><img src="camera.jpg" alt="camera" border="0" /></td>
<td width="378" height="50" colspan="3" id="logo" valign="bottom" align="center" nowrap="nowrap">The Jones Family Website</td>
<td width="100%"> </td>
</tr>
<tr class="head">
<td height="51" colspan="3" id="tagline" valign="top" align="center">Photo Gallery</td>
<td width="100%"> </td>
</tr>
<tr>
<td colspan="7" class="separator" ><div class="myHr"><hr /></div></td>
</tr>
<tr class="separator">
<td colspan="7" id="dateformat" height="20"> <script language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>
<tr>
<td colspan="7" class="separator" ><div class="myHr"><hr /></div></td>
</tr>
<tr>
<td width="200" height="450" valign="top" class="nav" >
<table class="nav" border="0" cellspacing="0" cellpadding="0" width="40" id="navigation">
<tr>
<td > <br />
<br /></td>
</tr>
<tr>
<td ><div class="navG" id="gallery1" style="position: absolute; top: 180px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Disney<br />
SeaWorld<br />
Bush Garden<br />
Universal Studios<br />
</td>
<td><img src="gallery1.jpg" alt="gallery 1" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery2" style="position: absolute; top: 285px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Sweet 16<br />
Summer Camp<br />
Holiday<br />
Ski Trip<br />
</td>
<td><img src="gallery2.jpg" alt="gallery 2" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery3" style="position: absolute; top: 390px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Mom's Birthday (2011)<br />
Dad's Birthday (2011)<br />
Bobby's Birthday<br />
Jenny's<br />
</td>
<td><img src="gallery3.jpg" alt="gallery 3" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery4" style="position: absolute; top: 495px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Skatepark<br />
Wildlife<br />
Beach<br />
Hawaii<br />
</td>
<td><img src="gallery4.jpg" alt="gallery 4" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
</table>
<br />
<br />
<br />
<br /> </td>
<td width="50"></td>
<td width="305" colspan="2" valign="top"><br />
<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="305">
<tr>
<td class="pageName">Family Photos</td>
</tr>
<tr>
<td class="bodyText"><p>From here you can see family Photos taken by our various amateur photographers!</p>
<p>We hope you enjoy the photos as much as we do!</p>
<p align="center"><img src="sayCheese.jpg" alt="Say Cheese" /></p></td>
</tr>
</table>
<br />
<br /> </td>
<td width="50"></td>
<td width="190" valign="top"><br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="190" id="leftcol">
<tr>
<td width="10"></td>
<td width="170" class="smallText"><br />
<p><span class="subHeader">Photog #1</span><br />
Mary Sue - Mother, she prefers her Canon camera. She still uses film, but has the photos put onto digital cd when developed. </p>
<p><span class="subHeader">Photog #2</span><br />
Bobby - Hip son, he prefers his HP kid digital camera. Not that old, but still takes interesting pictures.</p>
<p><span class="subHeader">Photog #3</span><br />
Jenny - Cool Teen, she has a Sony digital video camera. She takes movies and still photos. Just don't expect her to smile too much.</p>
<br />
<br /> </td>
<td width="10"> </td>
</tr>
</table> </td>
<td width="100%"> </td>
</tr>
<tr>
<td width="165"> </td>
<td width="50"> </td>
<td width="167"> </td>
<td width="138"> </td>
<td width="50"> </td>
<td width="190"> </td>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
the problem is not the MIME type, but it's in the JS script (if it's the one at 'http://orca.st.usm.edu/~tbonnet2/440/p5/family.js')
A closing parentheses is missing, look into closeMenu():
function closeMenu() {
/* get the current menu id */
var ID = this.id + "List"
/* determine active menu */
activeMenu = document.getElementById(ID);
if (activeMenu) { // <------ THIS CONDITIONAL BLOCK ISN'T CLOSED!
activeMenu.style.display = "none";
activeMenu = null;
/* run the moveItemLeft function by setting a time interval */
timeID = setInterval("moveItemLeft()", 1);
}
I had a problem with the same description as the author of the question.
But, in my case, the js file was not being re-read from the disk.
Initially, my js file was empty as I began testing the HTML structure.
Later when I added code to the js file, the browser window, which had been open, did not re-read the js file, even after "refreshing" the browser.
The js file was there, it was in the same directory, but the content of the file was memory cached in the browser. I saw a message to this effect somewhere in the Google debugger, but I am unable to find that message again. The message stated the HTML file was disk cached and the js file was memory cached.
The HTML file was refreshed when I clicked the browser's refresh button, but the js file was not getting refreshed and was still showing empty in the "sources" tab from the initial running of the page before js content was added.
To fix, I closed the browser window, opened a new browser window, and everything started working correctly. The new window re-read the js script from disk.
Check with, for example, Firefox's console if there are errors regarding the loading of that js file (and post them).
Maybe, the file is loaded but it contains errors that don't let you see the alert
Note that your server returns a different MIME-type than specified in your HTML source:
<script type="text/javascript" src="family.js"></script>
$ HEAD http://orca.st.usm.edu/~tbonnet2/440/p5/family.js
200 OK
Connection: close
Date: Thu, 23 Feb 2012 02:22:59 GMT
Accept-Ranges: bytes
ETag: "1320142-9f5-4b9979ec8c280"
Server: Apache/2.2.3 (Red Hat)
Content-Length: 2549
Content-Type: application/x-javascript # <-- see here
Last-Modified: Thu, 23 Feb 2012 01:32:42 GMT
Client-Date: Thu, 23 Feb 2012 02:22:59 GMT
Client-Peer: 131.95.35.200:80
Client-Response-Num: 1
If you dont have any errors like the answer above and are using a web host....
1. login to control panel and check if file actually exist there.
I ran into the same problem, i was using ftp(winSCP) to upload my files when i made changes and even changed file names i ran into the same problem but when i went to the control panel(file manager) all the changes i was making through the winSCP were not being reflected then i uploaded everything through the control panel it all started working fine.