Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting a JSF list box directly from javascript
    text
    copied!<p>I'd like to directly set the listbox elements defined in a jsf block via setting them in a javascript code, but the document.getElementById() returns null ?</p> <p>JSF Code:</p> <pre><code>&lt;h:panelGroup id="dtEffectiveDate"&gt; &lt;h:outputText value="EffectiveDates:" style="margin-left: 250px;width:76px;"/&gt; &lt;h:selectManyListbox id="effectiveDateListbox" style="margin-left: 15px; width:76px;" size="2"&gt; &lt;c:selectItems id="effectiveDateSelectItems" value="#{manualDataEntryRegText.effectiveDates}"/&gt; &lt;/h:selectManyListbox&gt; &lt;/h:panelGroup&gt; </code></pre> <p>JavaScript code:</p> <pre><code>CalendarPopup.handleSelectForMultipleDates = function(type, args, obj, inputEl) { alert("MultiSelect"); var arrDates = CalendarPopup.effectiveDateCalendar.getSelectedDates(); var length = arrDates.length; var i=0; var tokenizedDates = ""; var txtDate = document.getElementById("pageForm:effectiveDateListbox"); alert(txtDate); // returns null for (i = 0; i!= length; i++) { var date = arrDates[i]; var displayMonth = date.getMonth() + 1; var displayYear = date.getFullYear(); var displayDate = date.getDate(); tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10); effectiveDateListbox.options[i].value = tokenizedDates; i++; } } </code></pre> <p>EDIT: I am able to get the listbox but cannot set it: How do I set the listbox ? </p> <pre><code>var listBox = document.getElementById('pageForm:effectiveDateListbox'); for (i = 0; i!= length; i++) { var date = arrDates[i]; var displayMonth = date.getMonth() + 1; var displayYear = date.getFullYear(); var displayDate = date.getDate(); tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10); listBox.options[i].value = tokenizedDates; i++; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload