0

JSF 2.1

I am attempting to build some div tags conditionally.
The div tags must have the following format for their DOM id -

jquery_jplayer_#  // where # is an integer

Additional requirements:

The resultant HTML should look like this -

<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
  .
  .
  .
</div>
<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;">
  .
  .
  .
</div>

Here is what my current code that is attempting to do this looks like:

<ui:repeat value="#{accessibilityTagging.previewTagsOrderByCurrentlySelectedOrderType}" var="currentTag" varStatus="loop_1">
  <ui:repeat value="#{accessibilityTagging.accessibilityElements}" var="accessibilityElement" varStatus="loop_2">
    <ui:repeat value="#{accessibilityElement.featureList}" var="feature" varStatus="loop_3">
      <h:panelGroup rendered="#{feature.feature eq 1">
         <!-- some irrelevant stuff happening here -->
      </h:panelGroup>
      <h:panelGroup rendered="#{feature.feature eq 2}">
         <!-- relevant stuff happens here! -->
         <div id="jquery_jplayer_#{loop_1.index + loop_2.index + loop_3.index + 1}" class="jp-jplayer"></div>
         <div id="jp_container_#{loop_1.index + loop_2.index + loop_3.index + 1}" class="jp-audio">
           <div class="jp-type-single">
             <div class="jp-gui jp-interface">
               <ul class="jp-controls">
                 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
               </ul>
               <div class="jp-progress">
                 <div class="jp-seek-bar">
                   <div class="jp-play-bar"></div>
                 </div>
               </div>
               <div class="jp-volume-bar">
                 <div class="jp-volume-bar-value"></div>
               </div>
               <script type="text/javascript">
                 //<![CDATA[
                 $(document).ready(function(){
                   $("#jquery_jplayer_#{loop_1.index + loop_2.index + loop_3.index + 1}").jPlayer({
                     ready: function (event) {
                       $(this).jPlayer("setMedia", {
                         mp3: "#{ttsManager.serverURL}/TTSServlet?text="+encodeURI('#{feature.info}')
                       });
                     },
                     swfPath: "/common/js",
                     supplied: "mp3, m4a, oga",
                     wmode: "window",
                     smoothPlayBar: true,
                     keyEnabled: true,
                     remainingDuration: false,
                     toggleDuration: false,
                     errorAlerts: true
                   });
                 });
                 //]]>
               </script>
       </h:panelGroup>
     </ui:repeat>
   </ui:repeat>
 </ui:repeat>

There are two problems a with what I have:

  1. The innermost loop resets the varStatus back to 0 after it finishes iterating.
  2. The varStatus index value starts with 0. I need it to start at 1.

Any suggestions on how to tackle this problem? (Is there a way that I store the current counter in a variable or hidden field?)

I do not want to use JSTL (e.g. <c:set> as this will mix JSF components with JSP).

  • 1: which varStatus? From itself? That is as designed. 2: simply do a `+1` when assinging the id, and please, one question per question – Kukeltje Jul 23 '15 at 06:17
  • @Kukeltje - The inner most is utilizing the varStatus. Ok, so it sounds like varStatus is not the way to go. Essentially I need to keep track of the number times the panelGroup where feature.feature == 2 is rendered. varStatus won't help because as you can see that innermost loop will finish and varStatus will get reset. Using JSTL one could use and track the number this way - but I would need to change the entire page from JSF components to JSP (that is out of the question). How can you do this solely using JSF components? perhaps? –  Jul 23 '15 at 14:42
  • Why not use a counter in a bean? One that you increment on each call? And why is it sooo important that the id increments without gaps? Can't you just concatenate the `varStatus.index` from all loops in a clever way? – Kukeltje Jul 23 '15 at 14:50
  • @Kukeltje - Interesting idea about chaining all the varStatus instances together. That could work - but as you pointed out, there could be times when the numbers will not be consecutive. I suppose I assumed that they had to be based on how Jplayer works with multiple instances on the same page. (http://jplayer.org/latest/developer-guide/#jPlayer-play) I think I'm more interested in hearing more about your idea of having a counter in a bean. How would that work? –  Jul 23 '15 at 15:02
  • @Kukeltje - Since I'm using JSF (myfaces api) 2.1, I don't think I can make calls to the backing bean from the view as you are suggesting, based on the answer provided by BalusC in this post - http://stackoverflow.com/questions/3284236/invoke-direct-methods-or-methods-with-arguments-variables-parameters-in-el?lq=1. –  Jul 23 '15 at 15:23
  • You can't do method calls, but you can call getters. But these might be called to often so it most likely will cause gaps to. Just try if string concatenation of the index of the three loops work – Kukeltje Jul 23 '15 at 15:27
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84093/discussion-between-ivan-drago-and-kukeltje). –  Jul 23 '15 at 15:40

0 Answers0