velocity break loops if checkbox is checked - html

Question

I'm using apache velocity in a web application (just for experimentation and practice)
for example:
<input id="limited" type="checkbox"> <strong>Limited view</strong>
so I need a code which would be... if the checkbox above is checked then do this:
#foreach( $customer in $customerList )
#if( $velocityCount > 5 )
#break
#end
$customer.Name
#end
else then don't break it
is that kind of syntax possible?
and if yes then can you show me how?
please no rude comments, I'm just trying to learn... can anyone help?

Answer 1

It seems you wish to get Velocity to instantly react on someones click, right?
This wouldn't work (without further effort, that is), because the Velocity template is rendered server sided. Your Velocity code would never 'notice' the click, as it is done on the client side. At least not in the same request, but I come to that later.
Furthermore Velocity isn't able to directly access the value of the checkbox, meaning there is no such thing as limited.isChecked().
So, first thing you need is a backing (form) object, where you evaluate and keep the status of your checkbox. Should be no problem, as you managed to provide the object $customerList. The checkbox status should be represented by a boolean var, say limitedView, so that you can write:
#foreach( $customer in $customerList )
#if($velocityCount > 5 && $yourBackingObject.isLimitedView())
#break
...
(Please see Breaking out of a foreach loop in Velocity, if you face problems with the #break instruction.)
If you actually need to show the shortened list immediately, then refresh (part of) the page using JavaScript/Ajax. This new request is what you need to update your backing object and to render the template again.
Edit:
Or even simpler (but a little outside of Veloctiy and depending on JavaScript) provide both lists in two different containers in the page, like <div>, and toggle the css class on a click at the checkbox so that one on of the two is always invisible.
.vm:
<div id="listLength">
#foreach( $customer in $customerList )
#if($velocityCount > 5)
#break
...
</div>
<div id="listLengthToggler">
#foreach( $customer in $customerList )
...
</div>
.css
div#listLengthToggler,
div#listLength {
... /* general styles for classes */
display: none;
}
div#listLengthToggler {
display: block;
}
.js
$(document).ready(
function() {
$('div#listLengthToggler').click(
function() {
$('div#listLength').slideToggle('slow');
}
);
}
);
Get http://code.jquery.com/jquery-2.1.4.min.js
You add a line that says 'Click to expand!' and 'Click to collapse!', respectively inside each div and get rid of the checkbox or adapt the JavaScript so the toggling starts on a click on it.