通过唯一ID动态加载MySQL数据到Bootstrap模态-CodeIgniter
在我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'>×</button>
<h2 class='modal-title'>Title: <?php echo $a->title;?></h2>
</div>
<div class='modal-body'>
<h3>Category: <?php echo $a->cat_name;?></h3>
<h3>Date: <?php echo $a->public_date;?></h3>
<h3>Content: <?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> ".
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中并不是特别熟悉，所以我提出的是基于几个小时的阅读和实验。在仔细研究了很多例子之后，我仍然不知道如何使这一切完全正常。完全。我真的卡住了，因为我得到了相同的结果（关闭了显示第一个或第五个点击绿色按钮的结果）我是否正在尝试直接{{1} }或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)
但是，作为课程的标准，没有爱...... 要么<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
要么责备，要么我只是遗漏了一些明显隐藏的东西视图。今天阅读了200多个问题，我在重新阅读格式等方面遇到了问题（等等！）。得知吨，但仍然坚持。
更新
在我看了@progrAmmar建议的那段时间之后，我回过头去尝试改进我的方法。关键问题是如何进行Human Error重新加载过程;
jQuery清除模态，以便在单击另一个按钮时，相应的表行内容像水一样流动。我在确定$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
的顺序是正确的时候遇到了问题 - 正如现在一样;
jQuery结果如下：
如果您查看图片的左下角，您会看到相应的ID值为 <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中提取内容。我仍然有调用模态和显示表格行的过程顺利进行，但模态重新加载过程是弯曲的。建议？我现在没有想法。
@progrAmmar ，我回到了你提出的建议，但这些是阻止我完全适应的以下因素;
文章/索引（控制器/索引功能）
5article_model.php
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'));
}
还在试图弄清楚针在哪里。再次感谢您的建议@progrAmmar。
更新公告
回到纯粹的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;
}
，因为PHP并没有为我做任何不同的事情 - 即使在使用@ progrAmmar的代码之后也是如此。现在我离开了零点并再读了两个小时（主要是@jQuery论坛）。 ：叹息：
ALMOST THERE ....
在咨询BS 3.3.5文档后，我知道我的答案在jQuery部分。试图推断这个;
Varying modal content based on trigger button我很确定我做错了，因为我无法解决任何尝试的推断 - 一直在仔细研究SO的其他解决方案示例，但我仍在研究方法以上编码。动议研究......
推断出@progrAmmar所提供的代码;
//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> ".
//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();
})
有点玩杂耍以适应这种尝试，但没有变化，因为第五页结果从未被另一个内容ID撞出，如下所示;
在...之前仍然停留在同一位置我们去ミ●﹏☉ミ
我对文档感兴趣的部分;
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'>×</button>
<h2 class='modal-title'>Title: <?php echo $a->title;?></h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col col-md-12">
<h3>Category: <?php echo $a->cat_name;?></h3>
<h3>Date: <?php echo $a->public_date;?></h3>
<h3>Content: <?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');
}
我的主要问题是;
我如何推断 $('#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)
})
？
THIS 本质上是我阻抗的核心，而不是通过对BS文档的深入搜索来定位。如果我可以同步某种方式强制重新加载模态中的内容，我有我的答案。事实上，我发现任何关于如何（可能）接近这个的例子的最接近的是这里的帖子（抱歉忘了哪一个）详细说明了如何通过定位Update the modal's content元素在模态中重新加载图像;
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);
例子之间，我正在失去它。我无法相信我只能进行所需的逻辑连接以启动强制重装。我只是没有看到它，到目前为止我使用的每个例子都让我在同一个地方。
经历了五十多个JQuery代码示例，其中没有一个确实蹲下来激活任何功能，所以我试图将它用作任何类型的解决方案。本主题下的答案无有效（甚至一点点）。这是我职业生涯中第一次完全被无处可折叠困扰。
以下是我尝试过的事情：
情况1
最初处理Varying modal content based on trigger button表HTML列出<table class="table table-condensed">的{{1}} db元素，表格元素从数据库中用articles挖出。
该表以'art_id', 'title', 'cat_name', 'public_date', 'image'按钮结束，其中第一个是BS模式触发器（无法更改在foreach ($article->result() as $a){中回显的表格 - 只是将其全部搞砸了）;
activity情况2
模态数据切换（如上所述）是模式弹出的触发器，位于页面底部;
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> ".
并非如此包含和扩充;
<!-- 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">×</button>
<h2 class='modal-title'>Title: <?php echo $a->title;?></h2>
</div>
<div class='modal-body'>
<h3>Category: <?php echo $a->cat_name;?></h3>
<h3>Date: <?php echo $a->public_date;?></h3>
<h3>Content: <?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情况3
没有工作...... 。 jQuery没有破坏和重新加载模式，所以我只能从页面上的第一个按钮获得第一页上的结果（完全正确的内容和ID）。最令人沮丧的是，如果我将鼠标悬停在每个按钮上，则会返回正确的内容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
将这两行放在模态上方，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我一直得到相同的结果。自从放弃以来，我已经找到了几个SO解决方案，这些解决方案提出了我想要的方案，但是我无法实现这些方案，这让我感到愤怒而不是德州人的响尾蛇＆＃39;开机。这些问题不仅与我的问题完全相似，而且（几乎）都得到了@ +1或更高的评价，所选择的解决方案并没有从我的瓶颈中解脱出来。
这是一个我希望看到的问题，因为我知道这是一个解决方案，而且来自众多的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
，他们＆＃39;所有类似的性质都有轻微的变化，而我却无法使用。
1 个答案:
答案 0 :(得分：2)
为数据调用MODAL最简单（也可能是最简单）的方法是从服务器调用HTML。
为您的模型创建单独的视图。 将数据调入其中，从控制器加载模型。
这是我如何用codeigniter调用我的模态
<强>控制器
public function EditData($id)
{
$data['entity'] = $this->Home_model->getData($id); // Gets all the data
$this->load->view('Home/modal_data', $data);
}
<强>视图/主页/ modal_data.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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。
<强>视图/主页/ 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');
}
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？