ThickBox не работает, когда данные со стороны сервера - PullRequest
Новая
       47

ThickBox не работает, когда данные со стороны сервера

2 голосов
/ 06 июня 2009

Я использую толстую коробку jQuery, чтобы показать страницу aspx в модальном диалоговом окне. Это прекрасно работает на моей странице. На моей странице есть несколько ссылок, по которым, когда я щелкаю, используя метод Load jQuery, я получаю некоторые данные со страницы сервера и загружаю в нее (данные, которые я получаю, представляют собой сетку, которая содержит некоторые изображения). Моя проблема в том, что мой Thickbox работает нормально, когда он жестко запрограммирован на моей странице, но когда я беру его с сервера и загружаю в div, он не работает, вместо того, чтобы показывать новую страницу в модальном диалоге, он перенаправляет браузер для загрузки этой страницы.

Я жестко закодировал эту строку на моей первой странице 

<a class='thickbox' href='../Home/CostMetrics.aspx?Model=6&KeepThis=true&TB_iframe=true&height=300&width=850'>modal thick box link</a>

и я генерирую этот тег с сервера, когда загружаю данные с сервера в div

ссылка на модальный толстый ящик

Оба одинаковы. Но мой лайтбокс не работает. Есть идеи для решения этой проблемы?

Я включил CSS и js Thickbox в мою первую страницу. Страница моего сервера, которая заполняет div, возвращает данные, подобные этой 

<div><div><img src='abc.jpg' /> <a class="thickbox" href="../Home/CostMetrics.aspx?Model=5&KeepThis=true&TB_iframe=true&height=300&width=850">modal thick box link</a></div></div>

Заранее спасибо

Ответы [ 5 ]

3 голосов
/ 14 января 2011

В отличие от того, что говорит Сергей, использование функции .live () jQuery где-то в вашем .js: 

$('[id^="my_thick_"]').live("click", function(event) {
    try {
            // This block is taken from tb_init()
        var t = this.title || this.name || null;
        var a = this.href || this.alt;
        var g = this.rel || false;
        tb_show(t,a,g);
        this.blur();
        return false;
    } catch(e) { alert(e); }    
});

при условии, что идентификаторы ваших динамически добавленных ссылок начинаются с 'my_thick _...'

3 голосов
/ 09 июля 2009

У меня была похожая проблема - Thickbox отлично работает с данными, которые загружаются на странице, - но когда вы возвращаете динамическое содержимое (с помощью команды jQuery Ajax) ' после загрузки страницы ' - ссылки, содержащиеся в этом новом данные не открываются

Мое решение:
Thickbox вызывает функцию " tb_init " внутри файла thickbox.js, которая выполняется только один раз при загрузке страницы ... вам нужно снова вызвать функцию " tb_init " INSIDE ваша функция jQuery, которая выполняет новый динамический контент сервера!

Вызвать 'tb_init' по следующим трем строкам (эти строки можно найти в верхней части файла "Thickbox.js"): 

tb_init('a.thickbox, area.thickbox, input.thickbox, button.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

В качестве примера - это фрагмент кода того, как я начал работать с толстым ящиком над контентом, который я динамически генерировал с помощью команды jQuery Ajax (которая, я думаю, похожа на метод jQuery «Load», который вы используете!?) ... 

$.ajax({
method: 'get',url: '<?php echo $url;?>incl_ajax_prices.php',data: 'h=<?php echo $Hid;?>',
beforeSend: function(){$('#PriceLoad').show('fast');}, //show loading just when link is clicked
complete: function(){ $('#PriceLoad').hide('fast');}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$('#Prices').show('slow'); //animation
$('#Prices').html(html); //show the html inside .content div

// ThickBox - this allows any dynamically created links that use thickbox to work!
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

}
}); //close ajax

Вот как я это сделал (я новичок в jQuery), это, вероятно, не лучшее решение, но метод проб и ошибок привел меня к этому методу!

Надеюсь, это поможет?

1 голос
/ 27 сентября 2011

Мы исправили проблему с thickbox Пожалуйста, обратитесь эту ссылку для деталей

1 голос
/ 06 июня 2009

Насколько я помню, ThickBox инициализируется, когда DOM готов (по событию ready jQuery). Во время этой инициализации он заменяет обработчик кликов по умолчанию на тот, который покажет вам модальный режим. Когда вы используете метод Load jQuery для загрузки данных, такой инициализации нет. Чтобы это исправить, вы должны вручную инициализировать ThickBox после вставки нового html на страницу этого нового html. Или вы также можете переустановить ThickBox на всех элементах (после вставки нового HTML в DOM), это будет работать, но это не оптимальное решение: 

tb_init('selector for newly added anchor (a tag)'); // only for new one
tb_init('a.thickbox'); // to reinit thickbox on all anchors with class thickbox
0 голосов
/ 16 июля 2010

Вы можете заменить оригинальный код функции tb_init в файле Thickbox.js следующим: 

function tb_init(){
    $(document).click(function(e){
    e = e || window.event;
    var el = e.target || e.scrElement || null;
    if(el && el.parentNode && !el.className || !/thickbox/.test(el.className))
    el = el.parentNode;
    if(!el || !el.className || !/thickbox/.test(el.className))
    return;
    var t = el.title || el.name || null;
    var a = el.href || el.alt;
    var g = el.rel || false;
    tb_show(t,a,g);
    el.blur();
    return false;
    });
};

Или вы можете просто разместить эту функцию в заголовке вашей html-страницы внутри тега как обычную функцию JS. Это поможет работать с внешними данными.

...