表中的引導彈出對話框

我有一個問題來實現表內的引導彈出對話框。這是我從網上取得的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 
}

請指教。

來源

2016-01-20 Omri

很可能它已經在桌子內部開了。在瀏覽器中檢查代碼以查看它是否已打開，並可能更改單元格的溢出風格。

來源

2016-01-20 14:08:14 Greg

表中的引導彈出對話框

回答

相關問題