通過單擊另一個Wicket面板中的項目來更新一個Wicket面板

Question

我在SO中查看了許多更新面板的答案，但無法解決我的問題。 非常簡單，我不知道為什么不更新面板。

我在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和其他資源的解決方案和解釋，但是我感覺這里缺少一些基本知識。

您可以精確地復制代碼並運行它以檢查真正的問題是什么。 我沒有收到任何錯誤，但Panels簡單沒有得到更新。

感謝您抽出寶貴的時間閱讀這個小問題。

Answer 1

RadioChoicePage的textPanel不應為靜態，否則該組件將在多個會話之間共享：

public TextPanel txp;

為什么TestPanel創建自己的TextPanel實例？

TextPanel ttxp = new TextPanel("textPanel");

刪除！ 而是向TestPanel添加一個hook方法：

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面板

問題描述

1 個解決方案

解決方案1
2 已采納 2014-07-26 16:15:42

通過單擊另一個Wicket面板中的項目來更新一個Wicket面板

問題描述

1 個解決方案

解決方案1 2 已采納 2014-07-26 16:15:42

解決方案1
2 已采納 2014-07-26 16:15:42