AJAX popup

Аватар пользователя solomenikm solomenikm 25 апреля 2010 в 16:39

Цель: при клике на ссылку (заголовок ноды, картинка, дата или что нам в голову взбредет) открывается popup содержащий нужные нам поля ноды. Содержание грузиться динамически.

Условие: все через views.

Нам нужно: Views Bonus Pack. Качаем, включаем.

Создаем views который будет "грузиться".
Добавляем тип отображения feed, где Style == XLS file.
Указываем Path (например xls), и устанавливаем в аргументах Node: Nid.
Настриваем поля.

Создаем views который будет "грузить".
Обязательное поле в нем Node: Nid, ставим его в самое начало и скрываем.
Теперь в поле с заголовком нужно указать Output this field as a link где Link path: == xls/[nid].
Теперь при клике на заголовок будет открываться нужный нам xls файл.

Осталось лишь одно - прикрутить к этому делу какой-нибудь lightbox. Я использую fancybox. Вот код для него:

$(".views-field-title a").click( function() {
        $.fancybox.showActivity();
        $.ajax({
                type            : "POST",
                cache   : false,
                url             : this,
                data            : $(this).serializeArray(),
                success: function(data) {
                        var html = new Array();
                        var i = 0;
                        $(data).find("td").each(function(){
                                html[i] = $(this).html();
                                i++;
                                });
                        c =     '<div class="views-field-field-img-fid">'+html[0]+'</div>'+
                                        '<div class="views-field-title">'+html[1]+'</div>'+
                                        '<div class="date-display-single">'+html[2]+'</div>'+
                                        '<div class="">'+html[3]+'</div>'
                        ;
                        $.fancybox(c);
                        }
        });

        return false;
});

Принимаю вопрос, предложения, благодарности.

0 Thanks

Комментарии

Аватар пользователя RockStar RockStar 25 апреля 2010 в 17:20

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

Аватар пользователя solomenikm solomenikm 25 апреля 2010 в 17:33
RockStar wrote:

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

Пожалуйста. Будут вопросы - задавайте.

Аватар пользователя solomenikm solomenikm 25 апреля 2010 в 19:12

Тут не принципиально каким модулем js это отображать. Важно лишь то, что этот способ взвращает "чистые" поля. Я пробовал возвращать разными форматами (JSON, XML и т.п.) но коректно картинки отображаются только в XLS.

Аватар пользователя Dеmimurych Dеmimurych 25 апреля 2010 в 19:37
"solomenikm" wrote:

ример на польском: http://bialystok2016.eu/calendar. Подробнее что конкретно?

не работает в google chrome 5.0.34

