ajax - 带有 f :ajax 的 JSF 2 自定义复合组件-6ren

ajax - 带有 f :ajax 的 JSF 2 自定义复合组件

转载作者：行者123 更新时间：2023-12-03 14:35:02

26

4

我正在尝试使用这个 jQuery 插件 http://www.eyecon.ro/colorpicker/ 创建一个自定义复合组件 colorPicker .

我希望能够附加一个 jsf 标签 f:ajax , and when a color is selected, perform an ajax call to the server.我一直在测试这个功能，看起来一切都是正确的，但显然我错过了一些东西，因为从未调用过监听器。

这是我的组件代码:

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

关于ajax - 带有 f :ajax 的 JSF 2 自定义复合组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13751641/

26

4

0

文章推荐： wcf - System.ServiceModel.CommunicationException - 在大消息大小上

文章推荐： log4net - 一个log4net停止记录时如何解决它

文章推荐： .net - 从 MSBuild 项目中获取输出文件

文章推荐： sql-server - 用于将执行 xml 计划可视化为 HTML 的工具

typescript - let f :F = f` and `let f = f` 有什么区别
我有以下代码: interface F { (): string; a(): number; } function f() { return '3'; } f['a'] = f
c++ - 交替排序数组的最简单方法是什么(例如 :T, T,F,F,F,T,F,T,F,F,F 到 T,F,T,F,T,F,T,F,T,T ,T)?
比如我有一个 vector vector > v={{true,1},{true,2},{false,3},{false,4},{false,5},{true,6},{false,7},{true,8
Haskell - 如何写 (.) f f = (\x -> f (f x))
我需要编写一个要在 GHCi 上运行的模块，并将函数组合为相同的函数。这个(经典的fog(x) = f(g(x)))运行: (.) f g = (\x -> f (g x)). 当我尝试这样写时出现问
c - 如何使其在动态规划中适用于 f[i] = max(f[i], f[i - 1] + f[i]) ？
动态规划这里有一个问题大写字母AZ对应于整数[-13,12]，因此一个字符串对应于一整列。我们将对应的整列的总和称为字符串的特征值。例如:字符串ACM对应的总体列为{-13,-11,-1}，则ACM
f# - F-Sharp (F#) 无类型无穷大
我想知道为什么 F-Sharp 不支持无穷大。这适用于 Ruby(但不适用于 f#): let numbers n = [1 .. 1/0] |> Seq.take(n) -> System.Div
f# - 如何在已编译的 F# 程序中执行在字符串中找到的 F# 代码？
如何从已编译的 F# 程序中的字符串执行 F# 代码？最佳答案这是一个小脚本，它使用 FSharp CodeDom 将字符串编译为程序集，并将其动态加载到脚本 session 中。它使用类型扩展
f# - 如何在 F# 列表和 F# 元组之间进行转换？
有什么方法可以在 F# List 和 F# Tuple 之间转换？例如: [1;2;3] -> (1,2,3) (1,2,3,4) -> [1;2;3;4] 我需要两个函数来做到这一点: le
f# - 如何加载外部 F# 脚本文件并在 F# 交互中使用它？
我想将一个或多个 .fsx 文件加载到 F# 交互中，并将 .fsx 文件中定义的所有函数都包含在作用域中，以便我可以直接使用控制台中的功能。 #load 指令执行指定的 .fsx 文件，但随后我无法
scala - 将 F-Algebra[F, A] 组合成 F-Algebra[F, Seq[A]]
我正在尝试像 this page 中那样编写 F 代数.不同之处在于，不是用元组组合，而是像这样: type FAlgebra[F[_], A] = F[A] => A def algebraZip[
f# - F# Quotations 能否用于创建适用于任意 F# 记录类型的函数？
给定一个 F# 记录: type R = { X : string ; Y : string } 和两个对象: let a = { X = null ; Y = "##" } let b = {
c++ - 有一个只有文件名(a、f/a、f/b、f/f/c 等)的 std::set 如何通过给定的 f/列出目录？
所以我们有一组文件名\url，如file、folder/file、folder/file2、folder/file3、folder/folder2/fileN等。我们得到一个字符串，如文件夹/。我们想
f# - F# 中的字符值
假设我有一个字符串“COLIN”。这个字符串的数值是: 3 + 15 + 12 + 9 + 14 = 53. 所以 A = 1, B = 2, C = 3, and so on. 为此，我什至不知道
f# - F# 可以同时使用构造函数参数和属性初始值设定项吗？
在 C# 中，我有以下代码来创建一个对象实例。 var myObject = new MyClass("paramvalue") { Property1 = "value1" Proper
f# - F#标准库中是否有生成常量函数的函数？
即，标准库中有这样的函数吗？ let ret x _ = x 为了保持代码可读性，我想尽量减少自制基本构建功能构建块的数量，并使用现有的东西。最佳答案不。你可能想看看 FSharpX。关于f#
f# - 对列表列表中的索引进行排序 - F#
目前，我有一个函数可以将列表中每个列表的第一个元素( float )返回到单独的列表。 let firstElements list = match list with | head:
f# - F#中不可变集合和映射的样式是什么
我刚刚解决了problem23在 Project Euler 中，我需要一个 set 来存储所有丰富的数字。 F# 有一个不可变集合，我可以使用 Set.empty.Add(i) 创建一个包含数字 i
f# - F#中以2为底的对数
F＃语言具有计算自然对数的函数log和计算以10为底的对数的log10。在F＃中以2为底的对数的最佳计算方法是什么？最佳答案您可以简单地使用以下事实：“ b的a对数” = ln（b）/ ln（a
f# - F# 中的并行存在函数
动机我有一个长时间运行的 bool 函数，它应该在数组中执行，如果数组中的元素满足条件，我想立即返回。我想并行搜索并在第一个完整线程返回正确答案时终止其他线程。问题在 F# 中实现并行存在函数的
f# - F# 中的上下文敏感数据处理
我最近完成了一个生成字符串列表的项目，我想知道执行此操作的最佳方法。字符串生成是上下文敏感的，以确定它是否可以接受(这是游戏中的一系列游戏，所以你必须知道最后一次游戏是什么) 我这样做的方法是使用一
f# - F# 引用有什么用吗？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he

首页

博学

6Ren·AI

商城

ajax - 带有 f :ajax 的 JSF 2 自定义复合组件