物化标签在加载到模态时不起作用

时间:2016-05-24 10:24:48

标签: javascript jquery html css materialize

所以我有Materialize CSS的项目,在我的html中我有触发模态的按钮,一些数据,包括带有标签的脚本,应该加载到这个模态中。

我的代码如下所示:

    $('.modal-trigger').click(function () {
        var id = $(this).data('id');
        animatedOpenModal($(this).attr('id'),'modalbox','open');
        $.get('{{action("Admin\Controller@getUser")}}'+'/'+id).success(function(data){
            $('.modal-content').html(data);
        }); 
    });

加载到模态中的视图与在materialise网站上作为示例给出的视图相同:

  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>
  <script>
    $(document).ready(function(){
      $('ul.tabs').tabs();
    });
  </script>

但它不起作用,所有标签内容同时显示,一个接一个。我已经尝试设置超时并将控制器操作中的get()链接更改为直接操作,但它不起作用。将标签加载到页面的静态元素(例如,进入“正文”)使一切正常,但我需要这些标签位于模态内。可能是什么问题,我怎么可能解决它?

非常感谢任何可能的帮助。

2 个答案:

答案 0 :(得分:1)

我只是在所有这些内容中添加了ID:将barplot = toplot_df.plot()更改为import pandas as pd import io import matplotlib import matplotlib.pyplot as plt test=u"""Cell,Value Bcells,0.056304 DendriticCells,0.3155388 Macrophages,0.131430 """ tableau10=[ "#17BECF", "#BCBD22", "#7F7F7F", ] toplot_df = pd.read_csv(io.StringIO(test)) toplot_df.set_index('Cell',inplace=True) xlabels = toplot_df.index.values barplot = toplot_df.plot(kind="bar", figsize=(17,17), \ color = tableau10, \ width=0.7,\ fontsize = 30,\ legend=False, ylim = (0,0.5), subplots=False, zorder=2) ##### This is all I added ax = plt.gca() ax.set_xticklabels(xlabels, rotation=30, ha='right') # How to to make this to the back plt.axhline(y=0.1, linewidth=1, color='r',zorder=1) plt.xlabel("") plt.ylabel("Score", fontsize=30, fontweight="bold") plt.show() 并解决了我的问题

答案 1 :(得分:1)

只需在脚本中添加以下代码:

$('.modal-trigger').leanModal({
   ready: function () {
      $('ul.tabs').tabs();
   }
});