Проблема с CKEditor и jQuery serialize ()

Question

У меня проблемы с функцией jQuery serialize ().

В контексте я открываю форму и проверяю внесенные в нее изменения, поэтому, когда форма загружается, я сериализую данные иприсвойте его глобальной переменной:

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

Это прекрасно работает.

Затем, когда я нажимаю кнопку, чтобы покинуть форму, он выполняет эту проверку:

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

if (start == end) 
{ 
    // Do button action 
}
else
{ 
    // Open confirm dialogue 
}

ИНАЧЕ.Обе функции serialize () работают, но вторая преобразовала апострофы и т. Д. В серию чисел и процентных символов (что я могу с уверенностью предположить, это некоторый код для апострофа).

Есть идеи почему?Это означает, что даже когда не было внесено никаких изменений, открывается диалоговое окно и жалуется, что форма была изменена без сохранения.

Справка!

Вот некоторые примеры данных.

Я использую экземпляр CKEditor.

Часть первого результата:

&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` 

и второго:

&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

Как уже упоминалось в комментариях к исходному сообщению, я предполагаю, что вы используете CKEditor и в своей функции jQuery ready (или где-то после загрузки документа) вы заменяете текстовое поле на экземпляр редактора. CKEditor, как и большинство редакторов WYSIWYG, любит переформатировать текст, который вы передаете ему, делая его допустимой разметкой, заменяя специальные символы сущностями HTML, оборачивая содержимое в абзац и т. Д. Это означает, что, хотя вы ничего не изменили, оригинал и переформатированный контент может быть другим.

Инициализация экземпляра редактора задерживается и, вероятно, происходит после сериализации вашей формы. Несмотря на это, CKEditor не сильно связан с (теперь скрытой) текстовой областью, из которой он был создан, вам нужно вызвать функцию редактора updateElement, чтобы сбросить все изменения. Обычно это происходит автоматически при отправке формы, поэтому вы получаете переформатированный контент в вашем обработчике отправки.

Так что вам просто нужно убедиться, что вы вызываете функцию updateElement перед сериализацией в первый раз, для которой лучшее место после загрузки редактора. К счастью, для этого есть событие, предполагающее следующую разметку HTML:

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

Функция jQuery ready:

$(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's ready event to serialize the initial form state
   CKEDITOR.instances.myEditor.on("instanceReady", SerializeForm);
});

Answer 2

Спасибо! У меня были проблемы с CKEditor textarea. Я не мог получить измененное значение без отправки в cakephp.

Но теперь все работает. Я должен был позвонить updateElement до serialize так:

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

Answer 3

Значения кодируются по URI, поскольку ".serialize ()" предназначен для использования при подготовке параметров HTTP для передачи.

Вы можете собрать значения всех элементов формы в большую строку, просто перебрав все элементы <input> (и <select> и <textarea>, если применимо). Радиокнопки становятся немного хитрыми, но это все же довольно незначительное усилие.

Answer 4

Если вы используете несколько экземпляров CK Editor одновременно, вы можете использовать более общий метод перед сериализацией формы:

    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
    };
    var data = $('#my-form').serialize();

Answer 5

Из jQuery Docs :

Метод .serialize () создает текстовую строку в стандартной записи в формате URL.Вот почему у вас есть эти проценты и цифры.Хотя он должен возвращать одно и то же значение независимо от того, сколько раз вы его вызываете, поэтому я уверен, что вы делаете что-то для своей формы между двумя вызовами.

var form_changed=false;

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

jQuery: селектор ввода