我一直在使用JSF处理一个简单的Java EE项目.
<h:form id="phoneForm">
<h:dataTable id="phoneTable">
</h:dataTable>
</h:form>
我试图通过设置CSS #phoneTable { ... },但它不起作用.在客户端检查HTML源代码时,JSF生成的HTML表格似乎以形式获取客户端ID id="phoneForm:phoneTable".我无法应用CSS via #phoneForm:phoneTable { ... },因为冒号表示伪选择器的开始并导致错误.
我怎么能在CSS选择器中使用它呢？
问题:有时你会想要从javascript访问一个组件
getElementById,但是id是在JSF中动态生成的,所以你需要一个获取对象id的方法.我在下面回答你如何做到这一点.
原始问题: 我想使用下面的代码.如何在我的Javascript中引用inputText JSF组件？
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>
更新:JSF2.0中的这篇帖子客户端标识符讨论了使用如下技术:
<script type="javascript" >
function myFunc() {
alert("Your email address is: " + …我有一个txtBox,它的ID是:beginDateTxt
但是jsf做到了 j_idt8:beginDateTxt
在jquery中我试着像那样达到它
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("#j_idt8:beginDateTxt").mobiscroll().date({
theme: 'android-ics light', mode:'scroller', display: 'bottom'
});
});
});
</script>
但我得到以下错误:
未捕获错误:语法错误,无法识别的表达式:unsupported pseudo:beginDateTxt
为什么？
我在ID属性中看到过这样的HTML代码:
id="t1:c3"
谁可以给我解释一下这个？冒号(:)的目的是什么？
谢谢.
我对这个事实背后的想法有一个疑问,即只有UIForm属性prependId.为什么NamingContainer界面中没有指定属性？你现在可能会说这是因为后向兼容性但我宁愿打破兼容性并让实现该接口的用户也实现prependId的方法.
从我对UIForm组件中的prependId的观点来看,主要的问题是它会破坏findComponent()
我希望如果我使用prependId,那么NamingContainer行为会改变,不仅与渲染有关,而且在想要在组件树中搜索组件时也是如此.
这是一个简单的例子:
<h:form id="test" prependId="false">
<h:panelGroup id="group"/>
</h:form>
现在,当我想获得panelGroup组件时,我希望将字符串传递"group"给方法findComponent(),但它不会找到任何东西,我必须使用"test:group".
具体问题是,当使用ajax时prependId="false".ajax标记在属性更新和处理中期望值关注命名容器.有点奇怪的是,当我使用它时prependId="false",我必须指定完整的id或路径,但没关系.
<h:form id="test" prependId="false">
<h:panelGroup id="group"/>
</h:form>
<h:form id="test1" prependId="false">
<h:commandButton value="go">
<f:ajax render="test:group"/>
</h:commandButton>
</h:form>
那么这段代码将呈现没有问题,但它不会更新panelGroup,因为它无法找到它.在PartialViewContext将只包含ID "group"为renderIds的元素.我不知道这是否是预期的,可能是但我不知道代码.现在我们到了方法findComponent()无法找到组件的位置,因为作为参数传递的表达式是"group"方法期望"test:group"找到组件的位置.
一种解决方案是编写自己的解决方案,findComponent()这是我选择处理此问题的方式.在这个方法中,我处理一个组件,它是一个NamingContainer并且具有属性prependId像正常一样设置为false UIComponent.我将不得不为每个UIComponent提供prependId属性的事情做到这一点,这很糟糕.反射将有助于绕过类型的静态定义,但它仍然不是一个非常干净的解决方案.
另一种方法是在NamingContainer接口中引入prependId属性,并改变行为,findComponent()如上所述.
最后提出的解决方案是改变ajax标记的行为以传递整个id,但这只能解决ajax问题而不是findComponent()实现背后的程序问题.
你怎么看待这个以及它为什么会这样实现呢？我不能成为第一个遇到这个问题的人,但是我找不到相关的主题？!
我如何在jquery中引用JSF组件,因为我不知道我想要引用的组件的id前面的id？
有活跃的JSF(或Primefaces)用户可以解释为什么默认情况下会发生这样的原因:为什么没有人对此做任何事情:
<p:commandLink id="baz" update=":foo:boop" value="Example" />
哪个生成的标记在没有hacks的情况下无法在JavaScript或CSS中使用,通常应被视为无效:
<a href="javascript:void(0);" id=":foo:bar:baz">Example</a>
id=":bar:baz:foo"此处的属性包含冒号,这些冒号不是此属性的有效字符,至少从CSS角度来看.
虽然该属性可能根据规范有效,但它无法与真实的JavaScript和CSS实现一起使用.
简而言之,idJSF中的默认属性生成无法用于前端开发.
例如,以下代码段:
<h:form id="levelone">
<h:inputText id="leveltwo" value="Test" />
</h:form>
生成以下标记:
<form id="levelone" name="levelone" method="post" action="/test/testPage.html"
enctype="application/x-www-form-urlencoded">
<input id="levelone:leveltwo" type="text" name="levelone:leveltwo"
value="Test" />
</form>
是否可以更改自动生成的ID以使用与冒号不同的分隔符？
例如,我想改变
levelone:leveltwo
至
levelone-leveltwo
我们在webapp中使用Mojo JavaScript应用程序框架,它似乎不喜欢id中的冒号.
我喜欢jsf 2.0复合组件设置.我喜欢的另一件事是在表格上prependId ="false".是否有一个可以在cc:interface或cc:implementation中定义的等价物,它将阻止jsf创建一个j_id以预先添加到复合组件中定义的id？
在JSF中,将JavaScript集成到复合功能中的"正确"和"干净"方式是什么？我是Unobtrusive JavaScript的粉丝,并将HTML与JS分离.什么是尽可能小怪癖的好方法？到目前为止,这是我最喜欢的:
<composite:interface>
// ...
</composite:interface>
<composite:implementation>
// ...
<script> initSomething('#{cc.clientId}'); </script>
</composite:implementation>
我不喜欢的是,language A用来生成language B.事件处理程序和东西基本相同.我最喜欢的是通过附加那些处理程序<insert favorite DOM JavaScript library here>.这可能吗？你是如何进行这种整合的？