Question

我有一个像这样的编辑。

<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 visibilty属性作为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>

无法显示p：编辑器，它在primefaces中被javascript隐藏

2 个答案: