无法在 primefaces 中显示 javascript 隐藏的 p:editor

Question

我有一个p:editor这样的。

<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";
}

默认情况下编辑器将被隐藏。当我单击该图标时，需要显示编辑器。但是没有显示出来。

任何帮助!!

Answer 1

您可以使用 rendered 标签代替 css 样式：

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

Answer 2

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

不使用内联样式，而是在网站加载后使用 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 可见性属性作为 inline-stlye。不要忘记让编辑器在您的脚本中再次可见。

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

无法在 primefaces 中显示 javascript 隐藏的 p:editor

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

javascript

primefaces