2016-08-09 97 views
-1

Ich habe 4 Tasten, jede Taste wird ein Bild mit Ajax angezeigt.Toggle Bilder mit Ajax

<h:form> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Family" /> 
      </h:commandButton> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Karam"/> 
      </h:commandButton> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Memo"/> 
      </h:commandButton> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Baba"/> 
      </h:commandButton> 

      <h:panelGroup id="Family"> 
       <p:graphicImage library="images/img" name="family.png" id="FamilyImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
      <h:panelGroup id="Karam"> 
       <p:graphicImage library="images/img" name="Karam.png" id="KaramImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
      <h:panelGroup id="Memo"> 
       <p:graphicImage library="images/img" name="memo.png" id="MemoImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
      <h:panelGroup id="Baba"> 
       <p:graphicImage library="images/img" name="baba.png" id="BabaImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
     </h:form> 

Meine manged Bohne:

@ManagedBean(name = "userAjaxData", eager = true) 
@SessionScoped 
public class UserAjaxData implements Serializable { 

    private static final long serialVersionUID = 1L; 
    private boolean status = false; 

public void toggleStatus() { 
     status = true; 
    } 

    public boolean isStatus() { 
     return status; 
    } 

    public void setStatus(boolean status) { 
     this.status = status; 
    }} 

, wenn ich eine Schaltfläche klicken Sie auf das zugehörige Bild Es wird angezeigt, so dass, wenn ich das erste klicken, wird es das erste Bild anzuzeigen, und die zweite Taste wird angezeigt das zweite Bild, aber das erste Bild wird nicht entfernt. Ich brauche nur eine Möglichkeit, jedes Mal ein Bild anzuzeigen, wenn ich auf die Schaltfläche klicke. Wenn ich also auf die erste Schaltfläche klicke, wird die zweite Schaltfläche angezeigt und die erste ausgeblendet.

Wie kann ich es verwalten?

+0

Funktioniert es mit einer einfachen jsf graphicImage? Wenn nicht, ist es nicht PrimeFaces verwandt – Kukeltje

+0

Ihr Code ist sehr seltsam ... Die Tatsache, dass das erste Bild nicht geändert wird, ist, weil Sie es nicht in den anderen Schaltflächen "rendern". Aber wenn Sie das täten, würden sie alle gleichzeitig anzeigen, da sie das gleiche Statusfeld haben. Dein Code ist irgendwie komisch. – Kukeltje

+0

@kukeltje Mein Code lässt jede Taste ein Bild anzeigen. Wenn ich also auf 4 Knöpfe klicke, bekomme ich 4 Bilder auf der Seite. Ich möchte nur zwischen den Bildern ein- und ausschalten. Wenn ich auf die Schaltfläche klicke, sollte nur das Bild angezeigt werden, das zu dieser Schaltfläche gehört, und das andere Bild sollte verschwinden. Was meinst du damit, wenn es mit normalem graphicImage funktioniert? Führst du graphicImage ohne panelGroub aus? Wenn ja, wird es ohne panelGroup nicht funktionieren. –

Antwort

1

Wenn Ihr usecase wirklich so einfach ist, würde ich empfehlen, nur mit einem immer gemacht <h:graphicImage /> (keine Notwendigkeit für PrimeFaces GraphicImage in diesem Fall) und das entsprechende Bild gesetzt in der Backing Bean über Ajax zu zeigen, statt ein oder mehrere Toggle-Status mit etwas wie folgt aus:

<h:form id="form"> 
    <h:commandButton 
     id="familyButton" 
     action="#{toggleImageView.setImage('family.png')}" 
     value="Family" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <h:commandButton 
     id="karamButton" 
     action="#{toggleImageView.setImage('karam.png')}" 
     value="Karam" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <h:commandButton 
     id="memoButton" 
     action="#{toggleImageView.setImage('memo.png')}" 
     value="Memo" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <h:commandButton 
     id="babaButton" 
     action="#{toggleImageView.setImage('baba.png')}" 
     value="Baba" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <br /> 
    <h:graphicImage 
     id="image" 
     library="image/img" 
     name="#{toggleImageView.image}" 
    /> 
</h:form> 
@ManagedBean 
@RequestScoped 
public class ToggleImageView { 

    private String image; 

    @PostConstruct 
    public void initialize() { 
     image = "family.png"; 
    } 

    public String getImage() { 
     return image; 
    } 

    public void setImage(String image) { 
     this.image = image; 
    } 
} 

einfach an Ihre Bedürfnisse anpassen.

+0

vielen Dank. Es funktioniert, genau wie ich es möchte –