个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我想创建一个复合 Material 来增强 <p:calendar> 。这就是我所拥有的:
calendar.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="bean" />
</composite:interface>
<composite:implementation>
<h:form id="calendarForm" class="calendarForm" >
<h:outputScript library="js" name="calendar.js" />
<p:inputText type="hidden" id="dateInfoMap" class="dateInfoMap" value="#{cc.attrs.bean.dateInfoMap}"/>
<p:calendar
id="calendar"
value="#{cc.attrs.bean.selectedDate}"
mode="inline" >
<p:ajax event="viewChange" listener="#{cc.attrs.bean.makeDateInfoMapForMonth}" update="dateInfoMap" oncomplete="alterCalendar(this)" />
</p:calendar>
</h:form>
</composite:implementation>
</html>
函数cc.attrs.bean.makeDateInfoMapForMonth创建一个对象，其中包含有关当月每一天的信息(可从 viewChange 事件获取)并将其存储在 cc.attrs.bean.dateInfoMap 中.
calendar.js
function alterCalendar(ajaxRequest) {
let calendar = document.getElementById(ajaxRequest.source);
let dateInfoMap = getDateInfoMap(calendar);
// do stuff with this calendar and dateInfoMap
}
function getDateInfoMap(calendar) {
return JSON.parse($(calendar).closest(".calendarForm").find(".dateInfoMap")[0].value);
}
所有这些都按预期工作:当我更改月份时，新月份会显示 alterCalendar() 中所做的所有更改。使用 dateInfoMap 中的正确信息.
但是，这是在我第一次更改月份之后才完成的。 <p:calendar>第一次渲染后似乎没有触发事件。我怎样才能有alterCalendar()此时适用吗？
两种可能的解决方案似乎都不适合这样的组件:
如果存在触发日历渲染的 ajax，我可以告诉组件的用户调用 javascript 函数作为 oncomplete 回调。这 a) 对用户来说不太好，b) 并不总是适用，c) 如果不手动输入组件 ID，则很难动态获取日历实例。
我可以使用类似 $(document).ready() 的表达式，但是如果日历的渲染确实是由另一个 ajax 触发的，这可能不起作用，并且 1 c) 也适用于此。
是否有另一种更优雅的方式可以动态获取日历的实例或 ID？
编辑:我尝试使用 beforeShow <p:calendar> 的属性，但它没有做任何事情。我正在使用 Primefaces 6.2
最佳答案
在kukeltje的帮助下，我可以解决这个问题并消除其他问题。
1) key 是#{cc.clientId} 。这在复合命名空间中可用，并为我提供了 Javascript 所需的组件 ID。
2) 表单不应该是组合的一部分。 See here for more info.
3) 我可以使用#{...} xhmtl 页面上 Javascript 中的任何位置。
4) 我不需要隐藏的输入字段，我可以使用 RequestContext将值传递给 Javascript 函数。如果我使用#{cc.attrs.bean.dateInfoMap} ，该值并不总是最新的，因为它是用 <p:ajax> 呈现的。 See here for more info.
这引导我找到这个解决方案:
calendar.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="bean" />
</composite:interface>
<composite:implementation>
<h:outputScript library="js" name="calendar.js" />
<p:calendar
id="calendar"
value="#{cc.attrs.bean.selectedDate}"
mode="inline" >
<p:ajax
event="viewChange"
listener="#{cc.attrs.bean.makeDateInfoMapForMonth}"
oncomplete="alterCalendar('#{cc.clientId}', args.dateInfoMap)" />
</p:calendar>
<script>
alterCalendar('#{cc.clientId}', '#{cc.attrs.bean.dateInfoMap}');
</script>
</composite:implementation>
</html>
在 bean 中:
public void makeDateInfoMapForMonth(DateViewChangeEvent event) {
dateInfoMap = //...
RequestContext.getCurrentInstance().addCallbackParam("dateInfoMap", dateInfoMap);
}
calendar.js
function alterCalendar(componentClientId, dateInfoMap) {
let calendar = document.getElementById(componentClientId + ":calendar");
dateInfoMap = JSON.parse(dateInfoMap);
$(calendar).ready(function () {
// do stuff
});
});
}
关于javascript - p :calendar trigger javascript method after first view is rendered，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57509222/
26
4
0
这段代码无法编译: for(vector::iterator it = shapes.end(); it >= shapes.begin(); --it){ *it.update(1,1);
我一直在研究 Common Lisp 对象协议(protocol) (CLOS)，我遇到了一个疑问。 有人知道 CLOS 中的“标准方法组合”和“简单方法组合”是什么意思吗？ 在“简单方法组合”中，“
在Rust上对值调用方法之间是否有任何区别，如下所示: struct A { e: u32 } impl A { fn show(&self) { println!("{}",
我在一些 StackOverflow 答案中看到了术语抽象方法、具体方法和默认方法的“不同”定义。 Java 语言规范给出的真正定义是什么？请在您的答案中包含相关的支持 JLS 引用资料。 最佳答案
如果method = "post"，如何使rest[method]扩展为rest.post(uri, body).then(. .？ function proxyUrl() { return
这个问题在这里已经有了答案: Method cannot be translated into a store expression (1 个回答) 关闭 9 年前。 我有一个问题。我在 Visua
它们各自的优缺点是什么？ 接口(interface)方法 虚方法 抽象方法 什么时候应该选择什么？做出这一决定时应牢记哪些要点？ 最佳答案 虚拟和抽象几乎是一样的。虚方法在基类中有一个可以选择被覆盖的
我在 Meteor.js 上的那段代码出错: 客户端 : Meteor.call("logUser", function(myvar){ console.log("le c
运行代码时出现以下错误 Line: 18 illegal start of expression Line: 18 ';' expected 这意味着第 18 行中有代码写得不正确(public bo
如果可能的话，如何从另一个方法的返回中调用一个方法？ 例如…… class Example { public static void main(String[] args) {
当遍历指针的 vector (或其他容器)时，使用以下优势和/或优势之间是否有任何区别: for (it = v.begin(); it != v.end(); ++it) { (*it)->
在从带有参数的 void 方法打印值或将值返回给方法调用者并在方法调用者中打印它之间，哪个被认为是更好的做法(如果有的话)？比如第一个代码摘录是前者，第二个代码摘录是后者: public static
考虑这个例子https://codesandbox.io/s/1yvp4zz5x7?module=%2Fsrc%2FApp.vue Greet1 Greet2
晚上好， 我刚开始使用 Microsoft.Contracts(最新版本)并将其插入示例界面之上，现在它看起来像这样: namespace iRMA2.Core.Interfaces { us
我是 Laravel 4 的新手，并试图弄清楚为什么我收到一个错误，说 Method [show] 不存在。 我没有名为“show”的方法，只能想象这是一个内部的 Laravel 方法，但我不知道如何
有人可以向我解释一下当我们进行下一次返回时“或”(||) 是什么意思吗？ 我的意思是这行: 返回封面(值，金额 - 值 [索引]，索引 + 1)||覆盖(值、金额、索引 + 1)； public st
这个问题已经有答案了: Why doesn't the post increment operator work on a method that returns an int? (11 个回答) 已
我很难理解 jQuery 的 $.method() 和 $(selector).method 之间的区别。 $.method() 实际适用于 DOM 中的哪些元素？如果有人能帮助解释这两种说法之间的区
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 5 年前。 Improve t
////////////////////////////////////////////////////////////////////////////// // 3 construct
我是一名优秀的程序员,十分优秀！