通过唯一 id 将 MySQL 数据动态加载到 Bootstrap modal -CodeIgniter

Question

已经成功消除了我在add limit to data passed to bootstrap modal with foreach() in codeigniter 中提出的上一个问题中的问题，现在我发现自己遇到了该问题的残余。正如@webcrazymaniac 简洁地提出的那样；

The idea is to have a unique modal window, with it's unique id for each article, uniquely called with the corresponding button

根据Send parameter to Bootstrap modal window?中列出的解决方案，我应该能够达到我想要的效果，如上所说——改编为；

页面模态

    <!-- alert view -->
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog'>
  <!-- Modal content-->

  <div class='modal-content' id='#myModal<?php echo $a->art_id;?>'>   
    <div class='modal-header'>
      <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
      <h2 class='modal-title'>Title:&nbsp;<?php echo $a->title;?></h2>
    </div>
    <div class='modal-body'>
      <h3>Category:&nbsp;<?php echo $a->cat_name;?></h3>
      <h3>Date:&nbsp;<?php echo $a->public_date;?></h3>
      <h3>Content:&nbsp;<?php echo $a->description;?></h3>
    </div>      
    <div class='modal-footer'>
      <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
    </div>      
  </div>

</div>

jQuery 脚本

<script type="text/javascript">
$( document ).ready(function() {       
$('#myModal').on('show.bs.modal', function (e) { //Modal Event
var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button
$.ajax({
  type : 'POST',
   url : 'query.php', //Here you will fetch records 
   data :  'post_id='+ id, //Pass $id
   success : function(data){
     $('.form-data').html(data);//Show fetched data from database
     }
   });
  });
 });
</script>  

模态触发按钮

 echo "<a href='#myModal/".$a->art_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal' data-id='".$a->art_id."'>View</a> &nbsp;".  

query.php

<?php
//Include database connection here
$dsn = 'mysql:host=localhost;dbname=articles;charset=utf8';
$user ='';
$pass ='';
$options = array(PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_EMULATE_PREPARES, false);      
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);
}

if($_POST['art_id']) {
    $id = $_POST['art_id'];
    $category = $_POST['cat_name'];
    $public_date = $_POST['public_date'];
    $description = $_POST['description'];


 // Run the Query
$sql = "SELECT `art_id`, `cat_name`, `public_date`, `description` FROM `articles` WHERE `art_id`='?'";
$stmt = $pdo->prepare($sql);        
// Fetch Records
$stmt->execute();
}
?>  

调用模态框一切正常，但这种尝试只会让我获得所有（绿色）按钮点击的页面上的第 5 个结果。作为（也许）一个重要说明，我无法将data-id='#myModal<?php echo $a->art_id;?> 装入模态触发按钮，因为它破坏了模态的弹出窗口。我知道我可能必须拉一个破坏模式才能像这样更改为另一个 ID；

    $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
 });  

现在，请注意，我不是特别熟悉 jQuery，所以我的想法是基于几个小时的阅读和实验。仔细研究了许多示例后，我仍然对确切如何使这一切正常工作感到茫然。无论我是直接尝试PHP 还是jQuery，我都得到了相同的结果（点击绿色按钮时显示的第一个或第五个结果的一个因素），我真的被困住了。似乎我在这类问题中读到的每个问题都让我陷入了当前的困境，如果我使用PHP 版本解决方案，我会为页。 jQuery 解决方案返回每个视图按钮的第五页结果。 这确实很奇怪...... 甚至没有像这样将 jQuery 更改为简化的js；

<script type="text/javascript">
//jQuery Library Comes First
//Bootstrap Library
($ 'a[data-toggle=modal]').click ->
target = ($ @).attr('data-target')
url = ($ @).attr('href')
($ target).load(url)

我正在拉着那个 sn-p 来救我，但是，没有。这个也没有。

<script type="text/javascript">
 //jQuery Library Comes First
 //Bootstrap Library
$(document).ready(function(){

$('#myModal').on('shown.bs.modal', function () {

    var $modal = $(this),
    modal_title = $(this).data('modal-title'),
    modal_params = $(this).data('modal-params');

    if(typeof modal_title !== typeof undefined && modal_title !== false) {
        title = modal_title;
    }
    else{
        title = 'Title';
        }

    $.ajax({
        cache: false,
        type: 'POST',
        url: 'query.php',
        data: modal_params,
        success: function(data) {
            $modal.find('.modal-title').html(title);
            $modal.find('.modal-body').html(data);
         }
      });
    });

  });
