Ответ Jquery Ajax с использованием ThickBox - PullRequest
1 голос
/ 16 сентября 2009

Итак, у меня есть вызов ajax к сервису (использующему JQuery), который возвращает действительный html:

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

Этот возвращаемый HTML-код назначается правильно и отображается на странице, НО, когда я щелкаю тег «a», открывается новая страница вместо «ThickBox» с содержимым iFrame.

Вот запутанная часть, если я скопирую этот код на страницу, а затем запустите его в браузере, он будет работать правильно (отображая элемент Thickbox)

Почему ответ AJAX не отображает элемент ThickBox правильно?

Я предполагаю, что class = 'Thickbox' в тексте ответа не находит javascript, который знает, как анализировать этот элемент.

Ответы [ 4 ]

1 голос
/ 15 февраля 2011

Вы также можете поместить в скрипт ajax следующий скрипт:

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

Он будет инициализировать толстую рамку каждый раз при появлении ответа ajax.

0 голосов
/ 09 октября 2012

Заменить tb_init () следующим:

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    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;
    });
}

Это связывает событие click с живым методом jQuery, который рассматривает динамически генерируемый контент.

0 голосов
/ 09 октября 2009

У меня была такая же проблема. Быстрый ответ - добавьте следующую строку после заполнения innerHTML: tb_init ( 'a.thickbox'); // Инициализировать снова

Это повторно инициализирует обработчик событий для тега привязки. Сработал как шарм для меня ...

0 голосов
/ 16 сентября 2009

Я думаю, проблема в том, что у этого <a class='thickbox' просто нет события, связанного с ним.

У меня были точно такие же проблемы, когда я скопировал существующие элементы dom, которые содержали ссылки, и все связанные события перестали работать на этих вновь созданных элементах. все, что мне нужно было сделать, это связать события с этими элементами тоже.

Так что просто сделайте ваш звоночек в этом новом элементе тоже. Не используйте тот же код, который вы используете в $ (document) .ready. Когда я сделал что-то подобное, события начали работать с новыми элементами, но дважды сработали над старыми элементами.

Редактировать в ответ на комментарий: Я понятия не имею, как работает Thickbox. Я всегда предпочитал Slimbox. Я нашел какой-то пример, который мог бы вам помочь. ПРОЧИТАЙТЕ это (о толстом ящике): http://15daysofjquery.com/jquery-lightbox/19/

Обычно, когда страница загружается, эта функция срабатывает:

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

теперь все теги с классом Thickbox будут открывать ссылки на материал в окне Thickbox. Если на страницу добавляются новые элементы a, они не привязаны к этому событию, поэтому после выполнения магии ajax и извлечения нового содержимого из какого-либо места вам необходимо связать этот $ («a.thickbox»). (function () {к новой ссылке на. просто добавьте что-то вроде

$(newlinkselector).click(function{ etc.. etc.. 

в сценарии, сразу после того места, где вы отрисовываете материал, который возвращает вам вызов ajax.

...