javascript - 保存后如何直接打开下一个模态?
问题描述
<?php
//session_start();
$con= mysqli_connect('localhost','root','');
mysqli_select_db($con,'cementation');
if(!$con)
{
echo "Not Connected to the server";
}
if(!mysqli_select_db($con,'cementation'))
{
echo "DB Not Selected";
}
$date= date("Y/m/d"); //1
?>
<!--6th table starts-->
<form method="post" action="/cementation/configuration/dooconfig.php">
<div class="modal fade" id="modalForm11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Detail of Operations</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="row">
<div class="col-sm-12"> <!-- Imp Div 1 -->
<div class="row"> <!-- Main Row Div -->
<div class="col-sm-12"> <!-- First Main Col -->
<div class="row">
<div class="col-sm-3" style="width: 100%">
<div class="md-form mb-4">
<input type="text" id="Entry_no" name="Entry_no" placeholder="Row #"
class="form-control validate">
</div>
</div>
<div class="col-sm-3">
<div class="md-form mb-4">
<input type="text" id="from_time" name="From_time" placeholder="from"
class="form-control validate">
</div>
</div>
<div class="col-sm-3">
<div class="md-form mb-4">
<input type="text" id="to_time" name="To_time" placeholder="to"
class="form-control validate">
</div>
</div>
<div class="col-sm-3">
<div class="md-form mb-4">
<input type="text" id="hrs" name="HRS" placeholder="hrs"
class="form-control validate">
</div>
</div>
<div class="col-sm-4">
<div class="md-form mb-4">
<input type="text" id="code" name="code" placeholder="code"
class="form-control validate">
</div>
</div>
<div class="col-sm-8">
<div class="md-form mb-4">
<input type="text" id="operations" name="detail_of_operations"
placeholder="operations" class="form-control validate">
</div>
</div>
<div class="col-sm-8">
<div class="md-form mb-4">
<button type="Save" class="btn btn-primary" name="add-row"
onclick="$('#modalForm11').modal('show');">Save and Add Row
</button>
</div>
</div>
</div>
<!-- Reload
</div>
</div> -->
</div> <!-- 1st Main Col Ends -->
<div class="col-sm-12"> <!-- second col for main row starts -->
<table width="100%" border-collapse: collapse class="datafill" border="1px solid">
<tr>
<th>Row #</th>
<th>From</th>
<th>To</th>
<th>Hrs</th>
<th>Code</th>
<th>Operations</th>
</tr>
<?php
$date= date("Y/m/d");
$s= "SELECT Entry_no,From_time,To_time,HRS,code,detail_of_operations FROM detail_of_operations WHERE date='$date'";
$result= $con->query($s);
if ($result -> num_rows >0) {
while ($row = $result -> fetch_assoc()){
echo "<tr><td>".$row["Entry_no"]."</td><td>".$row["From_time"]."</td><td>".$row["To_time"]."</td><td>".$row["HRS"]."</td><td>".$row["code"]."</td><td>".$row["detail_of_operations"]."</td></tr>";
}
}
else {
echo "0 result";
}
?>
</table>
</div> <!-- Second Col for main row ends -->
</div> <!-- Main row div ends -->
</div> <!-- IMP Div 1 ends -->
<div class="modal-footer d-flex justify-content-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a href="form.php">
<button type="button" class="btn btn-primary">Save</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm11">Detail of
Operations
</button>
</div>
</form>
我有一个由很多模态组成的表格。一旦用户将数据保存在第一个模式中,我想打开下一个模型以弹出。我也有一些模式需要多个条目来记录一个记录。
模态1,模态2,模态3,模态4,Details_of_Operations,编队。
这些都是我需要输入数据的模态,它们都存储当前日期的数据。我希望用户能够在保存一个模态后直接进入下一个模态。
解决方案
您可以实现 javascript 承诺来实现您的目标。这是一个您可以参考的快速示例。
function saveSomeData() {
return new Promise((resolve, reject) => {
// setTimeOut to simulate the call waiting for the API
setTimeout(() => {
resolve({ succeeded: true, message: 'data saved' })
}, 900)
// Use reject if the API returns any error to catch it
// on the promise call
// ---> reject(err)
});
}
function onClickSaveModal(previousModalId, nextModalId) {
// Uses promises to wait until the data of the current modal
// is saved to open the other one
saveSomeData()
.then(res => {
if (res.succeeded) {
alert('Data saved successfully');
hideModal(previousModalId);
// checks if it is the last modal
if (nextModalId) {
showModal(nextModalId);
}
}
})
.catch(err => {
// it enters here when you reject the promise
alert('Some error trying to save data');
console.log(err);
});
}
function showModal(id) {
const modal = document.querySelector(`#${id}`);
modal.style.display = 'inline-block';
}
function hideModal(id) {
const modal = document.querySelector(`#${id}`);
modal.style.display = 'none';
}
#modal1, #modal2, #modal3 {
height: 100px;
width: 100px;
margin: 0 15px;
display: inline-block;
}
#modal1 {
background-color: lightblue;
}
#modal2 {
background-color: lightcoral;
display: none;
}
#modal3 {
background-color: lightcyan;
display: none;
}
.open {
display: inline-block;
}
<div id="modal1">
<p>modal 1</p>
<button onclick="onClickSaveModal('modal1','modal2')">Save</button>
</div>
<div id="modal2">
<p>modal 2</p>
<button onclick="onClickSaveModal('modal2','modal3')">Save</button>
</div>
<div id="modal3">
<p>modal 3</p>
<button onclick="onClickSaveModal('modal3')">Save</button>
</div>
如果您对此实施有任何疑问,请告诉我。
推荐阅读
- javascript - 如何从使用 window.open 打开的新窗口中获取与 iframe 地图的距离等值?
- java - Modelmapper 返回 null 而不是用户 ID
- python - 从 args 动态设置 pytest 夹具的范围
- amazon-web-services - AWS IoT:如何在一次 API 调用中更新多个事物影子
- docker - 在 kubernetes 中丢失+找到 Wordpress PVC mouting 问题
- javascript - 多边形中的最大内切圆
- spring-boot - 当查看器未通过身份验证时,是否可以在招摇中隐藏 API 操作
- neo4j - Neo4j中如何用Cypher总结节点类型与起始节点和结束节点不同的属性值
- node.js - 仅当在 Node.js 中发送响应没有错误时如何设置缓存标头
- javascript - 来自 chartjs-node-canvas 的黑色图表