</script>
//crabbed from 
//https://stackoverflow.com/questions/35702374/bootstrap-modal-with-individual-attributes  

但是，作为课程的标准，没有爱......要么是Human Error要受到责备，要么我只是错过了一些明显隐藏在全视图中的东西。今天阅读了 200 多个问题后，我在重新阅读此内容以进行格式化等方面遇到了问题（哈哈！）。学到了很多，但仍然卡住了。

更新

自从我查看@progrAmmar 的建议以来，我回去尝试改进我的方法。关键问题是如何使jQuery重新加载进程；

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');  

清除模态，以便在单击另一个按钮时，相应的表格行内容像水一样流入。我在确定jQuery 的正确顺序时遇到了问题——就目前而言；

    <script type="text/javascript">
    //jQuery Library Comes First
    //Bootstrap Library
     $(document).ready(function() {
    // Fill modal with content from link href
    $('.myModal').on('click', function(e) {
        var link = $(this).data('href');
    $('#myModal').modal('show');
    $('#myModal .modal-body').load(link );

    $('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');

    });
  })
</script>  

结果如下图：

如果您查看图像的左下角，您会看到相应的 id 值为3，但打开的模式正在从 id 值5 中提取内容。我仍然有调用模态和显示表格行的过程顺利进行，但是模态重新加载过程是弯曲的。建议？在这一点上我没有想法。

@progrAmmar，我回复了您提出的建议，但以下是阻碍我完全适应的原因；

文章/索引（控制器/索引功能）

public function index()
{
    $modal = $this->article_model->modal($art_id=NULL);
    $category = $this->category_model->listAll();
    $article =$this->article_model->index($this->limit);
    $total_rows=$this->article_model->count();

    $config['total_rows']=$total_rows;
    $config['per_page']=$this->limit;
    $config['uri_segment']=3;
    $config['base_url']=site_url('article/index');

    $this->pagination->initialize($config);
    $page_link =$this->pagination->create_links();
    $this->load->view('admin/article',compact('article', 'page_link', 'category', 'modal'));

}  

article_model.php

public function modal($art_id)
    {
      $data = array();
      $this->db->select('art_id', 'cat_name', 'public_date', 'description');
      $this->db->from('tbl_article');
      $query = $this->db->get();
       if($query->num_rows() > 0)
       {
         $results = $query->result();
       }
      return $results;

    }  

仍在试图找出针在这里的位置。再次感谢您的建议@progrAmmar。

更新烦恼

回到纯粹的PHP，因为jQuery 并没有为我做任何不同的事情——即使在玩弄了@progrAmmar 的代码之后。现在我回到了零点，又读了两个小时（主要是@jQuery 论坛）。 :sigh:

差不多了....

在查阅 BS 3.3.5 文档后，我知道我的答案在 Varying modal content based on trigger button 部分。试图推断这一点；

//Modal window trigger button  
echo "<a href='".base_url()."article/$a->art_id' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal' data-id='".$a->art_id."'>View</a> &nbsp;".  

