javascript - 使用 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>

这是我的 View 对话框:

<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>

但是它不起作用。

您对如何使用 primefaces 组件中的 jQuery 附加此 html 代码有什么建议吗？

Answer 1

为了渲染 html 代码，任何人只需在 primefaces outputLabel 中添加 escape="false"即可将值附加为 html 代码。

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

谢谢!