не оптимальный селектор. впрочем если дом небольшой то и так сойдет.
$(".views-field-title a").click(

Аватар пользователя solomenikm solomenikm 26 апреля 2010 в 1:20
Dеmimurych wrote:

не оптимальный селектор. впрочем если дом небольшой то и так сойдет.
$(".views-field-title a").click(

Какой будет оптимальным?

Аватар пользователя Valeratal Valeratal 25 апреля 2010 в 22:42

спасибо, добавил в закладки

однако
как бы тутда прикрутить обычный лайтбокс (который так и так есть для имэджкэш)

Аватар пользователя penexe penexe 26 апреля 2010 в 12:33
Valeratal wrote:

спасибо, добавил в закладки

однако
как бы тутда прикрутить обычный лайтбокс (который так и так есть для имэджкэш)

Rewrite the output of this field ->

<a href="node/[nid]" rel="lightframe">[title]</a>
Аватар пользователя RockStar RockStar 26 апреля 2010 в 0:55

а можно как нибудь сделать, только чтобы он не при клики а при наведении срабатывал, но все равно и так очень круто.

Аватар пользователя solomenikm solomenikm 26 апреля 2010 в 1:06
RockStar wrote:

а можно как нибудь сделать, только чтобы он не при клики а при наведении срабатывал, но все равно и так очень круто.

Можно сделать. $(".views-field-title a").click( function()... меняем click на hover и будет при наведении.

Аватар пользователя solomenikm solomenikm 26 апреля 2010 в 1:18
Valeratal wrote:

спасибо, добавил в закладки

однако
как бы тутда прикрутить обычный лайтбокс (который так и так есть для имэджкэш)

Вроде да, но без лазания в код не выйдет. Здесь (c = '<div class="views-field-field-img-fid">'+html[0]+'</div>...) мы добавляем стили к каждому загружаемому полю и стандартными методами этого помоему сделать нельзя. Хотя, если память мне не изменяет, лайтбокс и может отображать html без танцев с бубном, но в данном случаи он отобразит несформатированный текст.

Аватар пользователя Ice-LC Ice-LC 27 апреля 2010 в 13:08

Имелось в виду XSL? (думаю, лист Excel тут ни при чём)
на сайте не понял, куда кликать, чтобы увидеть всплывающее окно

Аватар пользователя solomenikm solomenikm 27 апреля 2010 в 16:19
Ice-LC wrote:

Имелось в виду XSL? (думаю, лист Excel тут ни при чём)
на сайте не понял, куда кликать, чтобы увидеть всплывающее окно

Кликать на загаловки. Имелось ввиду XLS, ничего другого думать не нужно. Вообще я тоже не в восторгах от использования этого формата, но это единственный формат которой нормально работает с imagecache в views, все остальные пытаются вставить массив с данными.

Аватар пользователя Ice-LC Ice-LC 27 апреля 2010 в 13:21

только после изучения JavaScript'а понял, куда кликать
"ссылки"-то заголовков никак не выделены...
красиво получилось
надо попробовать

Аватар пользователя Dеmimurych Dеmimurych 27 апреля 2010 в 16:36
"solomenikm" wrote:

Какой будет оптимальным?

два пути. первый посмотреть в ваш штмль чтобы сказать точнее

второй путь более универсальный обрабатывать
$(document).click(function(e)) {

if ($(e.target).hasClass(.views-field-title)) {выполнить что там надо}
}

повторюсь, заниматься такой оптимизацией стоит если у вас очень много элементов на которые вы вешаете событие клик.

Аватар пользователя Ice-LC Ice-LC 28 апреля 2010 в 8:06
"solomenikm" wrote:

Имелось ввиду XLS, ничего другого думать не нужно. Вообще я тоже не в восторгах от использования этого формата, но это единственный формат которой нормально работает с imagecache в views, все остальные пытаются вставить массив с данными.

Хм, да, действительно, они называют это листом Excel, хотя на самом деле это html. Лучше наверное тогда в XML сохранять, заголовков будет меньше.

Аватар пользователя solomenikm solomenikm 29 апреля 2010 в 12:03
Ice-LC wrote:
"solomenikm" wrote:

Имелось ввиду XLS, ничего другого думать не нужно. Вообще я тоже не в восторгах от использования этого формата, но это единственный формат которой нормально работает с imagecache в views, все остальные пытаются вставить массив с данными.

Хм, да, действительно, они называют это листом Excel, хотя на самом деле это html. Лучше наверное тогда в XML сохранять, заголовков будет меньше.

Конечно лучше, но ни XML, ни JSON не могу вставить поля с imagechcache.

Аватар пользователя Stalk Stalk 28 апреля 2010 в 13:04
$(".views-field-title a").click( function() {
        $.fancybox.showActivity();
        $.ajax({
                type            : "POST",
                cache   : false,
                url             : this,
                data            : $(this).serializeArray(),
                success: function(data) {
                        var html = new Array();
                        var i = 0;
                        $(data).find("td").each(function(){
                                html[i] = $(this).html();
                                i++;
                                });
                        c =     '<div class="views-field-field-img-fid">'+html[0]+'</div>'+
                                        '<div class="views-field-title">'+html[1]+'</div>'+
                                        '<div class="date-display-single">'+html[2]+'</div>'+
                                        '<div class="">'+html[3]+'</div>'
                        ;
                        $.fancybox(c);
                        }
        });

        return false;
});

А куда собственно этот код вставить ?

Аватар пользователя agent-000 agent-000 29 апреля 2010 в 1:10

это jQuery код. надо вставить в файл скрипта который подгрузится вместе со страницей. так я понимаю.

Аватар пользователя krock krock 29 апреля 2010 в 3:07

О! Молодца. Сумели настроить fancybox под ИЕ7. А у меня что-то бекграунд опасити не пашет.

Аватар пользователя fit fit 29 апреля 2010 в 12:10

А возможно ли в окошке получить поля для редактирования ноды?
Вывод контента - это конечно полезно в ряде случаев, но админить ноды "налету" было бы вообще здоровско!

Аватар пользователя emodr emodr 5 мая 2010 в 10:33

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

Аватар пользователя valero222 valero222 27 ноября 2010 в 13:53

Добрый день уважаемое сообщество не могу понять куда вставлять данный код, интуитивно понимаю что создать файл и всавить его туда, но куда именно помещать этот файл так и не понял или в какой файл его вставить направьте пожалуйста! Также использую fancybox

"Stalk" wrote:

$(".views-field-title a").click( function() {
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : this,
data : $(this).serializeArray(),
success: function(data) {
var html = new Array();
var i = 0;
$(data).find("td").each(function(){
html[i] = $(this).html();
i++;
});
c = ''+html[0]+''+
''+html[1]+''+
''+html[2]+''+
''+html[3]+''
;
$.fancybox(c);
}
});

return false;
});

Аватар пользователя FORTIS FORTIS 27 ноября 2010 в 17:58

как вариант, создаете в папке с темой .js файл и прописываете его в .info файле:
scripts[] = ajaxpopup.js