Wicket - IE8 - Javascript event listeners arent executed, when tags are dynamically added over ajax

Question

I have spent several hours, maybe days stucked on a very weird problem :(

I am creating an application that is based on the Wicket solution. It works perfectly in IE9,IE10, Chrome and FF. Strange is, that i have tested it in IE8 too and it works in 99% of cases (IE instances on different computers + totally identical version of IE8) too. But now the PROBLEM.

PROBLEM: I am creating dynamic content over AjaxLink button. After clicking the button the WebMarkupContainer model is changed and WebMarkupContainer is refreshed (based on Ajax, so the page isnt reloaded complete, but only the container is).

Every item in the container has added AjaxFormComponentUpdatingBehavior. In onComponentTag method, i add tag.put("onchange","some jsFunctionCalling....");. The problem is, that after clicking on the item, no event is invoked. I have tried add the onchange listener over .add(new AttributeModifier.....), but the result is still same. As i have said, i tried the same code in the same version of IE on another PC and it works perfectly. Interesting is, that after refreh of the page everything work perfect, until new item to WebMarkupContainer is added. After that no item listeners work until the page is refreshed again.

One of the latest idea, that i got is, that problem isn't in the code, but in the settings of IE (maybe security). Have anybody any idea? What setting could be set different and cause these problems? Is there any settings on Wicket site, that can solved this? Is there some setting that can blocked registration of these listeners to DOM, if they are added dynamically over ajax?

Answer 1

I didn't tried it but IMHO there are three options you can try:

1. Instead of adding "onchange" by yourself, add OnChangeAjaxBehavior and make all work in wicket. Downside is server roundtrip on every event.
2. Add data-attributes (AttributeModifier.append("data-param1", "foobar")) to push your parameters into html and call ajaxRequestTarget.appendJavaScript("attachOnChangeHandler()"); after the click event on the AjaxLink. attachOnChangeHandler() should be your js function to add onchange handler to every item which needs it. And over data-attributes you can access your parameters.
3. Since Wicket 6: To avoid mixing to much js with Wicket, you could subscribe to one of the global AJAX events. The solution in your case would be almost the same as in 2. Just add a listener in js for "/ajax/call/success" (see if the call relates to your component by checking the id) and add the onchange handler there. This is IMHO the best solution without mixing custom js with Wicket.

The solution provided by @peterchon (attaching event handlers higher in the DOM than the elements which are going to be replaced by wicket) would work in every other case, but you have "onchange" which applies only to input, textarea and select elements.

BTW the page is "working" after refresh, since the whole page is rendered and browser can properly attach the handlers.

Answer 2

You can try this method:

/* this will catpure the target that triggered the event */
function getEventTarget( e ) {
  e = e || window.event;
  return e.target || e.srcElement;
}

function doSomething( e ) {
  var that = getEventTarget( e );
  if( that.tagName.toLowerCase() === 'a' ) { // specify the target, in this cas <a>
    // Do something
  }
}

parentElement.onclick = doSomething;

This script basically will capture any event, then will pass the variable of target to the function that will perform something.

Hopefully this will work for you.

Answer 3

You try to achieve something using a non-wicket JavaScript/Ajax way. This is fine, but also makes it very messy.

Please check this fine article about passing parameters from JavaScript to wicket and vice versa. I think it will suit your needs.

http://wickedsource.org/2013/01/07/rolling-your-own-ajax-behavior-with-wicket/