javaeetutorial
  1. javaeetutorial
  2. JAVAEETUTORIAL-159

ajaxguessnumber: possible solutions without js-hack

    Details

    • Type: Improvement Improvement
    • Status: Resolved
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 6.0.8
    • Fix Version/s: 7.0.2
    • Component/s: examples
    • Labels:
      None

      Description

      When reading the chapter on the ajaxguessnumber example app and analysing the code, I was surprised at the choice of writing a custom js-function "msg" to get rid of the stale result. Certainly, this allows the demonstration of the h:commandButton's onevent attribute, but:

      • it doesn't seem like a clean solution to me (it doesn't seem very refactoring-friendly because of the 2 getElementById("hard-coded HTML element ID") calls),
      • it doesn't explain the inclusion of the commented-out code <f:ajax execute="userNo" render="result errors1" /> within the code AND the tutorial chapter.

      It looks more like a quick fix by one person (developer) that was later commented on by another person (who wrote the tutorial chapter).

      If one were to want to rewrite the code as it was perhaps originally intended (as is perhaps still visible in the commented-out code aforementioned), I could think of the following two possibilities:

      1. Only render the outputText if there was no validation error.
      2. Change the scope of the ManagedBean from @SessionScoped to @RequestScoped


      The first solution would look something like the following. For it to work with Ajax, the outputText would need to be wrapped in a container such as h:panelGroup and the f:ajax render attribute would need to refer to the panel's ID ("outputGrid"):

      ajaxgreeting.xhtml
      <h:commandButton id="submit" value="Submit" >
          <f:ajax execute="userNo" render="outputGrid" />
      </h:commandButton>
      <h:panelGroup layout="block" id="outputGroup">
          <h:outputText id="result" style="color:blue"
                        value="#{userNumberBean.response}" rendered="#{!facesContext.validationFailed}"/>
          <h:message id="errors1" showSummary="true" showDetail="false"
                     style="color: #d20005;
                     font-family: 'New Century Schoolbook', serif;
                     font-style: oblique;
                     text-decoration: overline" 
                     for="userNo"/>
      </h:panelGroup>
      

      The second solution changes the design altogether. I'm not sure why you would want @SessionScoped for this example in the first place. @RequestScoped seems more appropriate and solves the problem of hiding the "stale output" of the "result" outputText element.

        Activity

          People

          • Assignee:
            Ian Evans
            Reporter:
            swiss-chris
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Time Tracking

              Estimated:
              Original Estimate - 30 minutes
              30m
              Remaining:
              Remaining Estimate - 30 minutes
              30m
              Logged:
              Time Spent - Not Specified
              Not Specified