Hi there!
I've been using fckeditor for some time now, I used the fckeditor plugin for version 2. I'm now trying to reprogram my software to use the new and fast version 3, but I don't know what's going on, because it isn't working as it should.
Scenario:
I'm using a number of plugins, jquery validation, jquery form and so on... everything is working fine with version 2. I installed version 3, everything is working fine with IE, at least version 8, which I'm using right now...
Here's the thing... using FF, the editor loads fine, works ok, but when I submit the data, the text in the field where the instance is loaded, doesn't get submitted. I've been testing and working around this for a couple of days now and I can't find an explanation.
I even created a separate testing program, but the issue keeps surfacing... but this time, the first time I submit the data, it submits it blank, the next I hit the submit button, it submits the data for the previous input.
Like this (hope this illustrates the issue):
Data: 11111
Submits: (nothing)
Data: 22222
Submits: 11111
Data: 33333
Submits: 22222
(This is an AJAX application, so in this test no reload is done. When I reload it always submit blank).
My validation javascript is this:
For brevity ALL the code is NOT posted
This is te code for the form:
Please advice.
Thanks in advanced.
E.
I've been using fckeditor for some time now, I used the fckeditor plugin for version 2. I'm now trying to reprogram my software to use the new and fast version 3, but I don't know what's going on, because it isn't working as it should.
Scenario:
I'm using a number of plugins, jquery validation, jquery form and so on... everything is working fine with version 2. I installed version 3, everything is working fine with IE, at least version 8, which I'm using right now...
Here's the thing... using FF, the editor loads fine, works ok, but when I submit the data, the text in the field where the instance is loaded, doesn't get submitted. I've been testing and working around this for a couple of days now and I can't find an explanation.
I even created a separate testing program, but the issue keeps surfacing... but this time, the first time I submit the data, it submits it blank, the next I hit the submit button, it submits the data for the previous input.
Like this (hope this illustrates the issue):
Data: 11111
Submits: (nothing)
Data: 22222
Submits: 11111
Data: 33333
Submits: 22222
(This is an AJAX application, so in this test no reload is done. When I reload it always submit blank).
My validation javascript is this:
For brevity ALL the code is NOT posted
$("#registroForm").validate({ submitHandler: function(form) { jQuery(form).ajaxSubmit({ target: "#formMensajes", beforeSubmit: function(formData, jqForm, options){ }, url: "/backend/administradores.ajax/procesos.asp?tabla=<%=tabla%>&proceso=<%= proceso %>&campoABuscar=<%= campoABuscar %><%= tablaIdFieldStr %>&campoAComparar=<%= campoAComparar %>", success: function(responseText) { var respuesta = responseText if (respuesta == "duplicado") { var respuesta = "Este registro ya existe en la base de datos." $("#formMensajes").removeClass("success"); $("#formMensajes").addClass("error"); $("#formMensajes").html(respuesta).anyfade(); $(".form-container").effect("highlight", { color: "#FF99FF"}, 3000) } if (respuesta == "insertado" || respuesta == "actualizado") { var respuesta = "Registro " + respuesta + " exitosamente." $.jGrowl(respuesta, { theme: 'success' }); resetScreen() loadTableData("<%= tabla %>", "<%=tablaIdField%>", "<%=camposHeader%>", "<%=campos%>", "<%=sortHeader%>", "<%=anchoHeader%>", "<%= editarRegistro %>", "<%= borrarRegistro %>", "<%= activarAdminCol %>", "<%= tablaEditableField %>") return false; } } }); }, rules: { nombreZona: { required: true }, descripcion: { required: true }, html: { required: true } } });
This is te code for the form:
<form id="registroForm" method="post"> <div class="clearfix"> <!-- botones --> <!--#include virtual="/backend/administradores.ajax/botones.boton.cancel.asp"--> </div> <h1>Formulario de Zonas de Banners</h1> <div class="basic"><strong>Instrucciones:</strong> Los datos obligatorios están marcados con un asterisco (<em>*</em>). <br />Llene el formulario a continuación. Puede editar o eliminar datos según esté disponible en esta pantalla.</div> <fieldset> <legend>Datos Principales</legend> <div><label for="nombreZona">Nombre de la Zona <em>*</em></label><input id="nombreZona" type="text" name="nombreZona" value="" size="70" /></div> <div><label for="descripcion">Descripción <em>*</em></label><textarea id="descripcion" name="descripcion" cols="100" rows="5"><%=descripcion%></textarea></div> </fieldset> <fieldset > <legend>Contenido de Banners</legend> <div > <textarea id="html" name="html" cols="90" rows="10"><%=html%></textarea> <script language="javascript"> var editor = CKEDITOR.replace( 'html', {toolbar: 'Medium'} ); CKEDITOR.remove(editor) CKFinder.SetupCKEditor(editor); </script> </div> </fieldset> <div class="clearfix"> <!-- botones --> <!--#include virtual="/backend/administradores.ajax/botones.boton.cancel.asp"--> </div> </form>
Please advice.
Thanks in advanced.
E.
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
It's probably due to order how event's being fired. That's what i've faced when developing CKEditor plugin for jQuery #4210, which integrates itself with jquery form plugin. It would be very helpful if you could test it and post feedback from real use case (preferably as ticket comment).
It should resolve your issue if everything will go well.
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
This might not be useful to you if you have to support Safari or old versions of IE, but if you can control the browsers its quite fun.
Using some code it's possible to read the current contents of CKEditor just using the textarea.value, so it avoids integration problems with any framework. To get the code read this post (and the next one for a slight fix related to the events registration)
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
I run it right before the form.submit() from the jQuery.form plugin and it works fine for me. Hope this helps.
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
If you are going that route, I find that writing standard javascript using the CKEditor API is much simpler:
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
I gave each of my textareas a class of 'rte' then run this bit of jQuery before submitting the form!
Re: issue: FF3.5, jquery 1.3.2, jquery.form plugin
This solution does not seem to work if there are multiple classes defined.
Example: class="rte required"
Any suggestions on getting it working if "rte" is one of the defined classes for the textarea?