MYSQL以模态选择ID
问题描述 投票：0回答：3
请帮我！我没有足够的jquery经验来自己找到这个解决方案。
我从数据库中显示一个表。我有2行，图像（徽标）正确显示。当我想更改徽标时，我打开模态窗口。
我的问题是：在模态窗口中，如何显示我想要修改的当前徽标的图像？
我认为我只需要使用行的ID来进行“sql select”，但经过大量的研究后，我投降了。
行的ID在模态窗口中很好地显示，但不可能在变量中使用它来使sql重新出现。
一个例子 qazxsw poi
在我的代码下面：
3个回答
投票
确保<!DOCTYPE html>
<html lang="en">
<head>
<?php
// Create connection
include('../connection.php');
// Request
$requete = $pdo->prepare( '
SELECT *
FROM setting S;'
);
$requete->execute();
$datas = $requete->fetchAll();
?>
<!-- Bootstrap core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- FooTable Bootstrap CSS -->
<link href="https://fooplugins.github.io/FooTable/compiled/footable.bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="https://fooplugins.github.io/FooTable/docs/css/docs.css" rel="stylesheet">
<script src="https://fooplugins.github.io/FooTable/docs/js/demo-rows.js"></script>
</head>
<body class="docs">
<!-- Header -->
<!-- Content -->
<div class="container">
<div class="docs-section">
<div class="example">
<table id="editing-example" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th data-name="id" data-breakpoints="xs" data-type="number">ID</th>
<th data-name="nom_config">Name</th>
<th data-name="img_logo_content">Logo</th>
</tr>
</thead>
<tbody>
<?php foreach( $datas as $data ) { ?>
<tr data-expanded="true">
<td>
<?php echo $data->id; ?></td>
<td>
<?php echo $data->nom_config; ?></td>
<td>
<?php echo '<img height="20" src="data:image;base64,' . $data->img_logo_content . '">' ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<style scoped>
.form-group.required .control-label:after {
content: "*";
color: red;
margin-left: 4px;
}
</style>
<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="editor-title">Add Row</h4>
</div>
<div class="modal-body">
<input type="number" id="id" name="id" class="hidden" />
<div class="form-group required">
<label for="nom_config" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nom_config" name="nom_config" required>
</div>
</div>
<?php
//*************************************************************
// PROBLEME HERE !!! Find the logo picture from sql database
$sql = "select * from setting WHERE id='" . $id . "'";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
$img_logo= '<img height="50" src="data:image;base64,' . $row[22] . '">';
}
//*************************************************************
?>
<div class="form-group">
<label for="img_logo_content" class="col-sm-4 control-label">logo</label>
<div class="col-sm-8">
<?php // Display Logo
echo $img_logo;
?>
<input type="file" class="form-control" id="img_logo_content" name="img_logo_content" placeholder="Votre Logo">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://fooplugins.github.io/FooTable/docs/js/prism.js"></script>
<script src="https://fooplugins.github.io/FooTable/docs/js/ie10-viewport-bug-workaround.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://fooplugins.github.io/FooTable/compiled/footable.js"></script>
<!-- Initialize FooTable -->
<script>
jQuery(function($) {
var $modal = $('#editor-modal'),
$editor = $('#editor'),
$editorTitle = $('#editor-title'),
ft = FooTable.init('#editing-example', {
editing: {
enabled: true,
addRow: function() {
$modal.removeData('row');
$editor[0].reset();
$editorTitle.text('Add a new row');
$modal.modal('show');
},
editRow: function(row) {
var values = row.val();
$editor.find('#id').val(values.id);
$editor.find('#nom_config').val(values.nom_config);
$editor.find('#img_logo_name').val(values.img_logo_name);
$modal.data('row', row);
$editorTitle.text('Edit row #' + values.id);
$modal.modal('show');
},
deleteRow: function(row) {
if (confirm('Are you sure you want to delete the row?')) {
row.delete();
}
}
}
}),
uid = 10;
$editor.on('submit', function(e) {
if (this.checkValidity && !this.checkValidity()) return;
e.preventDefault();
var row = $modal.data('row'),
values = {
id: $editor.find('#id').val(),
nom_config: $editor.find('#nom_config').val(),
img_logo_name: $editor.find('#img_logo_name').val()
};
if (row instanceof FooTable.Row) {
$.ajax({
url: 'update.php',
dataType: "json",
cache: false,
data: {
id: values['id'],
nom_config: values['nom_config'],
img_logo_content: values['img_logo_content']
},
success: function(data) {
if (data.return) {
alert("Success");
row.val(values);
} else {
alert("No modifications!");
}
},
});
} else {
$.ajax({
url: 'insert.php',
data: {
id: values['id'],
nom_config: values['nom_config'],
img_logo_content: values['img_logo_content']
},
success: function(data) {
if (data.return) {
alert("Success");
ft.rows.add(values);
location.reload();
} else {
alert("Already used!");
}
},
});
}
$modal.modal('hide');
});
});
</script>
</body>
</html>
包含您期望的确切值。
请尝试以下代码：
$row[22]投票
有两种方法可以做到这一点：
- 在打开模态时调用API以获取行详细信息，然后使用API响应中的img_logo_content进行显示。如果您尝试显示表中未显示的值，此选项将非常有用。
- 从表中获取img_logo_content并显示到模态（参见下面的示例）
如果您选择第二个选项，您可以执行以下操作：
- 删除以下代码：
$sql = "select * from setting WHERE id='" . $id . "'";
$result = mysqli_query($conn, $sql);
if(isset($result)){
$row=mysqli_fetch_assoc($result);
if (count($row) > 0) {
//use proper array key name
//if db column name name is logo then you can access it like $row['logo']
$img_logo = '<img height="50" src="data:image;base64,' . $row['logo'] . '">';
} else {
//count is zero
echo 'count is zero';
}
} else {
//result is empty
echo 'result is empty';
}
?>
- 更改以下代码：
<?php
//*************************************************************
// PROBLEME HERE !!! Find the logo picture from sql database
$sql = "select * from setting WHERE id='" . $id . "'";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
$img_logo= '<img height="50" src="data:image;base64,' . $row[22] . '">';
}
//*************************************************************
?>
到下面：
<?php // Display Logo
echo $img_logo;
?>
还请更改以下代码：
<!-- Display logo -->
<div id="logo-preview"></div>
到下面：
$editor.find('#img_logo_name').val(values.img_logo_name);
这是你身体的完整代码：
$editor.find('#logo-preview').html(values.img_logo_content);
抱歉我的英文不好:)希望对你有所帮助！
投票
我想我终于得到了第二个选项（API）的解决方案。
添加以下代码
<body class="docs">
<!-- Header -->
<!-- Content -->
<div class="container">
<div class="docs-section">
<div class="example">
<table id="editing-example" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th data-name="id" data-breakpoints="xs" data-type="number">ID</th>
<th data-name="nom_config">Name</th>
<th data-name="img_logo_content">Logo</th>
</tr>
</thead>
<tbody>
<?php foreach( $datas as $data ) { ?>
<tr data-expanded="true">
<td>
<?php echo $data->id; ?></td>
<td>
<?php echo $data->nom_config; ?></td>
<td>
<?php echo '<img height="20" src="data:image;base64,' . $data->img_logo_content . '">' ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<style scoped>
.form-group.required .control-label:after {
content: "*";
color: red;
margin-left: 4px;
}
</style>
<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="editor-title">Add Row</h4>
</div>
<div class="modal-body">
<input type="number" id="id" name="id" class="hidden" />
<div class="form-group required">
<label for="nom_config" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nom_config" name="nom_config" required>
</div>
</div>
<div class="form-group">
<label for="img_logo_content" class="col-sm-4 control-label">logo</label>
<div class="col-sm-8">
<!-- Display logo -->
<div id="logo-preview"></div>
<input type="file" class="form-control" id="img_logo_content" name="img_logo_content" placeholder="Votre Logo">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://fooplugins.github.io/FooTable/docs/js/prism.js"></script>
<script src="https://fooplugins.github.io/FooTable/docs/js/ie10-viewport-bug-workaround.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://fooplugins.github.io/FooTable/compiled/footable.js"></script>
<!-- Initialize FooTable -->
<script>
jQuery(function($) {
var $modal = $('#editor-modal'),
$editor = $('#editor'),
$editorTitle = $('#editor-title'),
ft = FooTable.init('#editing-example', {
editing: {
enabled: true,
addRow: function() {
$modal.removeData('row');
$editor[0].reset();
$editorTitle.text('Add a new row');
$modal.modal('show');
},
editRow: function(row) {
var values = row.val();
$editor.find('#id').val(values.id);
$editor.find('#nom_config').val(values.nom_config);
$editor.find('#logo-preview').html(values.img_logo_content);
$modal.data('row', row);
$editorTitle.text('Edit row #' + values.id);
$modal.modal('show');
},
deleteRow: function(row) {
if (confirm('Are you sure you want to delete the row?')) {
row.delete();
}
}
}
}),
uid = 10;
$editor.on('submit', function(e) {
if (this.checkValidity && !this.checkValidity()) return;
e.preventDefault();
var row = $modal.data('row'),
values = {
id: $editor.find('#id').val(),
nom_config: $editor.find('#nom_config').val(),
img_logo_name: $editor.find('#img_logo_name').val()
};
if (row instanceof FooTable.Row) {
$.ajax({
url: 'update.php',
dataType: "json",
cache: false,
data: {
id: values['id'],
nom_config: values['nom_config'],
img_logo_content: values['img_logo_content']
},
success: function(data) {
if (data.return) {
alert("Success");
row.val(values);
} else {
alert("No modifications!");
}
},
});
} else {
$.ajax({
url: 'insert.php',
data: {
id: values['id'],
nom_config: values['nom_config'],
img_logo_content: values['img_logo_content']
},
success: function(data) {
if (data.return) {
alert("Success");
ft.rows.add(values);
location.reload();
} else {
alert("Already used!");
}
},
});
}
$modal.modal('hide');
});
});
</script>
</body>
创建以下文件：test_api.php
$('#editor-modal').on('show.bs.modal', function (e) {
var productID= $( "#id" ).val();
$.ajax({
url:"test_api.php",
method: "POST",
data:{productID:productID},
dataType:"JSON",
success:function(data)
{
$('#logo-preview').html(data);
}
})
});
感谢thaihoc06！
你怎么看 ？
最新问题
- 如何获取美元和HBAR之间的汇率以用于Hedera应用程序或智能合约？
- 为什么基类不强制使用虚拟析构函数
- 底部带有彩色弯曲边框的背景图像
- 如何解决在使用 Github 高级安全性运行安全扫描时由于在 jquery 库中使用 html() 方法而导致的 eslint 错误？
- 检测并忽略 MySQL MIN/MAX 查询中的异常数字
- nextJS 应用程序中的节点模块包错误：语法错误：未找到命名导出“x”。请求的模块“x”是 CommonJS 模块
- iPhoneSimulator 没有模拟器运行时版本
- 编写markdown-it插件时如何获取markdown文件路径
- 将 NVL 与 TO_DATE 和 TO_CHAR 函数一起使用会导致 ORA-01843 错误
- 在VSCODE中使用python无法打印汉字
- 在 Azure B2C 注册自定义流程期间执行生物特征验证过程
- 无法使 VertexAI Gemini API 的 SafetySettings 工作
- 如何使用 Google Apps 脚本更改 Google 文档表格特定边框的颜色？
- 节点调试，无法保存文件更改
- 将图像拖放到画布图像上
- PostgreSQL 中的 HASH 索引
- SAML SSO 测试与 ITFoxTech 和 MockSAML 集成
- 如何在 Python 中有效地结合异步 I/O 和 CPU 密集型任务？
- Apple App store 连接错误 API 无法正常工作
- 手机蓝牙节流