CKEditor and jQuery serialize () issue

Question

I am having problems with the jQuery serialize () function.

In the context, I open the form and check the changes made to it, so when the form loads, I serialize the data and assign it to a global variable:

form_data.edit_initial = $('#edit-job-form').serialize(); 

It works great.

Then, when I click the button to leave the form, it performs this check:

 var start = form_data.edit_initial; var end = $('#edit-job-form').serialize(); if (start == end) { // Do button action } else { // Open confirm dialogue } 

ELSE. Both serialize () functions work, and the second converts apostrophes, etc. In a series of numbers and percentage characters (which I can safely assume is some code for the apostrophe).

Any ideas why? This means that even when no changes occur, the dialog opens and groans that the form has been changed without saving.

Help!

Here are some sample data.

I am using an instance of CKEditor.

Part of the first result:

 &edit_time_digital=60&edit_desc=%3Cp%3E%0D%0A%09They'd+like+the+share+their+site+incase+people+want+to+see+their+entire+collection+of+furnature.%3C%2Fp%3E%0D%0A%3Cp%3E%0D%0A%09The+site+needs+the+following%3A%3C%2Fp%3E%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Home+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Standard+pages%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Galleries+(By+category)%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Contact+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09News+listings%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3Cp%3E%0D%0A%09It+should+be+a+very+simple+generator+build.%3C%2Fp%3E%0D%0A&edit_status=active` 

and second:

 &edit_time_digital=60&edit_desc=%3Cp%3E%0D%0A%09They%26%2339%3Bd+like+the+share+their+site+incase+people+want+to+see+their+entire+collection+of+furnature.%3C%2Fp%3E%0D%0A%3Cp%3E%0D%0A%09The+site+needs+the+following%3A%3C%2Fp%3E%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Home+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Standard+pages%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Galleries+(By+category)%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Contact+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09News+listings%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3Cp%3E%0D%0A%09It+should+be+a+very+simple+generator+build.%3C%2Fp%3E%0D%0A&edit_status=active 

Answer 1

As mentioned in the comments on the original post, I assume that you are using CKEditor and in your jQuery-ready function (or somewhere after loading the document) you replace the text field with an editor instance. CKEditor, like most WYSIWYG editors, prefers to reformat the text you pass to it, making it the actual markup, replacing special characters with HTML objects, wrapping the contents in a paragraph, etc. This means that although you have not changed anything, the original and reformatted content may be different.

Initialization of the editor instance is delayed and probably occurs after you serialize your form. However, CKEditor is not strongly associated with the (now hidden) text area from which it was created; you need to call the editor's updateElement function to clear all changes. This is usually done automatically when the form is submitted, so you get reformatted content in the submit handler.

Therefore, you just need to make sure that you call the updateElement function before you serialize for the first time, which is the best place after loading the editor. Fortunately, there is an event for this involving the following HTML markup:

 <form id="myForm"> <textarea name="test" id="myEditor">My random text</textarea> </form> 

JQuery ready function:

 $(function(){ function SerializeForm(){ // Make sure we have the reformatted version of the initial content in the textarea CKEDITOR.instances.myEditor.updateElement(); // Save the initial serialization form_data.edit_initial = $('#myForm').serialize(); } // You might as well leave it here in case CKEditor fails to load form_data.edit_initial = $('#myForm').serialize(); // Create editor instance CKEDITOR.replace('myEditor'); // Tap into CKEditor ready event to serialize the initial form state CKEDITOR.instances.myEditor.on("instanceReady", SerializeForm); }); 

Answer 2

Thanks! I am having problems with CKEditor textarea. I could not get the changed value without sending to cakephp.

But now everything works. I had to call updateElement before serialize as follows:

 CKEDITOR.instances.SurveyBody.updateElement(); var formData = $("#surveyForm").serialize(); 

Answer 3

Values ​​are encoded in a URI because ".serialize ()" is intended to be used in preparing HTTP parameters for transmission.

You can collect the values ​​of all form elements in a large string by simply looping over all the <input> elements (and <select> and <textarea> too, if applicable). The radio buttons are a bit more complicated, but it's still a pretty minor effort.

Answer 4

From jQuery Docs :

The .serialize () method creates a text string in a standard URL-encoded notation.

That is why you have these percentages and numbers. Although it should return the same value no matter how many times you call it, so I'm sure that you are doing something in your form between two calls.

You can use a different approach, for example

 var form_changed=false; $('#edit-job-form :input').change(function () { form_changed=true; }); 

jQuery: input selector