0

我正在尝试构建一个允许用户编辑和非编辑视图的用户界面。目前它正在工作，但有一个我不明白的小错误。有人可以解释 JSF 渲染和 ajax 的确切工作流程导致以下情况：

  • 当页面第一次加载或重新加载时，触发编辑模式的“编辑”按钮工作得很好。

  • 一旦我通过左侧菜单中的 ajax 更新 id="currentChapters" 部分的内容，我必须单击两次“编辑”按钮才能渲染编辑器（无论我使用什么事件 - onclick、oncomplete 或 JSF 操作）。进入编辑视图并返回非编辑视图后，再次单击该按钮即可。

  • 当我只用标签（而不是全部内容）围绕编辑器并使用 navLink 作为编辑按钮时，navLink 工作得非常好。但是当我在进入编辑模式后尝试保存编辑器内容时，保存按钮现在只在第二次点击时起作用。

我没有落后于导致这个问题的事件流。

<ui:composition template="../WEB-INF/templates/template-main.xhtml" >
        <ui:define name="title">Projekt</ui:define>
        <ui:define name="content">
            <f:metadata>
                <f:viewAction action="#{ProjectBacking.onPageLoad()}" />
            </f:metadata> 


            <b:row class="projects-page">               
                <b:column span="3" styleClass="project-menu-left">                    
                   <b:accordion rendered="#{Login.user.team.project != null}">
                       <c:forEach items="#{ProjectBacking.projectDocuments}" var="document">
                           <b:panel title="#{document.documentName}">   
                               <b:listLinks>
                                   <c:forEach items="#{document.projectChapters}" var="chapter">
                                       <b:navLink value="#{chapter.chapterOrder}.#{chapter.chapterName}" update="currentChapters">
                                           <f:ajax listener="#{ProjectBacking.setCurrentContentForChapter(chapter)}" 
                                                render="currentChapters"/>
                                       </b:navLink>                                           
                                   </c:forEach>    
                               </b:listLinks>                                                              
                           </b:panel>
                       </c:forEach>                          
                   </b:accordion>                                    
               </b:column> 

                <b:column span="9" id="currentChapters" >    
                    <h:form id="form-ckeditor">
                        <b:row rendered="#{Login.user.team.project != null}">
                        <b:column span="12">
                            <h:panelGroup layout="block" styleClass="user-content-header"> 
                                #{ProjectBacking.currentContent.projectChapter.projectDocument.documentName} - #{ProjectBacking.currentContent.projectChapter.chapterName}
                            </h:panelGroup>
                        </b:column>

                        <b:column span="12">
                            <h:panelGroup layout="block"                                           
                                          styleClass="project-content" 
                                          rendered="#{!ProjectBacking.isEdit}">                                     
                                <h:outputText value="#{ProjectBacking.currentContent.content}" 
                                                escape="false"/>
                            </h:panelGroup>                                
                        </b:column>
                        <b:column span="3"> 
                            <b:commandButton value="Edit" 
                                             look="success" 
                                             rendered="#{!ProjectBacking.isEdit}"  
                                             action="#{ProjectBacking.setIsEditTrue()}"
                                             update="currentChapters"
                                             styleClass="full-width"/>
                        </b:column>
                     <b:column span="12">
                                 <pe:ckEditor id="ckeditor" 
                                            rendered="#{ProjectBacking.isEdit}"
                                            width="100%" 
                                            value="#{ProjectBacking.editorContent}">
                                   <p:ajax event="save"   
                                           listener="#{ProjectBacking.updateProjectContent()}"
                                           update="currentChapters" />
                               </pe:ckEditor>  
                       </b:column>

                   </b:row>
                     </h:form>   
                </b:column>


            </b:row>
        </ui:define>
    </ui:composition>

支持豆：

@Named("ProjectBacking")
@SessionScoped
public class ProjectsBacking implements Serializable {

    private static final long serialVersionUID = 1L;

    //Field Properties
    private String projectName;
    private ProjectContent currentContent;
    private String editorContent;
    private boolean isEdit;    

    //Data Properties
    private User currentUser;
    private Project project;
    private List<ProjectDocument> projectDocuments;
    private List<ProjectContent> projectContents;


    private String testContent;

    @Inject
    private LoginBacking login;
    @EJB
    private TeamDAO teamDAO;
    @EJB
    private ProjectDAO projectDAO;    
    @EJB 
    private DocumentDAO documentDAO;
    @EJB 
    private ChapterDAO chapterDAO;
    @EJB
    private ProjectDocumentDAO projectDocumentDAO;
    @EJB
    private ProjectChapterDAO projectChapterDAO;
    @EJB
    private ProjectContentDAO projectContentDAO;



    public void onPageLoad() {
       currentUser = login.getUser();
       projectDocuments = projectDocumentDAO.getAllProjectDocumentsOrderedByOrderNumber(); 

       /*
       When Page first time loaded, set the content on the page 
       to the content of the first chapter of the first document 
       (which currently is "Lastenheft")
       */
       if(currentUser.getTeam().getProject()!= null && currentContent == null) {
           currentContent = currentUser.getTeam().getProject().getProjectDocuments().get(0).getProjectChapters().get(0).getProjectContent();
       }
    }

    public void setIsEditTrue() {
        isEdit = true;            
    }

    public String createProject() {
        project = new Project();


        project.setProjectName(projectName);         
        project.setTeam(currentUser.getTeam()); 


        project = this.createInitialProjectContents(project);
        project = projectDAO.createProject(project);    
        currentUser.setTeam(teamDAO.updateTeam(currentUser.getTeam()));

        return "projects?faces-redirect=true";
    }    

    public void setCurrentContentForChapter(ProjectChapter chapter) {        
        currentContent = projectContentDAO.getProjectContentForProjectChapterId(chapter.getId());
        editorContent = currentContent.getContent();
        isEdit = false;
    }

    public void updateProjectContent() {

        editorContent = editorContent.replaceAll("\\r|\\n", "");
        currentContent.setContent(editorContent);

        currentContent = projectContentDAO.updateProjectContent(currentContent);
        isEdit = false;
    }
}
4

0 回答 0