JSF 2自定义复合组件,带有f:ajax
发布时间:2020-12-16 02:45:49 所属栏目:百科 来源:网络整理
导读:我正在尝试使用此jQuery插件 http://www.eyecon.ro/colorpicker/创建自定义复合组件colorPicker. 我希望能够附加jsf标签f:ajax,并且当选择颜色时,执行对服务器的ajax调用.我一直在测试这个功能,一切看起来都是正确的,但显然我错过了一些东西,因为听众从未被
我正在尝试使用此jQuery插件
http://www.eyecon.ro/colorpicker/创建自定义复合组件colorPicker.
我希望能够附加jsf标签f:ajax,并且当选择颜色时,执行对服务器的ajax调用.我一直在测试这个功能,一切看起来都是正确的,但显然我错过了一些东西,因为听众从未被调用过. 这是我的组件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:composite="http://java.sun.com/jsf/composite"> <composite:interface> <composite:attribute name="label" /> <composite:clientBehavior name="customEvent" event="change" targets="#{cc.clientId}"/> </composite:interface> <composite:implementation> <h:outputStylesheet library="css" name="colorpicker/colorpicker.css" /> <h:outputStylesheet library="css" name="colorpicker/layout.css" /> <h:outputScript library="js" name="colorpicker/jquery.js" target="head"/> <h:outputScript library="js" name="colorpicker/colorpicker.js" target="head"/> <h:outputScript library="js" name="colorpicker/eye.js" target="head"/> <h:outputScript library="js" name="colorpicker/utils.js" target="head"/> <h:outputScript library="js" name="colorpicker/layout.js" target="head"/> <h:outputScript library="js" name="colorpicker/hex.js" target="head"/> <div id="#{cc.clientId}" class="colorSelector"> <div style="background-color: #0000FF;"></div> </div> <script> //jQuery(document).ready(function() { jQuery('##{cc.clientId}').ColorPicker({ color: '#0000ff',onShow: function (colpkr) { jQuery(colpkr).fadeIn(2000); alert('onchange1'); launchEvent(document.getElementById('#{cc.clientId}')); alert('onchange2'); //return false; },onHide: function (colpkr) { jQuery(colpkr).fadeOut(2000); return false; },onChange: function (hsb,hex,rgb) { } }); //}); /* <![CDATA[ */ function launchEvent(fieldName) { alert('launchEvent1'); if ("fireEvent" in fieldName) { alert('launchEvent2'); fieldName.fireEvent("onchange"); alert('launchEvent3'); } else { alert('launchEvent4'); var evt = document.createEvent("HTMLEvents"); alert('launchEvent5'); evt.initEvent("change",false,true); alert('launchEvent6'); fieldName.dispatchEvent(evt); alert('launchEvent7'); } /* ]]> */ } </script> </composite:implementation> </html> 这是页面实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:r="http://richfaces.org/rich" xmlns:a="http://richfaces.org/a4j" xmlns:s="http://jboss.org/seam/faces" xmlns:cp="http://java.sun.com/jsf/composite/component"> <h:head> <title>Test</title> </h:head> <h:body> <f:view> <h:form prependId="false"> <cp:colorpicker id="colorSelector"> <f:ajax event="customEvent" listener="#{themeBean.changeColor1}" onevent="alert('event raised');"/> </cp:colorpicker> <h:inputText value="#{themeBean.color1}"></h:inputText> </h:form> </f:view> </h:body> </html> 解决方法
< f:ajax>只能附加到
ClientBehaviorHolder ,例如< h:inputText>.简单的HTML< div>不是这样一个组成部分.你基本上需要一个HTML< input>元素,而不是< div>元件.更重要的是,您如何在bean中设置提交的值?
<cc:interface> ... <cc:clientBehavior name="customEvent" targets="input" event="valueChange" /> </cc:interface> <cc:implementation> ... <h:inputText id="input" value="#{cc.attrs.value}" /> <h:outputScript> jQuery("[id='#{cc.clientId}:input']").ColorPicker({ // ... }); </h:outputScript> </cc:implementation> (请注意我也修复了jQuery选择器;这样就可以正确地考虑JSF客户端ID分隔符了,而不是使CSS选择器变形) 与具体问题无关,您使用< f:ajax onevent>是错的.它应该指向一个函数引用,它不应该包含一些函数调用.正确的用法是 <f:ajax ... onevent="functionName" /> ... <h:outputScript> function functionName(data) { alert("Event " + data.status + " raised"); } </h:outputScript> 也可以看看: > ajax call in jsf 2.0 (myfaces),the onevent Javascript function in the ajax tag gets called before the rendering is complete (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |