kernel panic in userspace

Начал понемногу оживать блог, как вы уже, наверное, заметили :) Практика программирования и последующего рефакторинга хорошего кода даёт благодатные плоды для размышлений. Плохой код и его сопровождение такой радости не принесут, особенно если работать одному. На сей раз про jQuery, WYSIWYG и onChange event.

Волею судеб понадобилось мне добавить в некий абстрактный проект в вакууме WYSIWYG редактор к некоторым textarea. Больше не буду слушать советов от дотнетчиков, идея с CKEDITOR оказалось не слишком плодотворной, так что я переключился на вариант с tinyMCE. Не то, чтобы первый был слишком уж плох, просто у нас как-то не срослось. Да и документация у него не сильно круче документации к bbPress.

Помимо простого редактирования текста надо в редакторе динамически подменять данные теми, которые были получены от сервера через Ajax. Тут всплывают некоторые проблемы. Первая — при простом изменении данных некого textarea через

$("#some_id").val()

данные в WYSIWYG не обновляются. Та же ситуация и с другими полями, изменяемыми через метод val(). jQuery позволяет нам самим вызывать некоторые события для элементов, чем мы и воспользуемся. Вызывать подобный метод после каждого val() было бы не слишком красиво, правда? Вот и я так думаю, так что мы немножко расширим наш jQuery следующим образом:

$(document).ready(function()
{
  $.fn.extend({
    // fires change() event on element
    valChange: function(newValue)
    {
      var obj = $(this);
      obj.val(newValue);
      obj.change();
    }
  });
});

Решение почти как здесь, с той лишь разницей, что я не постиг javascript на уровне понимания такого рода конструкций, как там указаны. Таким образом при каждом вызове valChange вместо val у нас будет вызываться событие change и все его обработчики. Очень полезно, если у вас, допустим, висит обработчик для text input, обновляющий дату в календаре при изменении данных в поле.

Такое же действие мы вешаем на изменение textarea с нашим tinymce. Только вот снова проблема, что он всё равно не обновляется, т.к. событие не слушается через tinyMCE. Дабы сделать наш волшебный код работающим и неломающимся, добавим подобного слушателя примерно сами следующим образом:

$('textarea').change(function()
{
  if (tinyMCE)
  {
    tinyMCE.get(this.id).setContent(this.value);
  }
});

Так у нас ничего не сломается, даже если WYSIWYG не загрузился по каким-то причинам.

Ну и напоследок небольшой совет, на случай того, если у вас в базе данных могут быть поля со значением NULL, которые надо тоже вытаскивать в форму. Можно заменять null на стороне сервера, но по принципу «работает — не трожь» мы не будем трогать серверные модели работы с БД, а напишем небольшую функцию на Javascript:

function sanitizeNull(data)
{
  // to make some NULL sql fields just like empty strings
  for (x in data)
  {
    if (data[x] == null)
    {
      data[x] = '';
    }
  }
}

Просто скармливаем ей JSON, полученный от сервера и все null станут пустыми строками, что важно, чтобы браузеры типа Opera не выставляли в наши textarea слово null прямым текстом. Вот как-то так.

Пачаў паціху ажываць блёг, як вы ўжо, напэўна, заўважылі :) Практыка праграмаваньня і далейшага рэфакторынгу добрага коду дае сваю добрую садавіну й гародніну. Благі код і ягонае суправаджэньне такой радасьці не прынясуць, асабліва калі працаваць аднаму. На гэта раз пра jQuery, WYSIWYG і onChange event.

Так ужо здарыласа, што спатрэбілася мне дадаць у нейкі абстрактны праект у вакууме WYSIWYG рэдактар да некаторых textarea элементаў. Больш ня буду слухаць парад ад датнэтчыкаў, ідэя з CKEDITOR атрымалася ня дужа жыццяздольнай, так што я пераключыўся на варыянт з tinyMCE. Ня тое, каб першы быў ужо зусім благі, але проста ў нас неяк не зраслося. Ды й дакумэнтацыі па яму ня надта круцейшая дакумэнтацыі да bbPress.

Акрамя простага рэдагаваньня тэксту трэба ў рэдактары дынамічна падмяняць дадзеныя тымі, якія былі атрыманы ад сэрвера праз Ajax. Тут усплывае некалькі праблемаў. Першая — пры простым зьмяненьні дадзеных нейкага textarea праз

$("#some_id").val()

дадзеныя ў WYSIWYG не аднаўляюцца. Тая ж сітуацыя і з іншымі палямі, якія зьмяняюцца праз мэтад val(). jQuery дазваляе нам самім выклікаць некаторыя эвэнты для элементаў, чым мы і скарыстаемся. Выклікаць падобны мэтад пасьля кожнага val() было б ня дужа прыгожа, праўда? Вось і я так лічу, так што мы трошкі пашырым наш jQuery наступным чынам:

$(document).ready(function()
{
  $.fn.extend({
    // fires change() event on element
    valChange: function(newValue)
    {
      var obj = $(this);
      obj.val(newValue);
      obj.change();
    }
  });
});

Салюшн прыкладна такі ж, як і тут, з той толькі розьніцай, што я не спасьціг javascript на ўзроўні разуменьня такога роду канструкцый, як па спасылцы прыведзены. Такім чынампры кожным выкліку valChange замест val у нас будуць спрацоўваць выклік change эвэнта і ўсе ягоныя апрацоўшчыкі. Вельмі карысна, калі ў вас, напрыклад, вісіць апрацоўшчык для text input, які аднаўляе дату ў календары пры зьмене дадзеных у полі.

Такое ж дзеяньне мы вешаем на зьмену textarea за нашым tinymce. Толькі вось зноў праблема, што ён усё роўна не аднаўляецца, бо адпаведны эвэнт не слухаецца праз tinyMCE. Каб зрабіць наш чароўны код працуючым і нязломным у экстрэмальных выпадках, дададзім падобнага слухача наступным чынам:

$('textarea').change(function()
{
  if (tinyMCE)
  {
    tinyMCE.get(this.id).setContent(this.value);
  }
});

Так у нас нічога не зламаецца, нават калі WYSIWYG не загрузіцца па нейкіх прычынах.

Ну і напасьледак невялічкая парада, на выпадак таго, што ў вас у базе дадзеных могуць быць палі са значэньнем NULL, якія таксама трэба выцягваць у форму. Можна замяняць null на баку сэрвера, але па прынцыпе «працуе — не чапай» мы ня будзем чапаць сэрверныя мадэлі працы з БД, а напішам невялічкую функцыі на Javascript:

function sanitizeNull(data)
{
  // to make some NULL sql fields just like empty strings
  for (x in data)
  {
    if (data[x] == null)
    {
      data[x] = '';
    }
  }
}

Проста скармліваем ёй JSON, атрыманы ад сэрвера, і ўсе null стануць пустымі радкамі, што важна, каб браўзэры ціпа Opera не выстаўлялі ў нашыя textarea слова null адкрытым тэкстам. Вось неяк так.