Hi Bootsrap 4 У меня есть 2 модальных кода (один для редактирования данных, другой для добавления данных), это базовая операция в базе данных php / mysql. Я прочитал отличную тему здесь: Перезагрузить содержимое в модальном режиме (Twitter bootstrap) Но это не помогает, так что вот код:
Для информации, ed.php - это просто базовый php-файл, который печатает идентификатор и имя после получения параметра ID, вот его код:
<?php
if(!empty($_GET['id'])){$dbHost='localhost';$dbUsername='xxxx';$dbPassword='xxxx';$dbName='crud';
$db=new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
if($db->connect_error){die("Unable to connect database: ".$db->connect_error);}
$query=$db->query("SELECT*FROM tasks WHERE id={$_GET['id']}");
if($query->num_rows>0){
$cmsData=$query->fetch_assoc();echo'<h4>'.$cmsData['name'].'</h4>';echo'<p>'.$cmsData['id'].'</p>';
}else{echo 'Content not found....';}
}else{echo 'Content not found2....';}
?>
<!doctype html>
<html lang="en">
<?php include 'db.php';$sql="SELECT*FROM tasks";$rows=$db->query($sql);?>
<head>
<title>Crud</title>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:70px;">
<center><H1>todo list</H1></center>
</div>
<table class="table">
<button type="button" data-target="#myModal" data-toggle="modal" class="btn btn-success gogo">Add task</button>
<button type="button" class="btn btn-default float-right">Print</button>
<hr>
<br>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method = "post" action = "add.php">
<div class="form-group">
<label>Task name</label>
<input type="text" required name="task" class="form-control">
</div>
<input type="submit" name="send" value="send" class="btn btn-success">
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edited" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action="add.php">
<div class="form-group">
<label>Task name</label>
<input type="text" value="ff" required name="task" class="form-control">
</div>
<input type="submit" name="send" value="send" class="btn btn-success">
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<thead>
<tr><th scope="col">#Number</th><th scope="col">Task</th></tr>
</thead>
<tbody>
<tr>
<?php while($row=$rows->fetch_assoc()):?>
<th><?php echo $row['id']?></th>
<td class="col-md-10"><?php echo $row['name']?></td>
<td><a href="#edited?id=<?php echo $row['id'];?>" class="btn btn-success" data-target="#edited" data-toggle="modal">Edit</a><button type="button" class="btn btn-success openBtn" id="<?php echo $row['id'];?>">EDIT</button>
<button type="button" class="btn btn-success push" return="false" data-target="#edited" id="<?php echo $row['id'];?>">Open Modal</button>
</td>
<td><a href ="delete.php?id=<?php echo $row['id'];?>"class="btn btn-danger">Delete</a></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</div>
<script type="text/javascript">
$('.openBtn').on('click',function(){
$('.modal-body').load("ed.php?id=2",function(){
$('#edited').modal({show:true});
});
});
</script>
<script type="text/javascript">
$(function(){
$('.push').on('click',function(){
var id=$(this).attr('id');
$.ajax({
type:'get',url:'ed.php',data:'id='+id,success:function(r){
$('#edited').modal({show:true});
$('.modal-body').show().html(r);
}
});
});
});
</script>
<script type="text/javascript">
$('#modal').on('hidden.bs.modal',function(){
$(this).removeData('bs.modal');
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>