2016-07-08 18 views
-3

これは私がしたいことです。私はあなたにシナリオを与えます。削除ボタンをクリックすると、モーダルがポップアップし、削除するかどうかを尋ねられます。 OKをクリックすると、クエリが実行され、データベースに削除されます。誰かに私にそれをする方法を教えてもらえますか?PHP - ブートストラップによる確認で削除

これは私のグリッドの写真です。 enter image description here

ここは私のコードです。

<?php 
    include_once('connection.php'); 
    ?> 
    <!DOCTYPE html> 
    <html> 
    <head> 
      <link rel="stylesheet" href ="css/bootstrap.min.css"> 
      <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 

    </head> 
    <body> 
    <div class="container"> 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <th width="60">ID</th> 
        <th width="200">Title</th> 
        <th width="150">Date Posted</th> 
        <th>Content</th> 
        <th width="200">Image</th> 
        <th width="200">Action</th> 
       </tr> 
      </thead> 
      <tbody> 
      <?php 

      $stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id"); 
      mysqli_stmt_execute($stmt); 
      $result = mysqli_stmt_get_result($stmt); 
      while($row = mysqli_fetch_array($result)){ 
      ?> 
       <tr> 
        <td><?php echo $row['news_id']; ?></td> 
        <td><?php echo $row['news_title']; ?></td> 
        <td><?php echo $row['news_date']; ?></td> 
        <td><?php echo $row['news_content']; ?></td> 
        <td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>" ></td> 
        <td> 
         <a href="edit2.php?newsid=<?php echo $row['news_id'];?>" class='btn btn-info left-margin'><span class="glyphicon glyphicon-edit"></span> Edit</a> 
         <a class='btn btn-danger delete-object'><span class="glyphicon glyphicon-remove"></span> Delete</a> 
        </td> 
       </tr> 
      <?php 
      } 
      ?> 
      </tbody> 
     </table> 
    </div> 


     <script src="js/jquery-1.12.4.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 

    </body> 
    </html> 
+1

これにはJavascriptが必要です –

+0

'onClick'、' confirm() 'を試したことがありますか? –

+0

私はブートストラップでそれを行うことはできますか?私はいくつかの派手なデザインが欲しい。 – nethken

答えて

2

ダイアログを表示するのにBootstrap dialogsを使用できます。確認ダイアログを表示すると、ユーザーが[OK]をクリックした場合、あなたは確認することができ、その後、元にAJAXリクエストを実行します。list.php delete_photo = 31

BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){ 
 
      if(result) { 
 
       alert('Yup.'); 
 
      }else { 
 
       alert('Nope.'); 
 
      } 
 
     });

0


ファンシーな方法は、これを実行させるには? 、モーダルを試してみてください:

<?php 
    include_once('connection.php'); 
    ?> 
    <!DOCTYPE html> 
    <html> 
    <head> 
      <link rel="stylesheet" href ="css/bootstrap.min.css"> 
      <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 

    </head> 
    <body> 
    <div class="container"> 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <th width="60">ID</th> 
        <th width="200">Title</th> 
        <th width="150">Date Posted</th> 
        <th>Content</th> 
        <th width="200">Image</th> 
        <th width="200">Action</th> 
       </tr> 
      </thead> 
      <tbody> 
      <?php 

      $stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id"); 
      mysqli_stmt_execute($stmt); 
      $result = mysqli_stmt_get_result($stmt); 
      while($row = mysqli_fetch_array($result)){ 
      ?> 
       <tr> 
        <td><?php echo $row['news_id']; ?></td> 
        <td><?php echo $row['news_title']; ?></td> 
        <td><?php echo $row['news_date']; ?></td> 
        <td><?php echo $row['news_content']; ?></td> 
        <td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>" ></td> 
        <td> 
         <a href="edit2.php?newsid=<?php echo $row['news_id'];?>" class='btn btn-info left-margin'><span class="glyphicon glyphicon-edit"></span> Edit</a> 
         <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Delete</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Delete immage <?php echo $row['news_title']; ?> </h4> 
     </div> 
     <div class="modal-body"> 
      <p>Are you sure you want to delte this immage?</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-danger" >Delete</button> 
     </div> 
     </div> 

    </div> 
    </div> 
        </td> 
       </tr> 
      <?php 
      } 
      ?> 
      </tbody> 
     </table> 
    </div> 


     <script src="js/jquery-1.12.4.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 

    </body> 
    </html> 

モーダルはw3schoolsからのものですが、もっと読むことができます。 モーダルは、これを行うための最もすばらしい方法です。検索と詳細を読む...

お礼、
M.I.

関連する問題