Should JavaScript call Wicket.Ajax.ajax trigger page reload (Wicket v6.13)?

Question

I would like to send ajax event from browser to wicket panel, so that it can refresh content of a label. I also need to send this request from javascript function.

Well it works - ajax request is being send, and the repose contains updated label as expected:

Ajax request:

http://localhost:8080/cyclop/cyclop/ced?1-3.IBehaviorListener.0-historyPanel&_=1392727280955

and response:

<?xml version="1.0" encoding="UTF-8"?><ajax-response><component id="idf" ><![CDATA[<div id="idf">6</div>]]></component></ajax-response>

The problem is, that I can see also another request in network monitor: it gets content of a whole page. It does not reload the page itself, just gets its content.

What is the reason for that? Is this normal?

EDIT: I was able to investigate it a bit deeper: wicket triggers two ajax requests:

1. localhost:8080/cyclop/cyclop/ced?2 - this one returns whole page
2. localhost:15111/cyclop/cyclop/ced?2-11.IBehaviorListener.0-historyPanel - this one ajax response

Here is the code:

Part of HTML page containing link that triggers ajax request:

<li><div class="cq-tabHistory">MY LINK</div></li>

and java script that registers wicket callback:

$(".cq-tabHistory").on("click", function() {    Wicket.Ajax.ajax({"u" : link, "c" : comp}); }

This is the wicket panel class registering ajax callback on server side

Label counter ;
public HistoryPanel(String id) {
super(id);

counter= new Label("counter", new IModel<String>() {
    @Override
    public String getObject() {
    count++;
    return count + "";
    }

    @Override
    public void setObject(String o) {
    }

    @Override
    public void detach() {
    }
});
add(counter);
counter.setOutputMarkupId(true);
}

public void init() {
browserCallback = new AbstractDefaultAjaxBehavior() {
    protected void respond(final AjaxRequestTarget target) {
    target.add(counter);
    }
};
add(browserCallback);
browserCallbackUrl = browserCallback.getCallbackUrl().toString();
}

@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.render(OnDomReadyHeaderItem.forScript(browserCallback.getCallbackScript()));
}

Answer 1

I've found the problem.

My custom java script function calls wicket component on back-end over such request:

Wicket.Ajax.ajax({"u":"./ced?2-1.IBehaviorListener.0-historyPanel","c":"historyPanel17"});

In order to access this URL in java script, I call custom java script function that sets global java script variable - this happens in method renderHead(IHeaderResponse response) of my component. Nothing strange so far....

The problem was that I've obtained callback URL too early - in constructor - right after creation of AbstractDefaultAjaxBehavior. This resulted in 1-0.IBehaviorListener.0-historyPanel - this url contains incorrect version of my component (its set to 0). The call browserCallback.getCallbackUrl() has to be moved to renderHead(IHeaderResponse response) - in this case it contains correct component id and also correct version

Answer 2

I can't see why you get the second request. I don't get that in my ajax callbacks.

Perhaps you can try to spot a difference in the ajax calls between your usage and plain Wicket ajax links?

Answer 3

The solution to prevent (some) additional/unwanted behavior on the ajax component is the following:

1. Override getPreconditionScript and make it return "return false;" to prevent (some) unnecessary extra behavior. Without this, when using the custom script, the behavior event is triggered twice on the java side.

   @Override
   public CharSequence getPreconditionScript() {
     return "return false;";
   }
   
   @Override
   public void renderHead(IHeaderResponse response) {
     super.renderHead(response);
     response.render(OnDomReadyHeaderItem.forScript(getCallbackScript()));
   }
   

I understand from some wicket documents that having any behavior included with a component will prevent its normal behavior. This does not seem to be completely true when you need a custom behavior provided, thus you need to manually prevent "everything" else.

// Update Noticed that if you include "; return false;" at the end of the custom script creted, it will break some other ajax functionality on the same page. It prevents from sending the extra request that you can monitor from the network traffic e.g. with firebug, but has an unfortunate side effect I discovered later.