Связанный uicomponent в атрибуте onclick

Question

Я хотел бы переключить стильClass из uicomponent, когда пользователь нажимает на него с помощью javascript. Однако обе кнопки ниже не могут быть класса «активны» одновременно. Я бы использовал идентификатор непосредственно в функции, но это невозможно, потому что кнопки находятся внутри тегов ui:repeat. Я знаю, что формы внутри ui:repeat не рекомендуется, но я сделал это, прежде чем осознавать этот факт, и это не должно быть проблемой для того, что я прошу. Поэтому вместо использования идентификатора я попытался использовать атрибут binding, но, похоже, он не работает (я не знаю, действительно ли это законно).

<ui:repeat var="thread" value="#{categoryBean.category.thethreads}"> 
<h:form> 
    <p:commandButton icon="fa fa-chevron-up" 
     binding="#{upvoteBtn}" 
     action="#{threadVotesBean.upvote(thread)}" styleClass="voteBtn #{threadVotesBean.isUpvoteActive(thread) ? 'active': 'notActive'}" 
     onclick="toggleClass(#{upvoteBtn.clientId},#{upvoteBtn.clientId},'up')"/>          
    <p:commandButton icon="fa fa-chevron-down" 
     binding="#{downvoteBtn}" 
     styleClass="voteBtn" action="#{threadVotesBean.downvote(thread)}" 
     onclick="toggleClass(#{upvoteBtn.clientId}, #{downvoteBtn.clientId},'down')"/> 
</h:form> 
</ui:repeat> 

<!-- I don't know javascript so this is a bit funky just for testing --> 

    <script> 
    function toggleClass(idUp, idDown, buttonPressed){ 
     alert("entered"); 
     var classUpvote = document.getElementById(idUp).className; 
     var classDownvote = document.getElementById(idDown).className; 
     if(buttonPressed == "up"){ 
      alert(classUpvote); 
     } 
    } 
</script> 

А почему я хочу сделать: у меня есть темы, которые пользователь может downvote или upvote с помощью маленьких кнопок со стрелками. Когда эти кнопки нажимаются, цвет кнопки меняется от синего до оранжевого. Я хотел бы использовать javascript, если это возможно, поэтому нет никакой задержки для кнопки для переключения цвета, и я не хочу обновлять страницу.

Answer 1

Это глупо, я просто забыл об этом, и он работает. Оно должно быть:

onclick="toggleClass('#{upvoteBtn.clientId}', '#{downvoteBtn.clientId}','down')"/> 

вместо

onclick="toggleClass(#{upvoteBtn.clientId}, #{downvoteBtn.clientId},'down')"/> 

Answer 2

Вы используете primefaces? Какая версия? Смотрите, если вы можете использовать: http://www.primefaces.org/showcase/ui/input/oneButton.xhtml

Без primefaces и с JQuery в руках, это легко сделать:

Попробуйте это:

<div id="threads"> 
    <ui:repeat var="thread" value="#{categoryBean.category.thethreads}"> 
     <h:form> 
      <p:commandButton icon="fa fa-chevron-up" 
           binding="#{upvoteBtn}" 
           action="#{threadVotesBean.upvote(thread)}" 
           styleClass="voteBtn #{threadVotesBean.isUpvoteActive(thread) ? 'active': ''}" />          
      <p:commandButton icon="fa fa-chevron-down" 
           binding="#{downvoteBtn}" 
           styleClass="voteBtn" 
           action="#{threadVotesBean.downvote(thread)}" /> 
     </h:form> 
    </ui:repeat> 
</div> 

// function called when DOM is ready (page fully loaded.) 
    $(function(){ 

     //selecting the DIV element with id 'threads'. 
     var $threads = $('div#threads'); 

     // The DIV element injects an event on all elements with class 'voteBtn'. 
     $threads.on('click', '.voteBtn', function(event) { 
      // select the element that triggered the click event 
      var $clickedBtn = $(event.currentTarget); 

      // lookup for parent element with 'form' tag name and find inside it all children elements with class 'voteBtn' to remove 'active' class. 
      $clickedBtn.parent('form').find('.voteBtn').removeClass('active'); 

      // then, back to the trigger element, just add 'active' class to it. 
      $clickedBtn.addClass('active'); 
     }); 

    }); 

Или это лучше:

<h:form id="threadsForm"> 
    <ui:repeat var="thread" value="#{categoryBean.category.thethreads}"> 
     <div id="group"> 
      <p:commandButton icon="fa fa-chevron-up" binding="#{upvoteBtn}" action="#{threadVotesBean.upvote(thread)}" styleClass="voteBtn #{threadVotesBean.isUpvoteActive(thread) ? 'active': 'notActive'}" />          
      <p:commandButton icon="fa fa-chevron-down" binding="#{downvoteBtn}" styleClass="voteBtn" action="#{threadVotesBean.downvote(thread)}" /> 
     </div> 
    </ui:repeat> 
</h:form> 

// function called when DOM is ready (page fully loaded.) 
    $(function(){ 

     //selecting form element. 
     var $form = $('#threadsForm'); 

     // the form element injects an event on all elements with class 'voteBtn'. 
     $form.on('click', '.voteBtn', function(event) { 
      // select the element that triggered the click event 
      var $clickedBtn = $(event.currentTarget); 

      // lookup for parent element with 'group' class and find inside it all children elements with class 'voteBtn' to remove 'active' class. 
      $clickedBtn.parent('.group').find('.voteBtn').removeClass('active'); 

      // then, back to the trigger element, just add 'active' class to it. 
      $clickedBtn.addClass('active'); 
     }); 

    }); 

Сделайте «ui: repeat» визуализировать любой div или span? Если да, это не сработает.