K
K
KeeperDS2014-01-07 12:17:56
Bootstrap
KeeperDS, 2014-01-07 12:17:56

How to make js work in Bootstrap modal window?

Good day!
First, background:
There is a web interface that monitors the execution time of business processes on a certain number of databases.
The web interface itself is powered by web2py. The data is taken from the database, processed by the controller written in Python and displayed on the page.
Further, there are graphs that display the load on these same databases. Graphs are built using the PyGal Python module. The format is svg. Graphs are interactive: highlighting values, displaying values ​​when hovering over points, etc. All this is implemented in js.
Access to them is wrapped in a bootstrap dropdown-menu. Three-level menu:
1. Monitoring object.
2. Business process that is being monitored.
3. The monitoring time interval, which is displayed in the chart in the format "execution time (in seconds)" - "execution date/time"
When you click on the last menu level, a modal window appears on the current page, in which the graph is displayed.
Actually the problem:
The chart opens as an image, that is, there is no backlight, all the values ​​of the points of the chart are immediately displayed, it turns out to be a mess.
At the same time, if the graph is displayed on a separate page, then it works as it should.
Menu code:

<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>

Everything in curly braces is Python code.
Code for displaying modal windows:
<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>

Now, a question.
How to make js work in modal window?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrew, 2014-02-04
@SkaN2412

Take 2: I just pasted the script into the window itself. Thus, it is executed when the window is loaded and, accordingly, all events work on its elements too :)

A
Andrew, 2014-01-25
@SkaN2412

Try after calling the window to bind all events attached to it, there is a function for this in jQuery

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question