h:commandButton partial refresh cannot work
<p>I am new to JSF, I having the difficulty to implement the partial refresh/rendering in my JSF 2.2, I'm using .xhtml page, I've searched through Internet for solutions but won't work. Was my practice wrong?</p>

<p>Here is my code:</p>

<pre><code>&lt;h:form&gt;
  &lt;div class="container"&gt;
    &lt;div class="section"&gt;

      &lt;!--   Icon Section   --&gt;
      &lt;h:panelGroup id="result" styleClass="row"&gt;
        &lt;ui:repeat var="project" value="#{homeBean.displayProjectList}"&gt;

          &lt;div class="col s12 m6 l4"&gt;
            &lt;div class="card"&gt;
              &lt;div class="card-image"&gt;
                &lt;img src="resources/materialize/background1.jpg" /&gt;
                &lt;span class="card-title"&gt;#{project.title}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="card-content"&gt;
                &lt;p&gt;#{project.summary}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="card-action"&gt;
                &lt;a href="./event.xhtml"&gt;More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

        &lt;/ui:repeat&gt;
      &lt;/h:panelGroup&gt;


      &lt;div class="row center"&gt;
        &lt;h:commandButton styleClass="btn-large yellow lighten-2 black-text" value="SHOW MORE" actionListener="#{homeBean.showMore()}" &gt;
          &lt;f:ajax render="result" /&gt;
        &lt;/h:commandButton&gt;

      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/h:form&gt;
</code></pre>

<p>When the command button is pressed, I wish to refresh only the section covered in panelGroup id="result", it did update but I wish to refresh the section only instead of the entire page.</p>

<p>Greatly appreciate for your time and effort.</p>