Главная » PHP » Как передать значение в bootstrap v4 модал?

Как передать значение в bootstrap v4 модал?

Как вы можете видеть ниже, у меня есть php-сгенерированная таблица с тд который содержит оба редактировать и удалять якоря. Я положил $ данных [ ‘ID’] внутри данных идентификатор атрибут якоря, и я передаю его модальному с помощью jquery. Тем не менее, идентификатор статьи не отображается на модальном. Может кто-нибудь сказать, что не так с моими кодами? Это php, html или jquery? Спасибо!

<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
echo '</tr>';
}
?>

ТАБЛИЦА, СОЗДАННАЯ PHP

<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>

HTML MODAL

$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal

//we get details from attributes
var myArticleId=$(opener).attr('data-id');

//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);

});

Jquery

<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Summary</th>
<th>Content</th>
<th><div align="center">Date Published</div></th>
<th><div align="center">Date Last Edited</div></th>
<th><div align="center">Action</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><div align="center"><a href="#articleEditModal" data-id="1" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><div align="center"><a href="#articleEditModal" data-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><div align="center"><a href="#articleEditModal" data-id="3" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
</td>
</tr>
</tbody>
</table>

ИНСПЕКЦИОННАЯ СТРАНИЦА — ТАБЛИЦА

$('#articleEditModal').on('show.bs.modal', function (e) {

Ошибка показывает в этой строке выше:

Uncaught ReferenceError: $ не определено
на cms.php: 162

0

Решение

var opener = $(e.relatedTarget); вместо var opener=e.relatedTarget;

Ссылка Бутстрап Модал

Надеюсь это поможет!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>

<table>
<tr>
<th scope="row">2</th>
<td>
<a href="#articleEditModal" data-article-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a>
<a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a>
</td>
</tr>
</table><!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);

var article_id = button.attr('data-article-id')
// take advantage of data attribute
// var article_id = button.data('article-id');

var modal = $(this)
modal.find('.modal-title').text('Article ' + article_id)
modal.find('.modal-body input').val(article_id)
})
</script>

// Пример данных php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>

<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
echo '</tr>';
}
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>

<script>
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=$(e.relatedTarget);//this holds the element who called the modal

//we get details from attributes
var myArticleId=$(opener).attr('data-id');

//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);

});

</script>
0

Другие решения

Других решений пока нет …

Источник
По вопросам рекламы ammmcru@yandex.ru
Web-Answers © 2024 Наверх
Adblock
detector