帶有AJAX調用的Bootstrap Dynamic Modals

我使用codeigniter v3和bootstrap v3。
我有一個消息表和表中的每條消息，當點擊詳細信息按鈕時，引導程序模態顯示詳細信息。
在for循環中，我打印表格行和每一行（在循環的結尾），我將整個引導模態結構。
我的問題是：這怎麼能用ajax調用？我的意思是，我沒有爲每個表格行（每條消息）放置所有模態代碼，並且每次點擊詳細信息按鈕時，我都會使用ajax處理顯示模式。
感謝您的關注。

解決：
我找到一個簡單的，我認爲在引導官方網站更好的辦法：使用數據 - 屬性。 我展示它與誰可能無法達到較好的解決方案的工作例如：帶有AJAX調用的Bootstrap Dynamic Modals

假設我們要填補一些數據的表體（如我的問題）：

//just table body code 
<tbody> 
<?php foreach($fields as $field): ?> 
    <tr> 
    <td><?php $field->some_field; ?></td> 
    //other <td> elements 
    <td> 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
     data-time="<?php echo $field->time; ?>">Show Details</button> 
    </td> 
    </tr> 
<?php endforeach; ?> 
</tbody>

所以在一個循環，我讀取數據（在控制器中，使用模型的方法獲取，並傳遞給$ data ['fields']查看）。現在爲了在模態中顯示一些細節，我使用HTML5數據屬性。假設，我想在模態中顯示時間。正如你在上面的代碼中看到，我把時間字段中的數據時間：

data-time="<?php echo $field->time; ?>"

現在我創建模式爲模板（您可以看到自舉官網整體模態組織），並把它退出循環（所有表格行的一種模式;動態數據）。在下面的代碼，我把模態體的元素（如佔位符）：

//... in the modal body section 
<h4 id="time"></h4>

這個元素沒有內容，是因爲我想申請取回每一行時間，把它放在這個元素。注意這對於定義一個id是實用的。現在一些腳本：

//first load jquery 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#myModal').on('show.bs.modal', function(event){ 
    var btn = $(event.relatedTarget); // find which button is clicked 

    var time = btn.data('time'); //get the time data attribute 

    $('#time').text(time); //put the data value in the element which set in the modal with an id 
    }); 
}); 
</script>

你可以定義這樣更多的數據屬性和檢索。

來源

2016-03-07 Parsa

我不會爲你寫的代碼，但給你帶路：

你只需要爲整個頁面一個模式，它就像一個模板。
您需要在模態中顯示相同的數據/信息。這些數據可以通過HTML中的Javascript/jQuery獲取。我更喜歡數據屬性。喜歡的東西：

數據模式的標題= 「我的標題」數據模式-CONTENT = 「我的內容」

現在，你在你的模式模板注入這個數據和通過Javascript打開模式。

來源

2016-03-07 05:59:08 Joerg

帶有AJAX調用的Bootstrap Dynamic Modals

回答

相關問題