Danamische AJAX-Tabelle

Basis-Tabelle

<div id="ScrollElement" onscroll="nextElements()"
  style="height: 100px; width: 300px; overflow: auto; border: solid 1px black;">
<table id="tableElement" >
    <thead>
        <tr>
            <th>Item Name</th>
        </tr>
    </thead>
    <tbody>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
    </tbody>
</table>
</div>
<span id='Debug'></span>

Javascriptcode

<script type="text/javascript">
var global_block = false;
    var global_counter = 0;

    function nextElements()
    {
     var element = document.getElementById('ScrollElement');
     var height = element.scrollHeight;
     var scroll = element.scrollTop;

     var diff = height - scroll;

     document.getElementById('Debug').innerHTML = diff;

     if(diff <= 200 && global_block == false)
     {
         global_block = true;
        appendNewElements();
     }
    }

    function appendNewElements()
    {
     for(var i=0; i<10; i++)
     {
      global_counter++;
      
      var newListElement = document.createElement('tr');

      var tdelement = document.createElement('td');

      var newtext=document.createTextNode('Martin' + global_counter);

      tdelement.appendChild(newtext);
      
      newListElement.appendChild(tdelement);
      
      //newListElement.innerHTML = 'AppendedItem: ' + global_counter;

      var parentElement = document.getElementById('tableElement').getElementsByTagName("TBODY")[0];
            
      parentElement.appendChild(newListElement);


      newListElement = null;
      tdelement = null;
      newtext = null;
      parentElement = null;
     }
     global_block = false;
    }
</script>

Anmerkung.

Dieses Basiskonstrukt läuft im sowohl im Internetexplorer (7) als auch im neuesten Chrome.

JSF ComboBoxen mit Autopostback

Um Dynamische GUIs zu bauen gibt es verschieden Optionen die GUI zu verändern.
In den meisten JSF-Einführungenwird zwar beschrieben wie man ein SelectOne verwendet, jedoch nicht wie man eine Bestimmte logik im Backing bean anspricht.

<h:selectOneMenu id="selectCar" value="#{carBean.currentCar}">
 <f:selectItems value="#{carBean.carList}" />
</h:selectOneMenu>

Der Entscheidende Punkt ist, dass 2 Attribute gesetut werden müssen.
das onchange="this.form.submit()" bewirkt, dass die Werte des Formulars ins Model übernommen werden (durch Aufruf der setter-Methode).
Die Business-Logik sollte man aber nicht in den Setter reinbauen. Sondern sollte mittels eines valueChangeListener eingebunden werden.

<h:selectOneMenu id="selectCar" value="#{carBean.currentCar}"
  valueChangeListener="#{BackingBean.processValueChange}" 
  onchange="this.form.submit()" >
 <f:selectItems value="#{carBean.carList}" />
</h:selectOneMenu>

public void  proessValueChange(ValueChangeEvent event) {
  //some logic
}