我在前端开发方面经验不足,尤其要提到Web ui不在我的星球上。
我需要在按钮的onClick事件上显示和隐藏元素的问题。
技术堆栈是带有PrimeFaces的JSF,对于我们使用JavaScript的脚本。
基本上-如何获得需要显示/隐藏的元素的引用?
而且您能给我一个线索,为什么评论中的行(下面)有效?
function test(id, id2){
var element =$(document).get("#testEl");
$(element).show(); //this doesn't work??? although I get no errors executing it..
// $("#tab-view\\:template-form\\:testEl").show(); // <-- however this works? Why?
$(btn).css("display", "none");
}
的HTML:
<p:commandButton widgetVar="edit" id="edit" value="Edit" onclick="test(this, #testEl)" type="button"/>
<p:panel widgetVar="opa" id="testEl" closable="false" visible="false" >
<h:panelGrid ..>....
</h:panelGrid>
</p:panel>
谢谢!
最佳答案
首先,检查此ID在生成的HTML中的外观,并将其用作基础。如果您试图从像formId:someId
这样的JSF命名容器传递ID,则必须转义冒号,否则jQuery会将其视为伪选择器。根据经验,应该始终给容器ID命名,这样,当您看到JSF自动生成的ID并且不知道它们来自何处时,就可以避免混淆。在这种情况下,最简单的方法是在JS本身中对其进行转义。我过去在将转义ID传递给jQuery时遇到问题。因此,请设置您的onclick:
onclick="test(this, 'formId:testEl')";
然后在JS中:
function test(id, id2) {
id2 = id2.replace(/:/g, "\\:");
$("#" + id2).show();
}