將數據傳遞到Bootstrap 3 Modal

我有一個包含大量數據的表，並且我在每行的末尾放置了一個按鈕，用於觸發模式並將該行的唯一標識傳遞給模態。將數據傳遞到Bootstrap 3 Modal

我發現了這樣的回答：Passing data to a bootstrap modal

但它不會出現與引導3上班，我找不到這方面有任何數據在任何地方任何想法？

我使用列出的相同代碼：

頁眉：

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet"> 
<link href = "bootstrap/css/styles.css" rel = "stylesheet"> 
<script type="text/javascript"> 
$(document).on("click", ".open-AddBookDialog", function() { 
var myBookId = $(this).data('id'); 
$(".modal-body #bookId").val(myBookId); 
}); 
</script> 
</head>

身體：

<a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

模態：

<div class="modal" id="addBookDialog"> 
<div class="modal-header"> 
<button class="close" data-dismiss="modal">×</button> 
<h3>Modal header</h3> 

</div> 
<div class="modal-body"> 
<p>some content</p> 
<input type="text" name="bookId" id="bookId" value="" /> 
</div> 
</div>

結果頁面將打開莫代爾，但文字fie ld是空白的。

我忘了提，我有兩個jQuery和引導加載：

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src = "bootstrap/js/bootstrap.js"></script>

來源

2013-12-21 bryanx

你似乎做得對。要絕對確定，請''console.log'' myBookId'和$（「。modal-body #bookId」）''。他們是否包含他們應該做的？ – Lasse

我得到一個Uncaught ReferenceError：$沒有被定義，它指的是\t $（document）.on（「click」，「.open-AddBookDialog」，function（）{ – bryanx

如果沒有定義'$' ，那麼你還沒有將jQuery加載到頁面上，你將需要jQuery和bootstrap的JS。 – satchmorun

嘗試手動觸發模式，而不是使用數據API。

更新，像這樣的超級鏈接：

<a data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

然後調整jQuery代碼：

$(document).on("click", ".open-AddBookDialog", function (e) { 

    e.preventDefault(); 

    var _self = $(this); 

    var myBookId = _self.data('id'); 
    $("#bookId").val(myBookId); 

    $(_self.attr('href')).modal('show'); 
});

似乎爲我工作; jsFiddle @http://jsfiddle.net/4XJ54/

來源

2013-12-21 23:31:54

謝謝你，你的代碼幫助我找出錯誤，這是用戶錯誤令人傷心。 – bryanx

沒有data-toggle =「模式」它不工作，數據不能傳遞到模態。 –

@PareshGami這是否意味着是一個問題，還是你說這不起作用？如果是後者，包含的jsFiddle會傾向於不同意。 –

將數據傳遞到Bootstrap 3 Modal

回答

相關問題