Question

我在SO中查看了许多更新Panel答案，但无法解决我的问题。这是非常直接的，我不知道为什么我不更新面板。

我在RadioChoicePage.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);

    }

}

标记文件如下所示：RadioChoicePage.html

<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文件，使用d3.js添加svg并单击我要更新文本面板的圆圈。

我可以从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和其他资源的解决方案和解释，但我觉得我在这里缺少一些基本的东西。

您可以准确地复制代码并运行它来检查真正的问题。我没有收到任何错误，但面板简单，不会更新。

感谢您花时间阅读这个大问题。

Answer 1

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);

单击另一个Wicket面板中的项目更新一个Wicket Panel

1 个答案: