2017-09-22 15 views
-1

解決できない問題が発生しました。 1. #exampleModalの最初のモーダルは正常に動作しています。 2. food_action.phpで保存するデータを投稿するときに2番目のモーダルは機能しませんが、データはデータベースに保存されていますが、#modal_confirmは切り替えません。 私は理由を知らない。私はどの行がエラーであるかデバッグし、console.logを試みます。 助けてください。Jquery:2番目のモーダルはアクティブではありません

敬具

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="assets/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>Topup</title> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-8 mx-auto pt-2"> 
       <a href="" class="btn btn-info"> back</a> 
      </div> 
     </div> 
     <div class="row justify-content-center">    
      <div class="col-sm-4 my-5"> 
       <div class="border border-primary rounded" style="height: 335px"> 
        <div class="text-center pt-5"><img id="stu_img" src="" class="rounded" style="width: 50px" alt=""></div> 
        <h2 class="text-center">Information</h2> 
        <dl class="row"> 
         <dt class="col-sm-6 text-right">ID: </dt> 
         <dd id="id" class="col-sm-6"></dd> 
         <dt class="col-sm-6 text-right">Name: </dt> 
         <dd id="name" class="col-sm-6"></dd> 
         <dt class="col-sm-6 text-right">Level: </dt> 
         <dd id="level" class="col-sm-6"></dd> 
         <dt class="col-sm-6 text-right">Balance: </dt> 
         <dd id="balance" class="col-sm-6"></dd> 
        </dl> 
       </div> 
      </div> 
      <div class="col-sm-4 my-5"> 
       <div class="border border-success rounded" style="height: 335px"> 
        <h2 class="text-center pt-5">Topup</h2> 
        <form class="p-3"> 
         <div class="form-group"> 
          <label>Topup</label> 
          <div class="input-group"> 
           <span class="input-group-addon">$</span> 
           <input type="number" class="form-control" id="amount" name="card_amount" autofocus required> 
          </div> 
          <small class="form-text text-muted">Number only</small> 
         </div> 
         <div class="form-group"> 
          <label>Register</label> 
          <input type="text" class="form-control" id="register" name="who_check" value="admin" readonly> 
         </div> 
         <button id="btn_submit" type="button" class="btn btn-primary btn-block">Submit</button> 
        </form> 
       </div> 
      </div> 
     </div> 
     <!-- Modal --> 
     <div class="modal fade" id="exampleModal" tabindex="-1" 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="exampleModalLongTitle">Top up confirm</h5> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
         </button> 
        </div> 
        <div class="modal-body"> 
         <div class="container-fluid"> 
          <div class="row"> 
           <div class="col-sm-10 mx-auto"> 
            <form> 
             <div class="form-group"> 
              <label>ID</label> 
              <input type="text" class="form-control" id="stu_id" readonly> 
             </div> 
             <div class="form-group"> 
              <label>Amount</label> 
              <input type="text" class="form-control" id="stu_topup" readonly> 
             </div>      
             <button id="btn_confirm" type="button" class="btn btn-primary">Confirm</button> 
             <button id="btn_cancle" type="button" class="btn btn-warning" data-dismiss="modal">cancle</button> 
            </form> 
           </div> 
          </div> 
         </div>     
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- Modal --> 
     <div class="modal fade" id="modal_confirm" tabindex="-1" role="dialog"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h5 class="modal-title">Topup complete</h5> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
         </button> 
        </div> 
        <div class="modal-body"> 
         <div class="container-fluid"> 
          <div class="row"> 
           <div class="col-sm-10 mx-auto"> 
            <p id="topup"></p> 
           </div> 
          </div> 
         </div>     
        </div> 
       </div> 
      </div> 
     </div>  
    </div> 

    <script src="assets/vendor/jquery-3.2.1.min.js"></script> 
    <script src="assets/vendor/popper.min.js"></script> 
    <script src="assets/vendor/holder.min.js"></script> 
    <script src="assets/dist/js/bootstrap.min.js"></script> 
    <script> 
     var stu_id = sessionStorage.getItem("id"); 
     $(document).ready(function(){ 
      $.post("food_action.php", 
      { 
       list: "list", 
       id: stu_id 
      }, 
      function(data, status){ 
       //console.log(data[0].card_id); 
       document.getElementById("id").innerHTML = data[0].card_id; 
       document.getElementById("name").innerHTML = data[0].stu_name; 
       document.getElementById("level").innerHTML = data[0].stu_level; 
       document.getElementById("balance").innerHTML = data[0].card_pocket + " บาท."; 
       $("#stu_img").attr('src', 'assets/img/'+data[0].stu_img); 
      }); 
     }); 

     $('#btn_submit').click(function(){ 
      $('#exampleModal').modal('show'); 
      $('#stu_id').val(stu_id); 
      $('#stu_topup').val($('#amount').val()); 
     }); 

     $('#btn_confirm').click(function(){ 
      console.log("press"); 
      $.post("food_action.php", 
      { 
       update: "update", 
       add: "add", 
       id: stu_id, 
       action: "topup", 
       register: $('#register').val(), 
       amount: $('#amount').val() 
      }, 
      function(status){ 
       //console.log(xhr.status); 
       if(status = 'success'){ 
        console.log(status); 
        $('#exampleModal').modal('hide'); 
        $('#modal_confirm').modal('show'); 
       } 
      }); 
     }); 
    </script> 
</body> 
</html> 
+0

'if(status = 'success')'あなたが '(status == 'success')'を意味しないのですか? '='は** equals **を意味します。 '=='は** ** ** – ProEvilz

答えて

0

==を使用するようにstatus =一部を変更してみてください。

 function(status){ 
      //console.log(xhr.status); 
      if(status == 'success'){ 
       console.log(status); 
       $('#exampleModal').modal('hide'); 
       $('#modal_confirm').modal('show'); 
      } 
     }); 

あなたはstatus = 'success'は、あなたが「成功」にstatusの値を設定していると言います。しかし、何かがequal toであるかどうかをチェックしたい場合は、==を使用し、=ではなく、値を設定する必要はありません。

+0

に等しいことを意味します。私はそれを変更しましたが、最初のモーダルでボタン(#btn_confirm)をクリックしてもデータは保存されましたが、#exampleModalモーダルは隠されずに別のモーダルを表示しませんでした。 – striderblue

関連する問題