通过点击另一个Wicket Panel中的项目更新一个Wicket Panel
Update one Wicket Panel from clicking an item in another Wicket Panel
我在SO中查看了许多更新面板答案,但无法解决我的问题。这是非常直接的,我不知道为什么我没有得到面板更新。
我在radiochoicpage .java:
中创建了两个面板public class RadioChoicePage extends ApplicationPageBase{
private static final long serialVersionUID = 1L;
public TestPanel tp;
public static TextPanel txp;
public RadioChoicePage(){
tp = new TestPanel("testPanel");
txp = new TextPanel("textPanel");
txp.setMsg("Before");
add(tp);
add(txp);
}
}
标记文件如下所示:
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
<body>
<wicket:extend>
<div wicket:id="testPanel" style="position:absolute; left:10px ; width:50%; z-index:10;">
</div>
<div wicket:id="textPanel" style="position:absolute; left:450px; width:50%; z-index:5">
</div>
</wicket:extend>
</body>
</html>
这两个面板是TestPanel.java和TextPanel.java。我有一个TestPanel.js文件添加svg使用d3.js和点击一个圆圈,我想更新文本面板。
我能够从javascript调用wicket方法并打印圆圈在控制台上被点击。但是我无法更新文本面板。
下面是TestPanel.java, TestPanel.html, TestPanel.js, TextPanel.java和TextPanel.html的代码。
TestPanel.java
public class TestPanel extends Panel{
public static final JavaScriptResourceReference TEST_JS = new JavaScriptResourceReference(
TestPanel.class, "TestPanel.js");
TextPanel ttxp = new TextPanel("textPanel");
public TestPanel(String id) {
super(id);
final AbstractDefaultAjaxBehavior behave = new AbstractDefaultAjaxBehavior() {
private static final long serialVersionUID = 1L;
public void renderHead(Component component,IHeaderResponse aResponse){
super.renderHead(component, aResponse);
String componentMarkupId = component.getMarkupId();
String callbackUrl = getCallbackUrl().toString();
aResponse.render(JavaScriptReferenceHeaderItem.forReference(TEST_JS));
aResponse.render(JavaScriptReferenceHeaderItem.forReference(D3Reference.D3_JS));
aResponse.render(OnDomReadyHeaderItem.forScript("draw(" + componentMarkupId + ",'"" + callbackUrl + "'")"));
}
protected void respond(final AjaxRequestTarget target) {
//target.add(new Label("msg", "Yeah I was just called from Javascript!"));
System.out.println("I was succesfully clicked");
ttxp.setMsg("After");
target.add(ttxp);
}
};
add(behave);
}
}
TestPanel.html
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
<head>
<wicket:head>
</wicket:head>
</head>
<body>
<wicket:panel>
<div id="chart" style="position:absolute; width:400px; height:400px; border:2px solid blue;"></div>
</wicket:panel>
</body>
</html>
TestPanel.js
function draw(componentMarkupId,callbackUrl){
console.log(" Draw is called!");
//Width and height
var w = 300;
var h = 100;
//Data
var dataset = [ 5, 10, 15, 20, 25 ];
//Create SVG element
var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
})
.attr("fill", "red")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
});
circles.on("click",function(d){
this.style.stroke = "steelblue";
$(function() {
var wcall = Wicket.Ajax.get({ u:callbackUrl });
//var wcall = wicketAjaxGet('$callbackUrl$');
alert(wcall);
});
});
}
TextPanel.java
public class TextPanel extends Panel{
String msg;
boolean initialize = true;
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public TextPanel(String id) {
super(id);
// TODO Auto-generated constructor stub
System.out.println(getMsg());
if(initialize){
setMsg("Before");
initialize = false;
}
Label mmsg = new Label("msg", getMsg());
add(mmsg);
setOutputMarkupId(true);
}
}
TextPanel.html
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
<head>
<wicket:head>
</wicket:head>
</head>
<body>
<wicket:panel>
<div wicket:id="msg" style="border: 2px solid blue;"></div>
</wicket:panel>
</body>
</html>
请给我一个解释的解决方案。因为我在so和其他资源上读了很多解决方案和解释,但我觉得我在这里错过了一些基本的东西。
你可以完全复制代码并运行它来检查真正的问题是什么。我没有得到任何错误,但面板简单不更新。
感谢您花时间阅读这个有一个小问题的大问题
RadioChoicePage的textPanel不应该是静态的,否则该组件将在多个会话之间共享:
public TextPanel txp;
为什么TestPanel创建自己的TextPanel实例?
TextPanel ttxp = new TextPanel("textPanel");
删除!为TestPanel添加一个钩子方法:
protected void onClicked(AjaxRequestTarget target) {
}
final AbstractDefaultAjaxBehavior behave = new AbstractDefaultAjaxBehavior() {
protected void respond(final AjaxRequestTarget target) {
onClicked(target);
}
}
让RadioChoicePage决定单击任何内容时要做什么:
tp = new TestPanel("testPanel") {
protected void onClicked(AjaxRequestTarget target) {
target.add(txp);
}
};
txp = new TextPanel("textPanel");
txp.setOutputMarkupId(true);
相关文章:
- 在 Java 中的 JavaScript 函数中插入 Wicket 值
- firefox插件和dev/panel之间的通信
- 如何在JUnit测试中测试wicket上的附加javascript ajaxBehavior
- 从不是wicket组件的元素调用wicket
- 如何将值传递给wicket中的javascript函数
- Wicket在另一个请求之后触发请求
- 无法将java脚本函数与Panel'绑定;s OnLoad事件
- ExtJS panel append html
- ExtJS 4,自定义Ext.grid.Panel的布尔列值
- jquery javascript onclick SlideDown panel
- 如何将 “onchange” SimpleAttributeModifier 添加到 Apache Wicket 中的
- 使用 Ext.grid.Panel.reconfigure() 会破坏网格 RowEditing 插件
- 在Wicket ModalWindow中使用Panel时,HTML中的Javascript不起作用
- jQuery Mobile Panel不会在单击时关闭
- Wicket:获取标签属性
- JavaScript/Wicket:如何显示阻止用户交互的覆盖
- 如何将数据从wicket页面加载到highchart
- Ext.getCmp('panel')给出this.el为null或不是对象
- Ajax向Wicket服务器发送两个请求时出错
- 通过点击另一个Wicket Panel中的项目更新一个Wicket Panel