//jQuery code  
 $('#myModal').on('show.bs.modal', function (event) {
 var button = $(event.relatedTarget) // Button that triggered the modal
 var id = button.data('id') // Extract info from data-* attributes
 var href = button.data('href') // Extract info from data-* attributes
 var target = button.data('target') // Extract info from data-* attributes
 // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Title:')
modal.find('.modal-body').val('Category:')
modal.find('.modal-body').val('Date:')
modal.find('.modal-body').val('Content:')
$('#myModal > div.modal-body).empty();
})  

我很确定我做错了，因为我无法理解任何尝试的推断 - 一直在研究 SO 上的其他解决方案示例，但仍在研究上述编码的方法。运动研究...

推断@progrAmmar 提供的代码；

Controller Article(.php)
------------------------

    public function index()
{
       $data['modal'] = $this->article_model->modal($art_id); // Gets all the data 
       $this->load->view('('admin/article',compact('article', 'page_link', 'category', 'modal') $data);
    }  

    View article(.php)
    ------------------

    <div class='modal fade' id='myModal' role='dialog'>
      <div class='modal-dialog'>
         <!-- Modal content-->

    <div class='modal-content' id='myModal'>      
       <div class='modal-header'>
         <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
         <h2 class='modal-title'>Title:&nbsp;<?php echo $a->title;?></h2>
    </div>

    <div class="modal-body">
      <div class="row">
        <div class="col col-md-12">
          <h3>Category:&nbsp;<?php echo $a->cat_name;?></h3>
      <h3>Date:&nbsp;<?php echo $a->public_date;?></h3>
          <h3>Content:&nbsp;<?php echo $a->description;?></h3>
          <input type="hidden" id="hidId" value="<?php echo $a->art_id;?>" />
       </div>
    </div>
    </div>
     <div class='modal-footer'>
      <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
    </div>  

//Finally call the html via JavaScript
 $.get(window.base_url + 'index.php/article/'+ id, function (data) {
      $('#myModal' > div.modal-body).empty();
      $('#myModal').html('data');
      $('#myModal').modal('show');
 }  

做了一些调整以适应这次尝试，但没有任何变化，因为第五页结果永远不会被另一个内容 ID 撞出，如下所示；

之前还是卡在原来的位置上……转圈圈我们去ミ●﹏☉ミ

文档中我感兴趣的部分；

  $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
 // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
 var modal = $(this)
 modal.find('.modal-title').text('New message to ' + recipient)
 modal.find('.modal-body input').val(recipient)
})  

我的主要问题是； 我如何推断Update the modal's content？ 这本质上是我阻抗的核心，而不是通过对 BS 文档的深入搜索找到的。如果我可以同步某种方式来强制重新加载模式中的内容，我有我的答案。事实上，我发现的最接近如何（可能）处理的任何示例是这里的一篇文章（抱歉忘记了哪个），详细说明了如何通过定位 src 元素在模态中重新加载图像；

//And then you just change the src attribute of the picture element from your function.
var picture = button.data('picture')    
$('#picture').attr('src',picture);  

就是这样！*（理论上）...在上面的示例和Varying modal content based on trigger button 示例之间，我正在失去它。我不敢相信我不能仅仅建立启动强制重装所需的逻辑连接。我只是没有看到它，到目前为止我使用的每个示例都让我保持在同一个地方。

浏览了 50 多个 JQuery 代码示例，但没有一个能够激活任何功能，因此我不再尝试将其用作任何类型的解决方案。此主题下的NONE 答案都有效（甚至有一点）。这是我职业生涯中第一次完全被难住，无处可去。

以下是我尝试过的事情：

情况1

最初处理一个HTML 表<table class="table table-condensed"> 列出'art_id', 'title', 'cat_name', 'public_date', 'image' 的articles db 元素，表元素是从带有foreach ($article->result() as $a){ 的db 中提取的。

表格以activity 按钮结束，其中第一个是 BS 模态触发器（无法更改表格在 PHP 中回显 - 只是把它搞砸了）；

echo "<a href='".base_url()."article/#myModal/$a->art_id' button class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal' data-id='".$a->art_id."'>View</a> &nbsp;".  

情况2

模态数据切换（如上所示）是模态弹出的触发器，位于页面底部；

<!-- alert view -->
<div id="myModal<?php echo $a->art_id" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
  <!-- Modal content-->
  <?php
  $i=0;
  foreach ($article->result() as $a){    
  ?>
  <div id="#myModal<?php echo $a->art_id ?>" class="modal-content">  
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h2 class='modal-title'>Title:&nbsp;<?php echo $a->title;?></h2>
    </div>
    <div class='modal-body'>
      <h3>Category:&nbsp;<?php echo $a->cat_name;?></h3>
      <h3>Date:&nbsp;<?php echo $a->public_date;?></h3>
      <h3>Content:&nbsp;<?php echo $a->description;?></h3>
    </div>      
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>      
  </div>
  <?php
     if(!$i=0) break;
  $i++;
  }
  ?>
</div>

如果模态 foreach 没有像这样既包含又增强；

    <?php
  if(!$i=0) {
    break;
  } else {
  $i++;  
  }}
  ?>  

然后模态将所有$a->art_id 元素同时拉到视图中，就像这样；

而且，即使底部有必要的jQuery（在模态之后）；

<script type="text/javascript">
jQuery(document).ready(function($) {
    jQuery(document).ready(function($) {
    $('.myModal').click(function(event){
      var $link = $(this);
      new BootstrapDialog({
    title   :   'Title : ' + $link.attr('href'),
    content :   $('<div>Loading...</div>').load($link.attr('href')),
    buttons :   [{
        label   :   'Close',
        onclick :   function(dialog){
            dialog.close();
        }
    }, {
        label   :   'View',
        cssClass:   'btn-primary',
        onclick :   function(dialog){
            alert('The content of the dialog is: ' + dialog.getBody().html());
            dialog.close();
        }
    }]
}).open();

event.preventDefault();
   });
  });
 });
 </script>  
//crabbed from - https://stackoverflow.com/questions/14045515/how-can-i-reuse-one-bootstrap-modal-div/14059187#14059187 

情况3

没有任何效果...。 jQuery 不会破坏和重新加载模式，所以我只从页面上的第一个按钮获得第一个页面结果（完全正确的内容和 ID）。最令人沮丧的是，如果我将鼠标悬停在每个按钮上，则会返回正确的内容 ID。我认为可以肯定地说代码没有任何问题 - 我必须调查 为什么 特定代码在页面上不起作用。令人困惑，因为我已经在使用jQuery；

    <script src="<?php echo base_url(); ?>asset/js/jquery.js"></script>
<script src="<?php echo base_url(); ?>asset/js/jquery-latest.min.js"></script>  

将这两行放在模态框上方，jQuery 放在页面底部。似乎某处发生了冲突，阻止了 jQuery 驱动的脚本触发。我什至可以看到的唯一冲突是CKEditor 加载在jQuery 上方。

即使切换到另一个代码块；

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.myModal').click(function(){
$(this).find('.inner').clone().appendTo('#myModal .modal-content');
$('#myModal .modal-title .modal-body .control-group.hide').show();
$('#myModal').modal();
});

 $('#myModal').on('hidden', function(){
 $('#myModal .inner').remove();
});
});
</script>//forgotten SO crabbing  

