Develop Reference

Pagination In Table sightly

I have made a table to display a list of child pages in sightly. I want to work on pagination in the list. This is my slightly code snippet. I have tried different approches but still no success. I am new to javascript so I am facing issues in finding the best approach.Can please help me with the correct way to achieve this.
<tfoot>
<tr class="footable-paging">
<td colspan="5">
<div class="footable-pagination-wrapper">
<ul class="pagination" id="demo">
<li class="footable-page-nav disabled" data-page="first" aria-label="first page">
<a class="footable-page-link" href="${request.requestURL.toString}">«</a>
</li>
<li class="footable-page-nav disabled" data-page="prev" aria-label="previous" id="prev-page">
<a class="footable-page-link" href="${request.requestURL.toString}">‹</a>
</li>
<li class="footable-page visible active" data-page="1" aria-label="page 1">
<a class="footable-page-link" href="${request.requestURL.toString}">1</a>
</li>
<li class="footable-page visible" data-page="2" aria-label="page 2">
<a class="footable-page-link" href="${request.requestURL.toString}">2</a>
</li>
<li class="footable-page-nav" data-page="next" aria-label="next" id="next-page">
<a class="footable-page-link" href="${request.requestURL.toString}">›</a>
</li>
<li class="footable-page-nav" data-page="last" aria-label="last page">
<a class="footable-page-link" href="${request.requestURL.toString}">»</a>
</li>
</ul>
<div class="divider"></div>
<span class="label label-default"></span>
</div>
</td>
</tr>
</tfoot>
<tbody id="body">
<tr class="ninja_table_row_0 nt_row_id_157" id="tr" data-sly-repeat.child="${currentPage.listChildren}">
<td class="ninja_column_0 ninja_clmn_nm_logoname footable-first-visible" style="display: table-cell;">
<a href="${child.getProperties['path']}.html">
<img src="${child.getProperties['logo']}" alt="${child.getProperties['company']}">
</a>
</td>
<td class="ninja_column_1 ninja_clmn_nm_company" style="display: table-cell;">
${child.getProperties['company']}
</td>
<td class="ninja_column_2 ninja_clmn_nm_boothno" style="display: table-cell;">${child.getProperties['boothNo']}</td>
<td class="ninja_column_3 ninja_clmn_nm_country" style="display: table-cell;">${child.getProperties['country']}</td>
<td class="ninja_column_4 ninja_clmn_nm_profile footable-last-visible" style="display: table-cell;">${child.getProperties['profile']}</td>
</tr>
</tbody>

HTL/Sightly has iteration control for some time already, see the data-sly-repeat spec:
<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection # begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>
You can use that in conjunction with URL parameters to set the begin and end of your list page.

li onclick function not getting called

I have trouble calling the onclick function inside the li element.when I put a url to the href it works fine. But I want to call a javascript function through onclick .Any help is appreciated.
function display_s(){
alert("success");
}
<div style="" class="icon_bar">
<ul style="padding:0 ; margin : 0;display:flex; justify-content: center;">
<li onclick="display_specs()">
<a href="#" >
<div style="display:flex;align-items:center;flex-direction:column">
<div style="height:35px;width:35px;padding:5px"> <img src="/static/phone.bmp" style="max-width:100%;height:auto"></div>
<div style="padding:5px" > Mobile</div>
</div>
</a>
</li>
</ul>
</div>

Change to what I type. You have some type error.
function display_specs(){
alert("success");
}
<div style="" class="icon_bar">
<ul style="padding:0 ; margin : 0;display:flex; justify-content: center;">
<li onclick="display_specs()">
<a href="#" >
<div style="display:flex;align-items:center;flex-direction:column">
<div style="height:35px;width:35px;padding:5px"> <img src="/static/phone.bmp" style="max-width:100%;height:auto"></div>
<div style="padding:5px" > Mobile</div>
</div>
</a>
</li>
</ul>
</div>

You're onclickfucntion name and in script tag name must be same like that. Also if you wanna learn more information about onClick you can check this link
function display_specs(){
alert("success");
}
<div style="" class="icon_bar">
<ul style="padding:0 ; margin : 0;display:flex; justify-content: center;">
<li onclick="display_specs()">
<a href="#" >
<div style="display:flex;align-items:center;flex-direction:column">
<div style="height:35px;width:35px;padding:5px"> <img src="/static/phone.bmp" style="max-width:100%;height:auto"></div>
<div style="padding:5px" > Mobile</div>
</div>
</a>
</li>
</ul>
</div>

Call the function in li and it will work.
<script>
function display_s()
{
alert('check');return false;
}
</script>
</head>
<body>
<div style="" class="icon_bar">
<ul style="padding:0 ; margin : 0;display:flex; justify-content: center;">
<li onclick="display_s()" style="cursor:pointer"></li>
</ul>
</div>
</body>

You are calling to the wrong function which is not defined. when you are click on
li you should call to the function display_s().
function display_s(){
alert("success");
}
<div style="" class="icon_bar">
<ul style="padding:0 ; margin : 0;display:flex; justify-content: center;">
<li onclick="display_s()">
<a href="#" >
<div style="display:flex;align-items:center;flex-direction:column">
<div style="height:35px;width:35px;padding:5px"> <img src="/static/phone.bmp" style="max-width:100%;height:auto"></div>
<div style="padding:5px" > Mobile</div>
</div>
</a>
</li>
</ul>
</div>

How to remove class name from content copied using the clone()

