无法显示p:编辑器，这是隐藏的javascript在primefaces

Not able to show p:editor which is hidden from javascript in primefaces

本文关键字：隐藏 javascript primefaces 显示 编辑器      更新时间：2023-09-26

我有一个这样的p:编辑器

<p:editor value="#{manageBean.profile.summary}" style="display:none;" id="txtPS" />
<i class="fa fa-edit" style="cursor:pointer;" onclick="editThis('formID:txtPS')"></i>
我的javascript函数是: 
function editThis(lblshow)
{ 
 document.getElementById(lblshow).style.display="inline";
}

默认情况下编辑器将被隐藏。当我点击图标，编辑器需要显示。

任何帮助! !

我知道，这是一个老问题，但这是我的解决方案:

不使用内联样式，而是在网站加载后用js函数设置display:none。

<p:editor value="#{manageBean.profile.summary}" id="yourId" />
<i class="fa fa-edit" style="cursor:pointer;" onclick="display(yourId)"></i>
<!-- Insert the script at the end of your body -->
<script>
  window.onload = function display() {
    var yourId = document.getElementById("yourId");
    yourId.style.display = "none";
  }
  function display(ele) {
    if (ele.style.display == "none") {
        ele.style.display = "block";
    } else {
        ele.style.display = "none";
    }
  }
</script>

另外，如果你不想让你的用户看到任何应该隐藏的内容，只需使用css visibility属性作为inline- style。不要忘记让编辑器在脚本中再次可见。

<p:editor value="#{manageBean.profile.summary}" style="visibility: hidden;" id="yourId" />
<i class="fa fa-edit" style="cursor:pointer;" onclick="display(yourId)"></i>
<!-- Insert the script at the end of your body -->
<script>
  window.onload = function display() {
    var yourId = document.getElementById("yourId");
    yourId.style.display = "none";
  }
  function display(ele) {
    if (ele.style.display == "none") {
        ele.style.display = "block";
        ele.style.visibility = "visible";
    } else {
        ele.style.display = "none";
    }
  }
</script>

可以使用rendered标签代替css style:

<p:editor value="#{manageBean.profile.summary}" rendered="#{manageBean.renderEditor} id="txtPS"/>

然后使用<p:remoteCommand>从javascript调用bean 

<p:remoteCommand name="myRemote" actionListener="#{manageBean.modifyRenderEditor}" update="txtPS"/>

javascript: 

function editThis(lblshow)
{ 
 myRemote();
}
Java:

和

private renderEditor=false;
public void modifyRenderEditor(){
   this.renderEditor=!this.renderEditor;
}
相关文章：