Как правильнее вставить в JS код длинный блок html кода?

Question

[Матвей Мамонов]

Здравствуйте. AJAX запрос посылается на сервер и скрипт авторизует человека на моем сайте. Ответ возвращается как JSON (Object {login: "login", avatar: "default.jpg", rights: "0", confirm: "0", error: null}). Собственно, что нужно сделать. Как только ответ пришел и скрипт определил, что он положительный,

if (answ.error == 0) {
  // мой код
}

мне нужно показать блок в шапке сайта, вместо кнопки входа. Вот его HTML:

<div id="home-button">
						<span class="ava" style="background: url('/images/avatars/$avatar'); background-size: cover;"></span>
					</div>
					<ul>
						<div>
							<li><a href="/">Профиль<span data-background="fontbg-home"></span></a></li>
							<li><a href="/articles">Стать автором<span data-background="fontbg-articles"></span></a></li>
							<li><a href="/examples">Избранное<span data-background="fontbg-examples"></span></a></li>
							<div></div>
							<li><a href="/signin">Настройки<span data-background="fontbg-signin"></span></a></li>
							<li><a href="http://codeinroad.tk/account/exit/?location=$currentLocation">Выход<span data-background="fontbg-signup"></span></a></li>
...

На PHP такие вещи я делаю при помощи такого синтаксиса:

print <<<ANDY
					<div id="home-button">
                                        ...
ANDY;

Можно ли воспользоваться чем-нибудь подобным в JS?

P.S. Для вставки использую

$("#header > section:last-child").html(answ.login);

но, как видите, так получается просто вставить возвращенный логин. А нужно целый блок кода, чтобы все красивенько отображалось.

Answer 1

[Алексей Немиро]

Проще сделать этот блок невидимым и показывать после выполнения авторизации пользователя.

if (answ.error == 0) {
  $('#кнопкаВхода').hide();
  $('#home-button').show();
}

Ну или ответом на AJAX может быть HTML :-) Но вариант с изначально существующим блоком лучше, т.к. он (блок) все равно будет на странице.

Comments

[Матвей Мамонов]

Так ведь мне этот блок как-то надо будет забить, когда придет ответ с сервера. Забить информацией, я имею в виду, то есть поместить в этот блок login, путь к аватару, например.

[Алексей Немиро]

Матвей Мамонов: и какие с этим могут быть проблемы? :-)

$('#photo').atr('src', answ.photo);
$('#nickname').html(answ.nickname);
// и т.п.

Можно без id, использовать атрибуты data-*, сделать что-нибудь более универсальное, чтобы много кода не приходилось писать.

Если пользователь авторизован, то на страницу можно передавать JSON-данные в скрытое поле, такие же, как при авторизации. ИJavaScript-ом проверять данные в этом скрытом поле и если информация есть, выводить нужные блоки.

[Матвей Мамонов]

Проблема в том, что вместе с этими элементами должно появиться выезжающее меню на 40 строк кода.

[Алексей Немиро]

Матвей Мамонов: это тоже не проблема. Количество строк значения не имеет, HTML может и одной строкой быть записан.

Если меню будет скрыто на странице, то после авторизации, если какие-то пункты меню должны быть недоступны для пользователя, то это тоже можно сделать JavaScript-ом, при обработке данных answ.

Если все совсем сложно, то можно использовать получение HTML. Наверное лучше вынести панель пользователя в отдельный файл, который сможет подключаться к страницам и выводить необходимые данные, а такжеиспользоваться в качестве результата успешной авторизации в асинхронном режиме.

Т.е., при загрузки страницы сайта, если пользователь авторизован, страница может содержать примерно такой код:

if($isUser)
{
  // показываем панель пользователя
  require_once "./userpanel.php"; 
}
else
{
  // панель гостя
  require_once "./guestpanel.php"; 
}

Если пользователь не авторизован, то при AJAX авторизации, код страницы (к которой делается ajax-запрос) может быть похожим:

// код проверки пользователя
// ...

// вывод результатов
if($isUser)
{
  // панель пользователя
  require_once "./userpanel.php"; 
}
else
{
  // сообщение об ошибке
  require_once "./error.php"; 
}

Этот вариант будет проще, если панель пользователя сложная или часто меняется.

[Матвей Мамонов]

Алексей Немиро: да вы не так вопрос поняли. Это все понятно и в этом проблемы нет никакой. Тут вопрос в другом. Короче, ладно, буду просто упрощать.

Answer 2

[mayorovp]

Поместите нужный фрагмент html в блок script с типом данных, отличным от javascript. Например,

<script type="text/template">
</script>

Такой тэг будет проигнорирован любым браузером - а вы сможете получить его содержимое в своем скрипте.

Comments

[Матвей Мамонов]

Куда это вставлять? Как использовать? Как получить в скрипте?

[mayorovp]

Матвей Мамонов: Вставлять рядом со скриптом. Получить содержимое можно через innerHTML для DOM или .html() для всеми любимого jquery.