Как передать более 1 строки html через data-*?

Question

[id_baton4eg]

Использую timetable.js, где содержание записи передается через дата атрибут, при этом html в одну строку передается корректно, но если содержание содержит более 1 строки (т.е. есть перенос), то оно просто передает выводится вовсе.

Скрипт выводит данные в формате



Как правильно передать полностью контент через дата атрибут ?

Answer 1

[Данил Разумков]

Не совсем понял вопрос, но мне кажется, что можно просто все закодировать в JSON, а где надо, парсить его.

UPDATE:
Сделайте так: echo "<pre>$data</pre>"

Comments

[id_baton4eg]

$data_post_content = '\' ' . $query->post->post_content . ' \'';
не всработало, как только переношу на след строку - белый экран, не прогружает.

[Данил Разумков]

id_baton4eg, Можете дать больше кода, сложно понять суть проблемы.

[id_baton4eg]

использую скрипт https://github.com/Grible/timetable.js
при этом рендер скрипта происходит через построение цикла wp (вызываю функцию которая этот скрипт собирает и подключает в футере), в инструкции на гитхабе сказано, что передаются данные через дата атрибут.
В итоге строка добавления ивента с описанием выглядит так:

timetable.addEvent('Группа 1', 'Зал BLACK', new Date(2018,02,17,11,20), new Date(2018,02,17,12,00), { url: "#", data: { description:'Пошаговая инструкция.', membername:'Алексей ', project:'Студент группы 2', bgcolor:'#eeee22', content:' <pre></pre> '  } });

При этом последний параметр строки задается через переменную

$data_post_content = '\' <pre>' . $query->post->post_content . '</pre> \'';

и в итоге получаем

content:' <pre>ТУТ КОНТЕНТ (с ним и проблема)</pre> '  }

[id_baton4eg]

Данил Разумков, вот если в содержимом этого контента больше 1 строки выводится просто белый экран, если же написать 1 слово, то передается весь html код корректно, и ссылки и цсс - все как надо. Но ведь контент нужно передать в полном виде...

[Данил Разумков]

id_baton4eg, Попробуйте json_encode перед отправкой и потом на клиeнте json_decode

[id_baton4eg]

Данил Разумков, Спасибо, очень помогли, json_encode - что надо !)

Answer 2

[Максим Тимофеев]

в атрибутах перенос строки нельзя, ай-ай-ай. Сделайте скрытый блок и туда кидайте или в localStorage

Answer 3

[Exploding]

Так может?

//v1
$dataToHtml = nl2br($dataToHtml);
echo "<tag data-mydata='$dataToHtml'>Ура!</tag>";

//v2
$dataToHtml = base64_encode($dataToHtml);
echo "<tag data-mydata='$dataToHtml'>Ура!</tag>";

А в js тогда:

var encData = $(this).data('mydata');
var decodedData = this.atob(encData);

P.S. Не проверял:) Но должно работать.

Comments

[id_baton4eg]

попробовал как самый просто вариант, не всработало =(

[Exploding]

id_baton4eg, может скажете почему? или там кинете пример какой-то я не знаю...

[Exploding]

id_baton4eg, обновил там...

[id_baton4eg]

использую скрипт https://github.com/Grible/timetable.js
при этом рендер скрипта происходит через построение цикла wp (вызываю функцию которая этот скрипт собирает и подключает в футере), в инструкции на гитхабе сказано, что передаются данные через дата атрибут.
В итоге строка добавления ивента с описанием выглядит так:

timetable.addEvent('Группа 1', 'Зал BLACK', new Date(2018,02,17,11,20), new Date(2018,02,17,12,00), { url: "#", data: { description:'Пошаговая инструкция.', membername:'Алексей ', project:'Студент группы 2', bgcolor:'#eeee22', content:' <pre></pre> '  } });

При этом последний параметр строки задается через переменную

$data_post_content = '\' <pre>' . $query->post->post_content . '</pre> \'';

и в итоге получаем

content:' <pre>ТУТ КОНТЕНТ (с ним и проблема)</pre> '  }

Answer 4

[synapse_people]

-сделай вложенный элемент с CDATA.
или
-замени \r? \n на какой-то символ, который не будет использоватся в значениях и считай, что это перенос строки
- addslashes , затем stripslashes