MYSQL Select ID в модальном режиме
Пожалуйста помогите! У меня недостаточно опыта в jquery, чтобы найти это решение самостоятельно.
Я показываю таблицу из базы данных. У меня есть 2 строки с изображением (логотипом), которое отображается правильно. Когда я хочу изменить логотип, я открываю модальное окно.
Мой вопрос: в модальном окне, как отобразить изображение текущего логотипа, который я пытаюсь изменить?
Я думал, что мне просто нужно использовать идентификатор строк, чтобы сделать «выбор sql», но после долгих исследований я капитулировал.
Идентификатор строки хорошо отображается в модальных окнах, но его невозможно использовать в переменной для запроса sql.
Ниже моего кода:
<!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>
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
1
1 385
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Убедитесь, что $row[22] содержит точное значение, которое вы ожидаете.
Попробуйте следующий код:
$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';
}
?>
Да, в $row[22] есть точное значение
—
12.03.2019 11:49
Сравните значения в $data->img_logo_content и $row[22]. Я думаю, это твоя проблема.
—
12.03.2019 11:58
Ошибка не между $data>img_logo_content и $row[22], а потому, что значение $id не существует. Как объявить это значение?
—
12.03.2019 19:22
Я забыл сказать, что с этим кодом у меня всегда есть последний идентификатор моего массива. (Когда я нажимаю строку 1, это $id строки 2)
—
13.03.2019 09:47
Есть два варианта сделать это:
- Вызовите API, чтобы получить информацию о строке при открытии модального окна, затем используйте img_logo_content из ответа API для отображения. Этот вариант будет полезно, если вы пытаетесь отобразить значение, которое не отображается в таблице.
- Получить img_logo_content из таблицы и отобразить в модальном окне (см. пример ниже)
Если вы выберете второй вариант, вы можете сделать следующее:
- Удалить ниже код:
<?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);
Вот полный код вашего тело:
<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>
Извините за мой плохой английский :) Надеюсь, это поможет!
Большое спасибо за вашу помощь, теперь все работает отлично! я постараюсь понять свою ошибку позже .. сейчас не хватает времени
—
12.03.2019 11:43
Пожалуйста! Не забудьте принять мой ответ :D
—
12.03.2019 11:55
Последний вопрос. Если я хочу использовать запрос sql в моем модальном окне, например код, который вы просите меня удалить, возможно ли это и как подготовить код jquery? Я ищу это с давних пор.
—
12.03.2019 19:16
Вы не можете. Весь код PHP будет выполнен перед отправкой вывода (HTML) в браузер, поэтому, когда вы открываете модальное окно, вы не сможете снова выполнить код PHP. Решение заключается в создании API, который запускает SQL-запрос, затем возвращает сведения о строке, а затем использует эту информацию для отображения в модальном окне.
—
14.03.2019 04:59
Я думаю, что наконец нашел решение для второго варианта (API). Как вы думаете?
—
14.03.2019 12:44
@Canta У меня есть улучшение для вашего кода, вы можете проверить это здесь: pastebin.com/LePCieTR
—
15.03.2019 15:55
Ответ принят как подходящий
Я думаю, что наконец нашел решение для второго варианта (API).
Добавьте ниже код
$('#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);
}
})
});
Создайте файл ниже: test_api.php
<?php
include('../connection.php');
if (isset($_POST['productID'])) {
$productID = $_POST['productID'];
$sql = "select * from setting WHERE id='" . $productID . "'";
$result = mysqli_query($conn, $sql);
if (isset($result)){
$row=mysqli_fetch_assoc($result);
if (count($row) > 0) {
$data = '<img height = "50" src = "data:image;base64,' . $row['img_logo_content'] . '">';
}
}
echo json_encode($data);
}
?>
Спасибо, thaihoc06!
Как вы думаете ?
Другие вопросы по теме
Как настроить таргетинг на определенные столбцы с помощью jquery rowCallback для DT:: Datatable в R
Получить ответ JSON и вставить в ячейки таблицы на основе определенного ключа в JSON
Как сделать 3 изображения действий по центру столбца сетки?
Проблема с загрузкой модального окна bootstrap 3 в woo-commerce
Заполнение datatable с помощью json из API
Удалить отключенное с кнопки, если все поля заполнены и флажок: установлен
Изменить источник изображения в зависимости от его идентификатора
Как дождаться, пока переменная не станет нулевой
Как получить доступ к groupedValue в группировке запросов Solr
Невозможно остановить повторение вызова div
Похожие вопросы
Как объединить строки с одинаковым именем в одну, где данные взяты с использованием двух foreach
Получить список всех данных в массив данных
Конфигурация сущности "App\Entity\Cat" недоступна (эта сущность используется в качестве цели поля автозаполнения "кошка")
Получение ошибки при попытке записи в базу данных MySQL из PHP, при чтении из базы данных работает нормально
Используя .htaccess, как я могу перенаправить строки запроса только из корня на определенный URL-адрес?
Попытка сохранить несколько данных (строку), но в laravel создается только 1 строка
Обмен ключами шифрования/дешифрования PHP/SQL
Как обработать возврат razorpay в php
CakePHP ""_joinData" отсутствует в результатах containsToMany" Ошибка
Symfony — выбор Ajax
Спасибо ! Но есть отображение всегда одного и того же изображения???