使用twitter bootstrap的單選按鈕 - 無法獲得價值

Question

我瀏覽過所以發現一些答案已經引導我更接近獲取工作單選按鈕，但我現在卡住了。

我有按鈕，但無法獲取所選的值。

我使用JSF，因此#{searchFlightsBean.setDir()}

這是我目前有：

<h:panelGrid> 
    <div class="btn-group" data-toggle-name="is_private" data-toggle="buttons-radio" > 
     <button type="button" value="0" class="btn" data-toggle="button">Public</button> 
     <button type="button" value="1" class="btn" data-toggle="button">Private</button> 
    </div> 
    <h:inputHidden id="hiddenDir" value="0" valueChangeListener="#{searchFlightsBean.setDir()}" onchange="submit()"/> 
</h:panelGrid> 

<script> 
$(function() { 
    $('div.btn-group[data-toggle-name]').each(function() { 
     var group = $(this); 
     var form = group.parents('form').eq(0); 
     var name = group.attr('data-toggle-name'); 
     var hidden = $('input[name="' + name + '"]', form); 
     $('button', group).each(function() { 
      var button = $(this); 
      button.on('click', function() { 
       hidden.val($(this).val()); 
      }); 
      if (button.val() == hidden.val()) { 
       button.addClass('active'); 
       #{searchFlightsBean.setDir(button.value)} 
      } 
     }); 
    }); 
}); 
</script> 

在我的豆，當setDir()叫，我記錄它接收到，像這樣的價值：

public void setDir(ValueChangeEvent e) { 
    this.dir = e.getNewValue().toString(); 
    log.info("NEW DIRECTION: " + this.getDir()); 
} 

它不記錄 - setDir()永遠不會被調用。由於某些原因，​​標記上的valueChangeListener屬性不起作用。我錯過了什麼嗎？

Answer 1

你的具體問題引起的。

<h:inputHidden ... valueChangeListener="#{searchFlightsBean.setDir()}"> 

這與方法簽名不匹配。你應該省略括號()。

<h:inputHidden ... valueChangeListener="#{searchFlightsBean.setDir}"> 

否則JSF預計沒有爭議的setDir()方法。然後，您無法在JavaScript中觸發輸入元素上的change事件。因此從不調用onchange="submit()"。你應該在JS中做hidden.trigger("change")來達到這個目的。

但是，畢竟，這是有點笨拙。你發送一個完整的同步請求，你的JS代碼相當複雜（一旦你更新了表單，就停止工作）。假設您使用JSF 2.x進行了indeeed，我建議引入<f:ajax> —，但不幸的是，它不會在<h:inputHidden>中工作，因此<h:inputText style="display:none"> —以及在jQuery中利用$.on()來保持函數正常工作，即使您使用ajax-更新DOM。

<h:form> 
    <div class="btn-group" data-toggle-name="is_private" data-toggle="buttons-radio" > 
     <button type="button" value="0" class="btn" data-toggle="button">Public</button> 
     <button type="button" value="1" class="btn" data-toggle="button">Private</button> 
    </div> 
    <h:inputText id="is_private" value="#{bean.dir}" style="display: none;"> 
     <f:ajax listener="#{bean.changeDir}" /> 
    </h:inputText> 
    <!-- Note: <h:inputText id> must be exactly the same as <div data-toggle-name> --> 
</h:form> 

<h:outputScript> 
    $(document).on("click", "[data-toggle=buttons-radio] button", function() { 
     var $button = $(this); 
     var id = $button.closest(".btn-group").attr("data-toggle-name"); 
     var $input = $button.closest("form").find("input[id$=':" + id + "']"); 

     if ($input.val() != $button.val()) { 
      $input.val($button.val()).trigger("change"); 
     } 
    }); 
</h:outputScript> 

（注意應該是整個腳本真正應該放在自己的.js文件，你包括由<h:outputScript name="some.js" target="body">;請注意，你不需要$(document).ready()也不$(function() {})混亂;也注意到，非常JS功能是所有其他<div data-toggle="buttons-radio">組沒有變化）

有了這個bean可重複使用：

private Integer dir; 

public void changeDir() { 
    System.out.println("New direction: " + dir); 
} 

// ... 

（注意應該是，當你在changeDir()方法中進一步沒有任何相關時，那麼你可以完全省略整個方法和<f:ajax>並將<h:inputText style="display:none">還原回<h:inputHidden>並刪除.trigger("change")並依賴於常規表單提交。它會一樣好）

Answer 2

你不能在JavaScript中通過表達式語言調用（＃{...}）調用任何支持bean函數。

你可以做的是使用a4j：jsFunction爲你的bean方法提供java腳本代碼。這可能是這樣的：

<a4j:jsFunction name="setDir" action="#{searchFlightsBean.setDir()}" ajaxSingle="true"> 
    <a4j:param name="dir" assignTo="#{searchFlightsBean.dir}" /> 
</a4j:jsFunction> 

見，因爲你使用valueChangeListener走錯了路http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_jsFunction.html 和http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=jsFunction&skin=blueSky