我不断得到相同的结果。自从认输以来，我遇到了几个 SO 解决方案，它们提出了我想要的场景，但我永远无法真正实现它们，这让我比德克萨斯人靴子里的响尾蛇更生气。这些问题不仅与我的完全相似，而且（几乎）都得到了@+1 或更好的投票，而所选的解决方案并没有让我摆脱瓶颈。

这是一个我希望看到解决的问题，因为我知道有一个解决方案，并且从众多的 Fiddles 和 Plunkers 来看，它们在本质上都是相似的，但我没有略有不同'无法雇用。

Answer 1

为数据调用 MODAL 的最简单（可能也是最简单）的方法是从服务器调用 HTML。

为您的模型创建一个单独的视图。 将数据调用到其中，从控制器加载模型。

以下是我使用 codeigniter 调用 Modal 的方式

控制器

public function EditData($id)
{
    $data['entity'] = $this->Home_model->getData($id); // Gets all the data
    $this->load->view('Home/modal_data', $data);
}

views/Home/modal_data.php

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Edit <?= $entity['name'] ?></h4>
</div>

<div class="modal-body">
    <div class="row">
        <div class="col col-md-12">
            <label>Name</label>
            <input type="text" id="txtName" class="form-control" value="<?= $entity['name'] ?>" />
            <input type="hidden" id="hidId" value="<?= $entity['id'] ?>" />
        </div>
    </div>

</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success has-spinner" id="btnSave">
        <span class="spinner"><i class="glyphicon glyphicon-spin glyphicon-refresh"></i></span>Save
    </button>
</div>

确保你的页面上有一个模态 div 来调用 html。

views/Home/index.php

<html>
.
.
.
    <body>
        <div id="home_modal" class="modal fade" role="dialog">
              <div class="modal-dialog">
                  <div class="modal-content" id="home_modal_cont">
                  </div>
               </div>
         </div>
    </body
</html>

最终通过 JavaScript 调用 html

$.get(window.base_url + 'index.php/home/EditData/'+ id, function (data) {
        $('#home_modal_cont').empty();
        $('#home_modal_cont').html(data);
        $('#home_modal').modal('show');
}