WYMeditor / Ajax - Adding Javascript References to Header

[Karl M. Davis]

Hello all, I'm trying to put together a Wicket component for WYMeditor (http://www.wymeditor.org/en/) as an alternative to TinyMCE.  If you haven't seen WYMeditor itself before, check out the demo at http://demo.wymeditor.org/demo.html.  WYMeditor is dual-licensed under GPL and MIT. After spending all day screwing around with _javascript_ references and Firebug, though, it's now time to give up and ask for help.  Everything works fine up until I try to add this Ajax behavior to the page during an Ajax event.  Then, things get screwy.  Here's what I have now: public class WymEditorConverter extends AbstractDefaultAjaxBehavior {     private static final String FILE_JS_JQUERY_PACKED = "jquery/jquery-1.1.3.1.pack.js";     private static final String FILE_JS_JQUERY_PRETTY = "jquery/jquery-1.1.3.1.js";     private static final String FILE_JS_WYMEDITOR_PACKED = "jquery.wymeditor.pack.js";     private static final String FILE_JS_WYMEDITOR_PRETTY = "jquery.wymeditor.js";     private static final String FILE_JS_WYMEDITOR_AJAX = "jquery.wymeditor-ajax.js";     private static final String JS_UPDATE_EDITORS = "wymUninitialize();";     /* Snip ... */         /**      * @see org.apache.wicket.ajax.AbstractDefaultAjaxBehavior#respond(org.apache.wicket.ajax.AjaxRequestTarget)      */     @Override     protected void respond(AjaxRequestTarget target)     {     }     /**      * @see org.apache.wicket.ajax.AbstractDefaultAjaxBehavior#renderHead(org.apache.wicket.markup.html.IHeaderResponse)      */     @Override     public void renderHead(IHeaderResponse response)     {         super.renderHead(response);         // Add a reference for the jQuery _javascript_ file         ResourceReference jsJquery = null;         if (Application.get().getConfigurationType().equals(Application.DEPLOYMENT))             jsJquery = new CompressedResourceReference(Marker.class, FILE_JS_JQUERY_PACKED);         else             jsJquery = new CompressedResourceReference(Marker.class, FILE_JS_JQUERY_PRETTY);         renderJsReference(response, jsJquery);         // response.renderJavascriptReference(jsJquery);         // Add a reference for the WYMeditor _javascript_ file         ResourceReference jsWymeditor = null;         if (Application.get().getConfigurationType().equals(Application.DEPLOYMENT))             jsWymeditor = new CompressedResourceReference(Marker.class, FILE_JS_WYMEDITOR_PACKED);         else             jsWymeditor = new CompressedResourceReference(Marker.class, FILE_JS_WYMEDITOR_PRETTY);         renderJsReference(response, jsWymeditor);         // response.renderJavascriptReference(jsWymeditor);         // Add a reference for the WYMeditor-ajax _javascript_ file         ResourceReference jsWymeditorAjax = new CompressedResourceReference(Marker.class,                 FILE_JS_WYMEDITOR_AJAX);         // renderJsReference(response, jsWymeditorAjax);         response.renderJavascriptReference(jsWymeditorAjax);         // Add a reference for the CSS skin         response.renderCSSReference(options.getSkin());         // Add the WYMeditor init block         response.renderOnLoadJavascript(getConversionJavascript());         // Add in references for all of the plugin's _javascript_ files         for (Plugin plugin : this.options.getPlugins())             // response.renderJavascriptReference(plugin.getPluginJavascript());             renderJsReference(response, plugin.getPluginJavascript());     }     private static void renderJsReference(IHeaderResponse response, ResourceReference reference)     {         if (RequestCycle.get().getRequestTarget() instanceof AjaxRequestTarget)         {             StringBuilder importBuilder = new StringBuilder();             importBuilder.append("var script = document.createElement('script');\n");             // importBuilder.append("script.id='tinyMCEScript';\n");             importBuilder.append("script.src='';\n");             importBuilder.append("script.type='text/_javascript_';\n");             importBuilder.append("document.getElementsByTagName('head')[0].appendChild(script);\n");             response.renderOnDomReadyJavascript(importBuilder.toString());         }         else             response.renderJavascriptReference(reference);     }     /**      * Returns the _javascript_ that is run to convert elements into WYMeditors. This is made publically      * accessible so that this _javascript_ can be run again, as necessary, if elements are added to the page      * via Ajax.      *      * @return the _javascript_ that is run to convert elements into WYMeditors      * @see AjaxRequestTarget#appendJavascript(String)      */     private String getConversionJavascript()     {         StringBuilder editorInitJs = new StringBuilder();         // editorInitJs.append("jQuery(function() {");         // editorInitJs.append(JS_UPDATE_EDITORS);         editorInitJs.append("  jQuery('" + conversionSelector.getJquerySelector() + "').wymeditor({");         editorInitJs.append(options.renderOptions());         editorInitJs.append("  });");         // editorInitJs.append("});");         return editorInitJs.toString();     } } Here's the jquery.wymeditor-ajax.js file; it's just got one function that's used when adding WYMeditors via Ajax: function wymUninitialize() {     for(var i=0; i < WYM_INSTANCES.length; i++)     {         WYM_INSTANCES[i].update();     }     WYM_INSTANCES = null;     WYM_INSTANCES = new Array(); } I have a couple of questions about this whole affair: I stole the code for renderJsReference(...) from TinyMCE, as if I use renderJavascriptReference(...), Wicket seems to create <script/> elements on the page with the whole text of the JS files I'd like to include (as near as I can tell from Firebug, anyways).  This doesn't work out very well: it causes exceptions when running jQuery's attr(...) method on them, which occurs during the WYMeditor initialization.  Any ideas as to what's going on here? My renderJavascriptReference(...) method works out just fine, up until I try to add FILE_JS_WYMEDITOR_AJAX using it.  Then, it seems that none of my JS resources get loaded correctly.  Specifically, I start getting errors about how jQuery isn't a valid method.  This makes no sense to me; that method of adding works fine with all of the other resources. Any help/insight you can provide would be greatly appreciated.  Ultimately, I'd like to get this project hosted on Wicketstuff. Thanks! Karl M. Davis --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]