I have a website and we're trying to setup a continues looping similar to this stack answer OR What Lies Below website
In our website we also have some elements that are being parallaxed. The parallaxed elements all have the class name "parallax". When I'm cloning and appending the cloned content, it's using the parallax class name and I need to get rid of it. So I thought I could just
JS
var clone = $("body").contents().clone();
var updatedClone = $(clone).find('.content').removeClass('parallax');
updatedClone.appendTo("body");
updatedClone.prependTo("body");
HTML
<body>
<main class"content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>
</body>
But the appended content on the site is still adding the "parallax" class name. What simple thing am I forgetting?

clone() return jQuery object so you can use it to find and remove class
Try this :
var clone = $('body').find('.content').clone();
clone.find('.parallax').removeClass('parallax'); // Find all content with class parallax and remove class
clone.appendTo('body');
//clone.prependTo('body');
.parallax {
border: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>

Don't include the period in the class name on the removeClass function.
var updatedClone = $(clone).find('.content').removeClass('parallax');
https://api.jquery.com/removeclass/

Td inner elements

I'm very new at jQuery/Javascript.
I'm trying to know if to td element has more than one li element with text..
I have the follow td if has more than one li element with text.
Code sample:
<td class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
And the follow if i have only one li element without text:
<td class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"> </div>
</li>
</ul>
</div>
</td>
How i can know at the simple way (jQuery/javascript) if to my td has "inner elements"?
I see thats if has element the first li item have only rtLI rtFirst class and if not rtLI rtFirst reLast but how can i know that from my code?
Thanks

I'm basing this answer on your comment
i want to know if i have only one 'li' with inner div element with empty text.
As the wording of your actual question is less clear.
There appears to be a number of ways to achieve what you're after, they all begin with having a reference to your div element. In jQuery, you select an element by Id using a # selector
var $div = $('#divId');
(Note, as a common convention you can prefix variables which relate to a jQuery object with $ to distinguish them from other variables. Not essential, but a useful convention)
From there, your element with only blank text seems to have both classes rtFirst and rtLast. So you can count the number of children with both of these classes. If that count is equal to 1, then you have that element.
if($divId.find('.rtFirst.rtLast').length === 1){
// you only have the one element with both rtFirst _and_ rtLast
}
Another way would be to count the number of children of the ul within your div
var numberofLis = $divId.children('ul').children().length;
if(numberofLis === 1){
// you only have the one element
}
And there are countless other ways to achieve the same.

Full example code with finding only those tds with more then one li:
//function search for all tds with more then one li element inside
function getAllTdsWithLiMoreThenOne(rootSelector){
return $(rootSelector).find("td").has("li").filter(function(){
return $(this).find("li").length>1;
});
}
//after document is loaded
$(function(){
//here in getAllTdsWithLiMoreThenOne("table") you get list of tds
console.log("Tds with more than one li : "+getAllTdsWithLiMoreThenOne("table").length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="td1" class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
<td id="td2">
<div id="div2Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
Function getAllTdsWithLiMoreThenOne(selector) returns collection of Jquery objects, so You have on plate all tds with more then one li inside.
PS. inserting divs in tables is not good practice.

** Please note that you can not have this <td class="tdClass"/>, it should be <td class="tdClass"> instead, without / in it because this means it's a "self-closing" tag and td tag could not be a self-closing tag, you have </td> to close it.
// loop through the tds with tdClass class
$('#theTable .tdClass').each(function() {
var $this = $(this),
matched = $this.find('.rtMid');
// if we find only one .rtMid in the td..
if (matched.length === 1) {
// and its trimmed text is empty, then we have a match
if (matched.text().trim() === '') {
//match found, your code here
$this.css({'outline': '2px solid red'});
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="theTable">
<tr>
<!-- two divs with text in them, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
<!-- one div with no text in it, MATCH -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"> </div>
</li>
</ul>
</div>
</td>
<!-- two divs without text in them, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"></div>
</li>
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"></div>
</li>
</ul>
</div>
</td>
<!-- one div with text in it, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid">abc</div>
</li>
</ul>
</div>
</td>
</tr>
</table>

how to display different DIV part on clicking different <li> links in same JSP?

I want to display a different image in JSP on clicking a different links in the same JSP.
Can any one please help me in displaying image with respect to the DIV id.
here are my links bellow
<table class="contentTable" cellspacing=1 cellpadding=0 border=0 >
<tr class="altRow1">
<th class="fieldName" nowrap="nowrap" align="center" colspan="<%=metricCols %>">Business statistics </th>
</tr>
<tr>
<div class="greyBorderBox bottomSpacer10">
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app1(this.id);" id="id_1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app2(this.id);" id="id_2">link2</a></li>
</ul></td></tr>
below are the two DIV parts to be displayed
<tr class="altRow1">
<!-- if link1 is clicked this part should be displayed -->
<%if(bus.exists())){ %>
<div id="id1"> <td class="fieldName" style="vertical-align:top;" id="id1">
<img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</td></div>
<!-- if link2 is clicked this part should be displayed -->
<% }else { %>
<div id="id2"><td class="fieldName" style="vertical-align:top;">
<img height="240px" src= "C:\Users\Desktop\Capture.GIF" style="align:'center';" ></img>
</td>
<%
}
</div> </tr>

Put user defined attribute inside link and send only this param as a references like so :
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_1" data-target="id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_2" data-target="id2">link2</a></li>
One more thing, id should be unique(remove id="id1" inside img tag), change into this :
<div id="id1" style="display:none">
<td class="fieldName" style="vertical-align:top;" >
<a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</a>
</td>
</div>
For initial state, just hidden those two div using style="display:none", see above code. Same applied for second div.
And JS would be :
<script>
function show_app(e){
var target = $(e).data('target');
$('#'+target).toggle();
// ... another rest of code
}
</script>

In HTML, you can try like this: Demo
Added #id1, #id2 in href of <a> and used those id's for <div>
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id2">link2</a></li>
</ul>
<div id="id1">test 1 </div>
<div id="id2">test 2 </div>