使用jQuery插入HTML代碼到Primefaces對話框中

Question

我試圖在Primefaces對話框中動態插入html代碼。我想追加的html代碼取決於電子郵件正文。

比如我要添加viewEmail DIV中的HTML代碼如下：

<h2>Resetting your Password</h2> 
<p>Hi Juan Pablo Proverbio,</p> 
<p>You've indicated that you've forgotten your password and would like to reset it. We've started the process by sending you a special code that you can use to reset your password.</p> 
<p>In order to complete this process, copy the code below and go back to the page on the app or webpage when you started this process and enter the code in the place indicated on that page.</p> 
<p>Here are your details:</p> 
<p>email address: 
    <b>juanp@XXX</b> 
</p> 
<p>reset code: 
    <b>LxoAd5NM</b> 
</p> 
<p>Once you've entered this code you will be able to create a new password for your account.</p> 
<p>If you've remembered your password, just ignore this code and keep using your current password. Please note that this code is only valid for 24 hours, so if you haven't used it by then you will need to start the process again. </p> 
<p>If you didn't start this process by using a 'Forgot my Password' function on an app or website related to [Serv] then someone has done this using your email address. You can just ignore this email and your password won't be changed. If this keeps happening, please contact us.</p> 
<p>Have a great day :)</p> 
<p style="font-size:70%;">This email was sent to you because you are registered on [Serv] using the email address: juanp@XXX and someone requested a password reset for your account.</font></p> 

，這是我的看法對話框：

<h:form id="viewEmailForm"> 
     <p:dialog header="Email viewer" 
       widgetVar="viewEmail" showEffect="puff" hideEffect="drop" width="600"> 

      <h:panelGrid columns="2"> 
       <p:outputLabel value="To"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.to}"/> 

       <p:outputLabel value="From"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.from}"/> 

       <p:outputLabel value="Subject"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.subject}"/> 

       <p:outputLabel value="Email body"/> 
       <div class="viewEmail"> 

       </div> 

       <p:outputLabel value="Type"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.bodyType}"/> 

       <p:outputLabel value="Retries"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.retries}"/> 

       <p:outputLabel value="Last error"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.lastError}"/> 

       <p:outputLabel value="Status"/> 
       <p:outputLabel value="#{emailBean.selectedEmail.status}"/> 

       <p:outputLabel value="Created info"/> 
       <p:outputLabel value="#{emailBean.convertCreatedDate()}"/> 

      </h:panelGrid> 
      <f:facet name="footer"> 
       <p:commandButton value="Close" type="button" styleClass="ui-confirmdialog-no" 
            icon="ui-icon-close" onclick="PF('viewEmail').hide()" 
            style="float:right !important; margin-bottom: 10px !important"/> 
      </f:facet> 
     </p:dialog> 
</h:form> 

我現在差jQuery腳本是：

<script id="viewEmailScript" type="text/javascript"> 
    $(".viewEmail").append(#{emailBean.selectedEmail.body}); 
</script> 

但它不起作用。

你有什麼建議如何使用jQuery從primefaces組件追加這個html代碼？

Answer 1

爲了呈現html代碼，任何人只需要在primefaces outputLabel中添加escape =「false」以將該值附加爲html代碼即可。

<p:outputLabel value="#{emailBean.selectedEmail.body} " escape="false"/> 

謝謝！