I have a piece of HTML table which is returned by the server and it looks like following:
<tbody>
<tr role="row" class="odd even pointer">
<td class="" width="5%" tabindex="0">
<ul class="enlarge">
<li>
<img src="" width="60px" height="60px">
<span>
<img src="">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="75%" data-url="" data-title="Sai Baba Nag Champa Incense 250 Gram, New, Free Shipping" data-price="11.25" data-image="" data-itemid="251908749939"> </td>
<td class="sorting_1" style="text-align:left;" width="10%">
£ 11
</td>
</tr>
</tbody>
What I'm currently doing is injecting the entire HTML in my DOM right away... But instead of doing it like this:
var dbtb = $('#datatable-responsive', data).html();
console.log(dbtb);
$('#datatable-responsive').html(dbtb
I would like to first fetch all the TR's from the table, and then append them directly into the table itself in DOM, but through a for/foreach loop?
How could I achieve this?
Not sure what you are trying to achieve. My best guess is you are trying to copy those rows to another table. If that's the case it should be as simple as:
$('table tr').appendTo('#target');
assuming that <table id="target"> is the target one
Related
I would like to know how can i refresh my without refresh the entire page in Javascript
Exemple of HTML
<table class="list" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td class="checkbox edit"></td>
<td class="Element sortable" onclick="My.Game.List.sort(223, 'eleemnt');">Element</td>
<td class="ew sortable" onclick="My.Game.List.sort(223, 'ew');">Pop.</td>
<td class="distance sortable" onclick="My.Game.RaidList.sort(223, 'distance');">Distance</td>
<td class="element sortable" onclick="My.Game.List.sort(223, 'element');">Option</td>
<td class="last sortable" onclick="My.Game.List.sort(223, 'last');">Last</td>
<td class="action"></td>
</tr>
</thead>
<tbody>
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
</tbody>
</table>
Basicly i would like to refresh the content of all the row of my Table
I tried this but it seems not working i don't understand why :
JAVASCRIPT CODE :
setInterval(function() {
document.getElementsByTagName('table')[0].reload();
}, 500);
NB : The function is just a timer to refresh the table each 500 ms.
What is excepted to change :
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
Best regards !
There are a lot of answers to your question.
You could simply fix this by replacing the (inner)HTML of the element any time an update takes place.
Something like HTML : draw table using innerHTML
Messy, but it is the answer to your question.
Your HTML is not dynamicly updating values, that would be done trough javascript. If you are getting your values from a webservice - look into AJAX.
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
I am using dojo scripts for creating charts, for zooming and panning I have used dijit slider. First time sliders are getting loaded correctly but second time( after coming back form another page) chart is getting loaded except these Sliders. Using Jquery for event handling. After refreshing page it's working fine.
First time the CSS is
<table>
<tbody>
<tr>
<td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span></td></tr>
<tr>
<td>
<table widgetid="scaleXSlider" id="scaleXSlider" style="width: 450px;" class="dijit dijitReset dijitSlider dijitSliderH" rules="none" data-dojo-attach-event="onkeydown:_onKeyDown, onkeyup:_onKeyUp" role="presentation" border="0" cellpadding="0" cellspacing="0" lang="en">
<tbody>
<tr class="dijitReset"><td class="dijitReset" colspan="2">
<td data-dojo-attach-point="topDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH"></td>
<td class="dijitReset" colspan="2"></td>
</tr>
<tr class="dijitReset">
<td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
<div class="dijitSliderDecrementIconH" style="display:none" data-dojo-attach-point="decrementButton">
<span class="dijitSliderButtonInner">-</span>
</div>
</td>
<td class="dijitReset">
<div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper" data-dojo-attach-event="press:_onClkDecBumper"></div>
</td>
<td class="dijitReset">
<input value="1" data-dojo-attach-point="valueNode" type="hidden">
<div class="dijitReset dijitSliderBarContainerH" role="presentation" data-dojo-attach-point="sliderBarContainer">
<div style="width: 0%;" role="presentation" data-dojo-attach-point="progressBar" class="dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH" data-dojo-attach-event="press:_onBarClick">
<div class="dijitSliderMoveable dijitSliderMoveableH">
<div aria-valuenow="1" tabindex="0" aria-valuemax="5" aria-valuemin="1" data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider"></div>
</div>
</div>
<div style="width: 100%;" role="presentation" data-dojo-attach-point="remainingBar" class="dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH" data-dojo-attach-event="press:_onBarClick">
</div>
</div>
</td>
<td class="dijitReset">
<div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper" data-dojo-attach-event="press:_onClkIncBumper"></div>
</td>
<td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
<div class="dijitSliderIncrementIconH" style="display:none" data-dojo-attach-point="incrementButton">
<span class="dijitSliderButtonInner">+</span>
</div>
</td>
</tr>
<tr class="dijitReset">
<td class="dijitReset" colspan="2"></td>
<td data-dojo-attach-point="containerNode,bottomDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH">
</td>
<td class="dijitReset" colspan="2"></td>
</tr>
</tbody>
</table>
and for the second time it's like,
<table>
<tbody><tr><td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
<tr><td>
<div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" value="1" minimum="1" maximum="5" discretevalues="6" showbuttons="false" style="width: 450px;">
</div>
</td></tr></table>
All the css classes are not getting loaded for the second time.Could you please help me :(.
Dojo keeps track of the objects / widgets it creates by the specified id. If you run the parser again on an object with the same id, dojo tries to create a second instance, but there is already one, so it should throw an error in your js console.
Destroy the created widget/object ids before you parse the same page again. Here I have declared 'widgets' as global variable, so that if any widgets ids are there just destroying them before parsing.
if(widgets){
widgets.forEach(function(widget) {
widget.destroyRecursive();
});
}
widgets = dojo.parser.parse();
It's worked for me.
for more details, refer the link below
Used dijit css in two pages, but working in first page only, in second page getting blank page
I need to grab the value inside <span> of each <tobdy>. I know the html is not well-formed, because I didn't write it. That's how SharePoint renders it, and it is in fact bad html. But the question is how do i interate through each and grab the numeric values inside of brackets i.e 122, 87, and 13 using jQuery? Is this doable?
Here is a quick fiddle: http://jsfiddle.net/traFg/
<TBODY id=titl386-1_ groupString="%3B%23Completed%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (122) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23InProgress%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (87) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23NotStarted%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (13) </SPAN>
</TD>
</TR>
</TBODY>
like this
jQuery('tbody span').each(function()
{
alert(jQuery(this).text().match(/\d+/));
})
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>');