0

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?

Here is my code:

<h:form>
  <div class="container">
    <div class="section">

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

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

        </ui:repeat>
      </h:panelGroup>


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

      </div>

    </div>
  </div>
</h:form>

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.

Greatly appreciate for your time and effort.

tfosra
  • 581
  • 5
  • 12
Lance Leroy
  • 399
  • 4
  • 7
  • 17
  • Press F12 in webbrowser to open webdeveloper toolset. When things appear to fail in client side, you usually find clues there. Big chance there's a simple (and quite googlable) JS error message visible in the console. – BalusC Jun 06 '16 at 07:35
  • Thank you @BalusC your approach is really helping me to find out the answer, I did not see that error "majarra is undefined" error until I use develop tool of chrome. Thank you so much and gonna post an answer for my case. appreciate – Lance Leroy Jun 06 '16 at 08:22

3 Answers3

0

This looks good to me, should work. Are you sure the entire page is getting refreshed?

The <f:ajax> should do the trick.

Ani
  • 23
  • 1
  • 4
  • Just a couple of things,you don't necessarily need a `actionListener` in the commandButton, action is good. You don't have to add an extra ``, define an id for ` ` and use that in your render attribute of your `` tag – Ani Jun 06 '16 at 07:32
  • I understand you don't yet have sufficient reputation to post comments, but please don't use this as an excuse to post comments as answers. This post does not answer the concrete question at all. – BalusC Jun 06 '16 at 07:37
  • I understand, Sorry for that. just wanted to help! – Ani Jun 06 '16 at 07:39
  • I have no doubts about your intents. – BalusC Jun 06 '16 at 07:41
0

I found the answer, for my case I am using JSF 2.2 by importing javax.faces-2.2.7.jar, I should set the following outputScript declaration in head tag

<h:outputScript library="javax.faces" name="jsf.js" target="head" />

and now works like charm.

Refer to :

Programatically adding Ajax Behaviour - “Mojarra is not defined”

Community
  • 1
  • 1
Lance Leroy
  • 399
  • 4
  • 7
  • 17
  • 1
    You shouldn't have the need to explicitly include that script as long as you have a `` instead of ``. – BalusC Jun 06 '16 at 08:30
-1

remove the actionListener from h:commanButton and put listener in f:ajax and try

Ajay
  • 87
  • 7
  • In the future, before posting an answer, better try to reproduce the described problem yourself in a sandbox project. If you found the cause and the solution, try describing the cause of the problem in detail and explaining how exactly the proposed solution solves the problem. This is also a great way to learn new things. Namely, the current answer is completely wrong and just a shoot in the dark. – BalusC Jun 06 '16 at 07:33