I have a panel which is used for a rich text editor using the Wicket-Jquery-Kendo-ui. If I add the panel directly to a page on the page's load, everything works fine. However, if I add the panel dynamically, the panel fails to load the required javascript:
Wicket.Ajax.Call.processEvaluation: Exception evaluating javascript: TypeError: undefined is not a function, text: (function(){Wicket.Ajax.ajax({"f":"forma8","u":"./page?4-1.IBehaviorListener.0-form-addFieldPanel-form-fieldPanel-form-rte-form-container-button","e":"click","c":"buttona9","sc":"addFieldPanel:form:fieldPanel:form:rte:form:container:button","m":"POST"});})();(function(){jQuery('#editora7').kendoEditor({ "encoded": false });})();
I'm handling the addition by using an abstract panel which I extend and using the replaceWith() method and adding the panel back with the target. This methodology works on all other panels that I'm using, but the new addition of the Javascript for the RTE is where the problems arise. If I refresh the page, or if I add the whole page to the target, then it will render, but this is obviously not ideal, as I'm using AJAX for a reason.
Any thoughts on how to get the javascript to be added in properly would be greatly appreciated.
After re-evaluating my process, I found the solution. Due to the setup of my project, I was loading all javascript into the application on instantiation, though these javascript files were only required for this panel. To solve the problem, I removed the javascript from the bulk load and added the following method to my panel:
@Override
public void renderHead(IHeaderResponse response)
{
super.renderHead(response);
response.render(JavaScriptHeaderItem.forUrl("http://cdn.kendostatic.com/2014.1.416/js/kendo.upload.min.js"));
response.render(JavaScriptHeaderItem.forUrl("http://cdn.kendostatic.com/2014.1.416/js/kendo.imagebrowser.min.js"));
response.render(JavaScriptHeaderItem.forUrl("http://cdn.kendostatic.com/2014.1.416/js/kendo.editor.min.js"));
}
Hope that might help some others.