Fatal编程技术网
  • php/
  • Php 按唯一id将MySQL数据动态加载到Bootstrap modal-CodeIgniter中

Php 按唯一id将MySQL数据动态加载到Bootstrap modal-CodeIgniter中

php jquery codeigniter

Php 按唯一id将MySQL数据动态加载到Bootstrap modal-CodeIgniter中,php,jquery,codeigniter,bootstrap-modal,Php,Jquery,Codeigniter,Bootstrap Modal,在成功地从我之前提出的一个问题中消除了这个问题之后，我现在发现自己有了这个问题的剩余部分。正如@webcrazymaniac简洁地提出的 这个想法是要有一个唯一的模式窗口，每个文章都有一个唯一的id，通过相应的按钮可以唯一地调用它 根据中列出的解决方案，我应该能够达到如上所述的预期效果-改编为 在页面模式上 <!-- alert view --> <div class='modal fade' id='myModal' role='dialog'> <div

在成功地从我之前提出的一个问题中消除了这个问题之后，我现在发现自己有了这个问题的剩余部分。正如@webcrazymaniac简洁地提出的

这个想法是要有一个唯一的模式窗口，每个文章都有一个唯一的id，通过相应的按钮可以唯一地调用它

根据中列出的解决方案，我应该能够达到如上所述的预期效果-改编为

在页面模式上

    <!-- 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
，所以我的想法是基于几个小时的阅读和实验。仔细研究了无数的例子后，我仍然不知道如何使这一切都起作用。无论我是直接尝试
PHP
还是
jQuery
，我都会得到相同的结果（通过单击绿色按钮显示第一个或第五个结果的一个因素），我真的被卡住了。似乎我在这类问题中读到的每一个问题都会让我陷入当前的困境，如果我使用
PHP
version解决方案，我会返回页面上每个视图按钮的第一页结果
jQuery
solution返回每个视图按钮的第五页结果这确实很奇怪…甚至没有像这样更改简化
js的jQuery


<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)


清除模式，以便在单击另一个按钮时，相应的表行内容会像水一样流动。我很难弄清楚对于
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>  


article_model.php


<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;".  



<?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();
}
?>  



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'));

}  



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;

    }  



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');
 }  


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

更新烦恼

回到纯粹的
PHP
，因为
jQuery
对我来说没有什么不同，即使是在玩了@progrAmmar的代码之后。现在我回到了归零地，又读了两个小时的书（主要是@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;".  



<?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();
}
?>  



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'));

}  



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;

    }  



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');
 }  


在查阅BS 3.3.5文档后，我知道我的答案在
基于触发按钮改变模式内容部分。试图推断这一点


//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();
})  


我的主要问题是,；
如何推断
更新模态的内容
？
这本质上是我阻抗的核心，不是通过深入搜索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);  


就这样！*（理论上）……在上述例子和<代码>基于触发按钮< /代码>的不同模态内容中，我在路上失去它。我真不敢相信我不能只进行发射原力所需的逻辑连接。我只是不明白，迄今为止我使用的每个例子都让我处于相同的位置。


<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;".  



<?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();
}
?>  



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'));

}  



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;

    }  



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');
 }  


通过50多个JQuery代码示例，没有一个能够激活任何功能，因此我不再尝试将其用作任何解决方案本主题下的答案没有一个有效（甚至有一点）。这是我职业生涯中第一次完全无路可走

以下是我尝试过的一些事情：

情景1
最初处理
HTML
表
列出
文章
数据库元素
'art\u id'，title'，cat\u name'，public\u date'，image'
，表元素从数据库中用
foreach（$article->result（）作为$a）{

该表以
activity
按钮结束，其中第一个按钮是BS模式触发器（无法更改在
PHP
中呼出的表-只是将其全部弄糟）

然后，模态将所有
$a->art\u id
元素同时拉入视图，如下所示



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

将这两行放在modal和页面底部的
jQuery
的正上方。似乎在某个地方存在冲突，阻止了
jQuery
驱动的脚本启动。我甚至可以看到的唯一冲突是加载在
jQuery
上方的
CKEditor

即使切换到另一个代码块


<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  




jQuery（文档）.ready（函数（$）{
$（'.myModal'）。单击（函数（）{
$（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（）；
});
});
//忘了这么爱抓螃蟹


我一直得到同样的结果。自从我认输后，我想出了几个这样的解决方案，这些解决方案暗示了我想要的情景，但我永远无法实际实现它们，这让我比德克萨斯人靴子里的响尾蛇还要愤怒。这些问题不仅与我的问题完全相似，而且（几乎）所有人都投票支持@+1或更高，而所选的解决方案并没有让我从瓶颈中解脱出来

这是一个我希望看到澄清的问题，因为我知道有一个解决方案，从众多的
Fiddle
s和
Plunker
s中，它们在本质上都是相似的，只是有些细微的变化，我无法采用。
最简单（可能也是最容易的）调用数据模式的方法是从服务器调用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');
}