@KeeperDS

Как заставить работать js в модальном окне Bootstrap?

Доброго времени суток!

Сначала предыстория:

Имеется веб-интерфейс, мониторящий время выполнения бизнес-процессов на некотором количестве БД.

Сам веб-интерфейс крутится на web2py. Данные берутся из БД, обрабатываются контроллером, написанном на Питоне и выводятся на страничку.

Далее, есть графики, которые отображают нагрузку на эти самые БД. Графики строятся с помощью модуля Питона PyGal. Формат - svg. Графики интерактивные: подсветка значений, отображение значений при наведении на точки и т.д. Все это реализовано на js.

Доступ к ним завернут в бутстраповское dropdown-menu. Менюшка трехуровневая:
1. Объект мониторинга.
2. Бизнес-процесс, который мониторится.
3. Временной отрезок мониторинга, который и отображается в графике в формате "время выполнения (в секундах)" - "дата/время выполнения"

При нажатии на последнем уровне меню, на текущей страничке появляется модальное окно, в котором и отображается график.

Собственно проблема:

График открывается, как изображение, то есть никакой подсветки, все значения точек графика сразу отображены, получается каша.

При этом, если график выводить на отдельной странице, то он работает как надо.

Код менюшки:

<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-picture icon-white"></i> Графики</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
{{for r in rc_name:}}
    <li class="dropdown-submenu"><a href="#">{{=r}}</a>
        <ul class="dropdown-menu">
        {{for b in BP:}}
          <li class="dropdown-submenu"><a href="#">{{=b}}</a>
            <ul class="dropdown-menu">
            {{for t in time_period:}}
                {{x=links_dict[r]+'_'+bus_proc[b]+'_'+time[t]}}
                <li><a data-toggle="modal" href={{=URL('graph', x)}} data-target="#grModal">{{=t}}</a></li>
            {{pass}}
            </ul>
          </li>
        {{pass}}
        </ul>
    </li>
{{pass}}
</ul>
</div>


Все, что в фигурных скобках - питоновский код.

Код отображения модальных окон:

<script type="text/javascript">
$("a[data-toggle=modal]").click(function() {
  var target, url;
  target = $(this).attr('data-target');
  url = $(this).attr('href');
  return $(target).load(url);
});
</script>


<div class="modal hide fade" id="grModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 1440px; height: 900px; overflow: visible; position: absolute; left: 500px; top: 40px; text-align: center;">
</div>


А тепееерь, вопрос.

Как заставить работать js в модальном окне?
  • Вопрос задан
  • 4129 просмотров
Пригласить эксперта
Ответы на вопрос 2
SkaN2412
@SkaN2412
Программист, но хороший человек.
Дубль 2: я просто скрипт вставил в само окно. Таким образом он выполняется при подгрузке окна и, соответственно, все события работают и на его элементах :)
Ответ написан
Комментировать
SkaN2412
@SkaN2412
Программист, но хороший человек.
Попробуйте после вызова окна сделать bind всех привязанных к нему событий, там функция для этого есть в jQuery
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы