CKEditor plugin + grails submitTorRemote == fail

so people in my office talked to me now a couple of times that they like to have a formating option for text in the comment field.

So my first thought was to use the mighty ckeditor and there is a grail plugin already around. SO we should be done with this in 5 minutes...

Wrong it took a bit longer, since my form kept refusing to save my content and always reported the original content instead.

After quite a bit of googleling and the mandatory

I'm pissed about grails beer, this time it was a nice Aventinius

I found a solution to make it work.

Basically if you want to use CKEditor with JQuery you need to update it fields before (the plugin should really handle this! Do you hear me? I mean I fixed to many plugins by now...)




<g:form name="createNewComment" id="createNewComment" controller="comment">


<ckeditor:editor height="300px" width="80%" name="text ">

test
</ckeditor:editor>

<g:hiddenField name="id" value="${id}"/>
<g:hiddenField name="type" value="${type}"/>
<g:hiddenField name="destination" value="${destination}"/>


<g:javascript>
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
return true;
}
</g:javascript>

<g:submitToRemote before="CKupdate();" class="save" action="saveAjax" update="${destination}" value="save comment"/>


</g:form>




And this is all, now before we press the button, we always call the method to update the editor and everybody is happy...

jQuery + grails and my missing buttons...

currently I'm switching miniX over to use jQueryUi style buttons, since this makes life so much easier to maintain them.

Except during my event processing my buttons keep disappearing, which is rater annoying, to say at least.

Couple of hours later I finally found a crude but working solution. I just create a simple event handler, which re renders all by buttons...


$(document).ajaxComplete(function() {
$("input:submit, a.button, input:button, div.qq-upload-button").button()
});

$(document).ready(function() {
$("input:submit, a.button, input:button, div.qq-upload-button").button()
});