如何保存一个后立即打开下一个模态？

Question

`

<?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">&times;</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">

操作细节`我有一个包含很多模式的表格。我想在用户将数据保存到第一个模态后立即打开下一个模型以弹出。我也有一些模态，一条记录需要多个条目。

Modal1，Modal2，modal3，modal4，Details_of_Operations，Formations。

这些是我所有需要输入数据的模态，它们都存储了当前日期的数据。我希望用户可以在保存一个后直接进入下一个模式。

Answer 1

您可以实现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>

让我知道您对此实施是否有任何疑问。