ボタンがクリックされた後モーダルが表示されない

Question

誰かが私にこれを手伝ってくれることを願っています。私は自分の荒れ果てたテーブルで編集をクリックするとモーダルを表示しないという問題があります。ここで私のコードは私のテーブルにあります、私は皆がこれで私を助けてくれることを願っています。前もって感謝します。 :)

<?php while ($row = mysqli_fetch_array($results)) { ?> 
     <tr> 
     <td><?php echo $row["brand_name"]; ?></td> 
     <td><?php echo $row["brand_status"]; ?></td> 
     <td> 
      <a href="brand.php?edit=<?php echo $row["brand_id"]; ?>"> 
      <button type="button" data-toggle="modal" data-target="#modal-default" class="btn btn-success"><i class="fa fa-edit"></i> Edit</button> 
      </a> 
      <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button> 
     </td> 
    </tr> 
    <?php } ?> 

これは私のモーダルのコードです。私はこのコードにエラーはないと思います。これには不要な出力がないからです。私は誰かが本当にこれで私を助けることを願っています。ありがとうございました。すべてのHTMLマークアップの

<div class="modal fade" id="modal-default"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <form action="server.php" method="POST"> 
     <input type="hidden" name="brand_id" value="<?php echo $brand_id; ?>"/> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Add a brand</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label for="brand_name">Brand Name</label> 
      <input type="text" class="form-control" name="brand_name" value="<?php echo $brand_name; ?>" placeholder="Brand Name"/> 
     </div> 
     <?php if ($edit_state == false): ?> 
      <div class="form-group"> 
      <label for="brand_status">Status</label> 
      <select class="form-control select2" style="width: 100%;" name="brand_status"> 
      <option>Available</option> 
      <option>Not Available</option> 
      </select> 
      </div> 
      <?php else: ?> 
      <div class="form-group"> 
       <label for="brand_status">Status</label> 
       <select class="form-control select2" style="width: 100%;" name="brand_status"> 
       <option><?php echo $brand_status; ?></option> 
       </select> 
      </div> 
      <?php endif ?> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> 
      <?php if ($edit_state == false): ?> 
      <button type="submit" class="btn btn-primary" name="btn_save">Save Changes</button> 
      <?php else: ?> 
      <button type="submit" class="btn btn-primary" name="btn_update">Update</button> 
      <?php endif ?> 
     </div> 
     </form> 
     </div> 
    </div> 
    </div> 

Answer 1

まず間違っている、あなたはa要素の子孫としてのボタンを持って傾けます。

要素ボタンまたはアンカータグが1つ必要です。

アンカータグを使用し、リンクがクリックされたときにjqueryを使用してモーダルを開くのが最善の方法です。

ボタンの動的IDを作成し、jqueryを使用して、どのボタンがクリックされたかを確認します。

これは、あなたがこれを近づくことができる方法です。

<?php while ($row = mysqli_fetch_array($results)) 
    $brand_status = $row['brand_status']; 
    $brand_name = $row['brand_name']; 
    $brand_id = $row['brand_id']; 
{ ?> 
     <tr> 
     <td><?php echo $brand_name; ?></td> 
     <td><?php echo $brand_status; ?></td> 
     <td> 
      <a href="#" data-brand="<?=$brand_name?>" data-status="<?=$brand_status?>" class="btn btn-success" id="brand_<?=$brand_id?>"><i class="fa fa-edit"></i> Edit </a> 
      <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button> 
     </td> 
    </tr> 
    <?php } ?> 

次に、あなたのモーダル

div class="modal fade" id="modal-default"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <form action="server.php" method="POST"> 
     <input type="hidden" name="brand_id"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Add a brand</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label for="brand_name">Brand Name</label> 
      <input type="text" class="form-control" name="brand_name" placeholder="Brand Name"/> 
     </div> 
     <?php if ($edit_state == false): ?> 
      <div class="form-group"> 
      <label for="brand_status">Status</label> 
      <select class="form-control select2" style="width: 100%;" name="brand_status"> 
      <option>Available</option> 
      <option>Not Available</option> 
      </select> 
      </div> 
      <?php else: ?> 
      <div class="form-group"> 
       <label for="brand_status">Status</label> 
       <select class="form-control select2" style="width: 100%;" name="brand_status"> 
       <option><?php echo $brand_status; ?></option> 
       </select> 
      </div> 
      <?php endif ?> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> 
      <?php if ($edit_state == false): ?> 
      <button type="submit" class="btn btn-primary" name="btn_save">Save Changes</button> 
      <?php else: ?> 
      <button type="submit" class="btn btn-primary" name="btn_update">Update</button> 
      <?php endif ?> 
     </div> 
     </form> 
     </div> 
    </div> 
    </div> 

私はない$edit_stateが何をするかはかなりわからないんだけど？また、jqueryを使用してコントロールステートメントを実行する方が良いでしょう。

次に、あなたのjQuery：

<script type="text/javascript"> 
     $('document').ready(function(){ 
     $('[id^="brand_"]').on('click',function(){ 
     var index = $(this).attr('id').split("_")[1]; // brand ID 
     var brandname = $(this).data('brand'); // get the click brandname 
     var status = $(this).data('status'); // get the status of the clicked brand 
     $('#modal-default').modal('toggle'); // open modal 

     $('input[type="hidden"][name="brand_id"]').val(index); // assign the id to the input field 
     $('input[type="text"][name="brand_name"]').val(brandname); 


     }); 
    }); 
    </script> 

私はあなたが持っている現在の情報と一緒に行くことができますどのくらいです。