Виджет on-modx.ru
Как известно, сегодня хороший праздник "День международной солидарности трудящихся", непонятно зачем переименовынный в "Праздник весны и труда" у нас.
Так что, поздравляю всех трудящихся с нашим профессиональным праздником и желаю дальнейших успехов!
Сам, накануне, тоже немного потрудился и сделал простейший виджет для показа каталога on-modx.ru через его api, благо, у проекта как раз юбилей.
Виджет интересен тем, что работает на ajax, но без php и располагается в одном единственном чанке.
<div id="on_modx" style="text-align:center">
<h4 class="header">Сайты на MODX</h4>
<div class="links"><small>
<a href="http://on-modx.ru/">Посмотреть все</a> | <a href="http://on-modx.ru/catalog/add-site">Добавить свой</a>
</small></div>
<a href="" class="image"><img src="" alt="" title=""></a>
<small class="version"></small>
<h5 class="title"></h5>
<a href="javascript:void(0)" onclick="return getSite();" class="refresh">Обновить</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
getSite();
});
function getSite() {
var elem = $('#on_modx');
$('.image img', elem).attr('src', '/inc/img/spinner.gif');
$.get('http://on-modx.ru/api', {'mode': 'json', 'display': 1, 'random': 1, 'w': 250, 'h': 0}, function(data) {
if (typeof(data) == 'string') {
data = $.parseJSON(data);
}
if (data[0]) {
var site = data[0];
$('.title', elem).text(site.name);
$('.version', elem).text(site.ver);
$('.image', elem).attr('href', site.fullinfo);
$('.image img', elem).attr('src', site.src);
}
else {
elem.hide();
}
});
}
</script>
То есть, базовая разметка, функция для запроса на удалённый сервис (который разрешает такие запросы) и вставка ответа в разметку.
Функция запускается при загрузке страницы, также можно кликать по ссылке "обновить". Очень-очень просто и гибко, на мой взгляд. Если на сервис не отдаст ответ - весь блок будет просто спрятан.
Кому нравится - прикручивайте себе. Нужно просто скопипастить и положить бегунок загрузки в /inc/img/spinner.gif.
0
👍
👎
❤️
🔥
😮
😢
😀
😡
1 675
01.05.2013, 05:41:49
14 комментариев
Чикин Артур
01.05.2013, 09:48:15
Пустой хедер не тру в СЕО
Василий Наумкин
01.05.2013, 09:49:00
Никогда не парился про СЕО и не собираюсь начинать.
Там привязка идёт к классам - можно менять теги элементов как захочешь.
Чикин Артур
01.05.2013, 09:53:10
А все разобрался, туда же текст подгружается. P.S Исправляюсь, посмотрел исходный код страницы на этом сайте:)
Е. Вершинин
01.05.2013, 13:02:53
Тупо поставил как простой чанк в Ево. jQuery подключен внизу. Однако есть пару вещей: 1. пока не жмакнешь кнопку обновить выводится только скелет. А после нажатия выводится все как положено. 2. почему-то в Firefox даже после обновления ничего не показывает. На Хроме показывает все нормально.
Василий Наумкин
01.05.2013, 18:04:17
Chrome понимает ответ от сервера как объект, а FF как строку.
Добавил проверку
вроде работает.
Andrey Grachov
01.05.2013, 22:04:48
Есть специализированная функция $.getJSON.
Евгений Борисов
02.05.2013, 02:12:30
Буду рад тоже услышать конструктивную критику на счет плагина для jQuery.
Andrey Grachov
02.05.2013, 02:44:48
- Плагины обычно стараются возвращать переданные им элементы для обеспечения связанных вызовов методов. Если возвращаемое значение может понадобиться в дальнейшем (допустим, для вызова метода reload), его можно сохранить у элемента при помощи jQuery-функции data. - Вам может прийти не один элемент, поэтому функция плагина должна выглядеть так:
- Не уверен, насколько это критично, но лучше проверять наличие windows.console - Шаблонизатор не использует экранирование символов, поэтому, например, имя этого сайта, записанное в атрибут alt, разрушит структуру элемента (в alt останется только "Кукольная мебель фабрики"). Рекомендую посмотреть на шаблонизатор underscore.js, например - Надо пересмотреть проверку параметра only (или значения радиобаттонов на демо-сайте), потому что даже на демо-сайте консоль заполняется сообщениями о неверности этого параметра
Евгений Борисов
02.05.2013, 02:55:15
1,2 - Спасибо. Не знал. 3 - Знаю, на IE 6-7 может развалиться. Все забываю памятку про функции console написать. Ну теперь уж точно напишу)) 4 - Не хотел усложнять код. Но думаю .replace поможет в самом шаблоне. 5 - Да, не подумал как-то. Тупо вставил заведомо ложное значение в input, а оно вон как)
P.S. Спасибо за тест;-)
Andrey Grachov
02.05.2013, 03:24:10
Не за что :) Если уже доводить все до идеализма, то можно еще сделать такие мелочи: - к ajax запросу добавить обработчик ошибки, чтобы скрывать в этом случае спиннер:
- в Public.setConfig можно немного упростить jQuery жизнь и сохранять значение $('#' + Private.config.tpl) в переменную, а потом уже у нее обращаться к length/html - не совсем по плагину, скорее по примеру использования - в обработчиках ссылок лучше использовать e.preventDefault() вместо return false. Разница может показаться незначительной, но иногда она играет важную роль :) Думаю, будет неплохо добавить режим автоматического обновления (правда он наверное подойдет только для режима random). Его не сложно сделать самостоятельно, но пользователи же любят когда все сразу включено в плагин :D
Евгений Борисов
02.05.2013, 05:00:34
В шаблоне добавил замены кавычек на entities аналог. И избавился от return false. Вот про onclick и javascript:void(0) знаю, а вот про preventDefault() только сейчас узнал:-)
Сам плагин переделывать под return this each new не стал, т.к. это немного противоречит моей задумке с приватными и публичными методами. Да и сомневаюсь я, что будет несколько виджетов на одной странице. Не того полета плагин)
В итоге получилась 1.1 версия в который включил следующее: - Hide() в случае ошибки при ответе от сервера. - Подкорректировал логирование (проверку на window.console и отключил логер ошибок из-за некорректного значения в параметре only). - Добавил параметр timer для автоматического обновления блока.
Демка работы плагина там же.
Andrey Grachov
02.05.2013, 05:13:55
Что-то не то пошло с консолью :) Она резко из window переехала в $ ($.error будет генерировать исключение, а не логгировать сообщение). clearInterval можно вызывать без проверок, если такого идентификатора таймера нет, ничего не произойдет. Лучше использовать setTimeout вместо setInterval.
Евгений Борисов
02.05.2013, 05:35:42
Называется смотрю в книгу вижу фигу) Ведь еще в комментариях указана ссылка на stackOverflow с верным кодом. А я взял и переделал))
Спасибо за консультации, все таки на JavaScript не так часто пишу, как на php.
Сергей Шлоков
01.05.2013, 13:27:12
Подтверждаю. На FF только spinner крутится - обновляй, не обновляй. На опере все работает гут.
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Василий Наумкин
01.07.2024, 11:56:41
Да, верно, именно так.
А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024, 09:38:15
О, точно, вылезает если не залогинен.
Спасибо, исправил!
Василий Наумкин
09.04.2024, 04:45:01
> Ошибка 500
Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи.
...
russel gal
09.03.2024, 20:17:18
> А этот стоило написать хотя бы затем, чтобы получить комментарий от юзера, который ничего не писал...
Александр Наумов
27.01.2024, 03:06:18
Василий, спасибо!
Извини, тупанул.