title: Bootstrap X-Editable mapping to JSF Managed Bean
body: <p>Have been trying to get Bootstrap's X-Editable type to work in with JSF2.2 for improving the UX with a profile form. There doesn't seem to be much on this using X-Editables with JSF yet? The user's profile page will allow viewing/editing inline by clicking on an entry. On submission of a change the Bean should be persisted/updated.</p>
  
  <p>The method I've gotten working is a bit cumbersome as it requires JS for each field and am looking for improvements/best practice. </p>
  
  <ul>
  <li>Is it possible to make a generic JS call for each field submission
  rather than individual ones?</li>
  <li>In addition, doing it this way bypasses
  the built in JSF form validation. </li>
  <li>Thoughts for improvement please?</li>
  </ul>
  
  <p>Firstly the Managed Bean:</p>
  
  <pre><code>@ViewScoped
  public class UserController implements Serializable {
  
      private User user;
  
      public UserController() { }
  
      public String update() {
          try {
              getFacade().edit(user);
          } (Exception e) { //Exception handling }
      }
  
      //Getters/setters etc.
  
  }
  </code></pre>
  
  <p>The XHTML snippet with hidden Save button that the JS triggers on submission of a change:</p>
  
  <pre><code>&lt;h:form id="mainForm"&gt;
      &lt;div&gt;
          &lt;h:inputHidden value="#{userController.user.alias}" id="aliasHidden"/&gt;
          &lt;span class="editable" id="alias"&gt;#{userController.user.alias}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          //Other "editable" fields
      &lt;/div&gt;
      &lt;h:commandButton id="saveButton" value="Save" action="#{userController.update}" style="display:none;"&gt;
          &lt;f:ajax execute="@form" /&gt;
      &lt;/h:commandButton&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>Then the JS:</p>
  
  <pre><code>jquery(function ($){
      //The generic save on submission of change to persist the bean
      $('.editable').on('save', function (e, params) {
          document.getElementById('mainForm:saveButton').click();
      });
      //Render the editable and resulting function to move the editable entry into the bean prior to persist
      $('#alias').editable({
          type: 'text',
          name: 'alias',
          url: function (params) {
              $('input[id*=aliasHidden]').val(params.value);
          }
      });
  }
  </code></pre>