2016-01-20 130 views
0

我有一个问题来实现表内的引导弹出对话框。这是我从网上取得的popover代码。表中的引导弹出对话框

$('.main-attributes').popover({ 
    html: true, 
    container: 'body', 
    placement: 'auto top', 
    trigger: 'manual', 
    content: function() { 

     var H = $('#div_scoreselector'); 

     return $(H).html(); 
    } 
}) 
$('.manage-range').on('click', function (e) { 
    var ma = $(this).parents('.main-attributes'); 
    $('.main-attributes').not(ma).popover('hide'); 
    $(ma).popover('toggle'); 
    var $this = $(this); 
    $('.main-attributes').off('shown.bs.popover').on('shown.bs.popover', function() { 
     $('.popover .save').data('context', $this); 
    }); 
    e.stopPropagation(); 
}); 

$(document).on('click', '.save', function() { 
    var $context = $(this).data('context'); 
    var fromval = $('.popover #fromvalue').val(); 
    var toval = $('.popover #tovalue').val(); 
    $context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval); 
}); 

当我尝试使用上面的代码来实现简单的弹出窗口功能时,它可以工作。例如:

<div class='hidden' id='div_scoreselector'> 
    <div> 
     <h5>Are you sure?</h5> 
     <div align="center"> 
      <button class="btn-dark-grey btn">OK</button> 
      <button class="btn btn-red save">Cancel</button> 
      <br/> 
     </div> 
     </div> 
</div> 


    <div class='main-attributes'> 
      <img id='reset' value='reset' src='/img/some_icon.png' width='30' height='30' key='key' class='manage-range' /> 
    </div> 

然而,当我尝试使用代码,从阿贾克斯表响应,没有发生。我可以看到图标,但是当我点击它时什么都没有发生。目前,我只希望popover窗口能够打开。之后,我将执行其余的代码。任何人都知道为什么它没有打开(我的图标位于retTable内)。

function get_af_status() { 
    var ex = document.getElementById('status_table'); 
    if ( $.fn.DataTable.fnIsDataTable(ex)) { 
     var oTable = $('#status_table').dataTable() 
     oTable.fnClearTable(); 
     oTable.fnDraw() 
     oTable.fnDestroy(); 
    } 

    $.ajax(
     { 
      url : '/status', 
      type: "GET", 
      success:function(data, textStatus, jqXHR) 
      { 
       theRows = extract_status_data(data) 
       $("#status_table tbody").html(theRows) 
      }, 
      error: function(jqXHR, textStatus, errorThrown) 
      { 
       alert('error') 
      } 
     }); 
    } 

function extract_status_data(jsonDataRaw){ 
    jsonResultSect = jsonDataRaw['result'] 
    retTable = "" 
    retText = "ret text <br/>" 
    for(key in jsonResultSect){ 
     stat = jsonResultSect[key] 
     a = stat['a'] 
     b = stat['b'] 
     c = stat['c'] 
     d = stat['d'] 
     e = stat['e'] 

     retTable += "<tr><td><div class='main-attributes'><img id='reset_" + key + "' value='reset' src='/img/some_icon.png' width='30' height='30' key='key' class='manage-range' /></div></td><td>" + key + "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + d + "</td><td>" + e + "</td></tr>" 

} 
    return retTable 
} 

请指教。

回答

0

很可能它已经在桌子内部开了。在浏览器中检查代码以查看它是否已打开,并可能更改单元格的溢出风格。