title: How to pass list from a bean to client-side (javascript) on JSF?
body: <p>I have a list in the bean and try to push it to the client-side on JSF. I use json array for this operation. However, I get empty message in first alert and "Uncaught SyntaxError: Unexpected end of input" error message for the line - var obj = JSON.parse(dates) before second alert of javascript file.</p>
  
  <p>Do I use UIInput object correctly? How can I pass this list to use it in javascript file?</p>
  
  <p>.xhtml (UI);</p>
  
  <pre><code>...
      &lt;h:inputHidden id="specDates" binding="#{planCalendarFacade.datesUIComp}"/&gt;                             
      &lt;input jsfc="h:commandButton" id="slctdAction" class="hiddenBtn" action="#{planCalendarFacade.getSpecificCalendarPlans}"&gt;
          &lt;f:ajax execute="@form" render="@none" /&gt;
      &lt;/input&gt;
  ...
  </code></pre>
  
  <p>planCalendarFacade.java (bean);</p>
  
  <pre><code>    private UIInput datesUIComp;
      ...
      public PlanCalendarFacade() {
          // TODO Auto-generated constructor stub
  
      }
      public void getSpecificCalendarPlansFromDB(){
  
              List&lt;String&gt; temp = new ArrayList&lt;String&gt;();
              temp.add("2014-05-09");
  
              JsonParser parser = new JsonParser();
              JsonElement jsonElement = parser.parse(temp.toString());
              JsonArray jsonArray = jsonElement.getAsJsonArray();
              for(int i = 0 ; i &lt; jsonArray.size(); i++)
                  System.out.println("Item"+i+" - &gt;"+jsonArray.get(i));
  
              datesUIComp.setValue(jsonArray);
      }
      public UIInput getDatesUIComp() {
          return datesUIComp;
      }
  
      public void setDatesUIComp(UIInput datesUIComp) {
          this.datesUIComp = datesUIComp;
      }
  </code></pre>
  
  <p>javascript file;</p>
  
  <pre><code>function updateAddedDayPlns(){
      $(".addedDayPlnLst").selectable({
          stop : function() {
              $(".ui-selected", this).each(function() {
                  // My form-id is "mainForm"
                  document.getElementById('mainForm:slctdAction').click();
                  var dates = document.getElementById('mainForm:specDates').value;
                  alert(dates);
                  var obj = JSON.parse(dates);
                  alert(obj.get[0]);
                  $('.clndr').datepick({ 
                      onSelect: datePickShow,
                      multiSelect: 999, 
                      monthsToShow: [3,2]}).datepick('setDate', arr);
              });
          }
      });
  }
  </code></pre>
  
  <p>All feedbacks appreciated!</p>