положить результат функции ajax в fancybox 1.3.4 - PullRequest
1 голос
/ 09 января 2012

Кажется, это очевидная возможность, но я совершенно не могу понять, как это сделать.У меня есть несколько ссылок, например

<a onclick="func('AS');" href="#">Asia</a>
<a onclick="func('AU');" href="#">Australia</a>
<a onclick="func('NA');" href="#">North America</a>

Функция func выполняет подготовку данных, а затем отправляет запрос ajax.Результаты запроса ajax преобразуются в спарклайны.Это выглядит примерно так:

"func": function(continent) {
    $.ajax({
        url     : "path/to/data.json",
        type    : "GET",
        data    : {"continent": continent},
        dataType: "jsonp",
        error   : function() { alert("Error loading html document"); },
        success : function(result) {       
            var html = "<table>" + 
                        "<tr><td colspan='2'><div id='a'></div></td></tr>" + 
                        "<tr><td colspan='2'><div id='b'></div></td></tr>" + 
                        "</table>";

            $("#a").sparkline(result.a);
            $("#b").sparkline(result.b);
        }
    });

}

Все это работает очень хорошо, за исключением того, что я хочу показать html-таблицу во всплывающем окне fancybox и не могу понять, как подключить это.Я предполагаю, что мне нужно было бы повернуть операцию как-то так - привязать триггер fancybox к ссылкам с кодами континента, передать код континента в панель запуска fancybox и заполнить fancybox результатами вызова ajax.Все это говорит, как я на самом деле это сделать?

Обновление: На самом деле, следующее работало

"func": function(continent) {
    $.ajax({
        url     : "path/to/data.json",
        type    : "GET",
        data    : {"continent": continent},
        dataType: "jsonp",
        error   : function() { alert("Error loading html document"); },
        success : function(result) {       
            var html = "<table>" + 
                        "<tr><td colspan='2'><div id='a'></div></td></tr>" + 
                        "<tr><td colspan='2'><div id='b'></div></td></tr>" + 
                        "</table>";

            $.fancybox({
                content: html,
                autoDimensions: true
            });

            $("#a").sparkline(result.a);
            $("#b").sparkline(result.b);
        }
    });

}

1 Ответ

3 голосов
/ 09 января 2012

Что-то в этом роде?

success : function(result) {       
            var html = "<table>" + 
                        "<tr><td colspan='2'><div id='a'></div></td></tr>" + 
                        "<tr><td colspan='2'><div id='b'></div></td></tr>" + 
                        "</table>";

            $("#a").sparkline(result.a);
            $("#b").sparkline(result.b);

            // Pass table to fancybox
            $.fancybox(html);
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...