Почему пропадает редактор текста в форме?

Question

[Robert]

Использую wysiwyg редактор в своей форме.
Все прекрасно работает.
На сайте есть ссылка "Edit", нажимая на которую, посылается ajax запрос в edit экшн контроллера.
Содержание edit.js.erb файла такое:

$('#place-content').html('<%= escape_javascript( render partial: "form", locals: {place: @place} )%>')

Т.е, нажимая на эту кнопку, в блок рендерится моя форма.
Проблема в том, что в этом случае wysiwyg редактор не появляется, а появляется просто обычная форма. В чем может быть загвоздка?

Comments

[Robert]

https://github.com/volmer/bootsy -- это редактор

[CapeRatel]

Видимо проблема в кривом подключении редактора. Выложите код формы и какой редактор.

[Robert]

CapeRatel: Сам редактор работает. Он пропадает только при попытке отрендерить форму после ajax запроса

[CapeRatel]

Robert: А js ошибки кидает в консоль какие нибудь? Я имею ввиду в devtools в браузере? Я юзал обычно tinymce и проблем не возникало.

[Robert]

CapeRatel: Нет, никаких алертов в консоли

Answer 1

[Viktor Vsk]

Проблемы никакой нет. Просто вы, очевидно, не переинициализируете редактор после вставки в DOM этой формы.

Вероятнее всего, при первом рендере страницы идут такие шаги:
1. Рендерится страница с обычной формой
2. В конце (или по событие document->ready) инициализируется редактор и форма становится wysiwig
3. Все происходит так быстро, что момент перехода формы в wysiwig вы не наблюдаете.

При подгрузке через AJAX же вы вставляете форму, но кода, инициализирующего редактор - нигде нет.

Выходы:
1. Вызывать какое-либо событие при изменение DOM в том месте, где у вас вставляется форма. И тогда можно помещать этот код в assets
2. Прямо в партиале, приведенном в вопросе добавить инициализацию редактора

Чаще всего вариант №2 предпочтительнее

Comments

[Robert]

Немного не понял, что Вы имели в виду под выходном #1, но до второго я почти дошел практическим путём.
В любом случае, спасибо за развернутый ответ! Все работает.

[Viktor Vsk]

Robert: вероятно, потому что выход №1 - достаточно нетривиальная и редко используемая вещь. Например, вот похожий вопрос: stackoverflow.com/questions/1091661/detect-element...

То есть, вы отслеживаете каким-то образом событие загрузки формы и сразу же инициализируете ее.

Как самый простой вариант (но очень плохой), сделать что-то типа:

$(document).on("ajaxComplete", function() { $('.wysiwig-form').initializeEditor() } )

Думаю, идею вы поняли

[Robert]

Виктор Ablebeam: Да, все прозрачно. Спасибо большое!