Answer the question
In order to leave comments, you need to log in
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>
<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>
Answer the question
In order to leave comments, you need to log in
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 :)
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question