2016-05-25 18 views
0

こんにちは、なぜこれが動作していないのかわかりません。私は自分のデータベースから読み込めるようにすべてのファイルを設定しましたが、削除されません。私はselect allボタンを動作させることができましたが、削除することはできません。選択/選択すべて削除PHPで動作していませんMySQL/AJAX Jquery

ここに私のコードです。

PHPはここ

<?php 
 
session_start(); 
 
include_once('dbConfig.php'); 
 
if(isset($_POST['bulk_delete_submit'])){ 
 
    $idArr = $_POST['checked_id']; 
 
    foreach($idArr as $id){ 
 
     mysqli_query($conn,"DELETE FROM appointments WHERE id=".$id); 
 
    } 
 
    $_SESSION['success_msg'] = 'Users have been deleted successfully.'; 
 
    header("Location:display.php"); 
 
} 
 
?>

を削除したデータは、表示ページに送信されます。

<html> 
 
<head> 
 
    <script type="text/javascript" src="delete.js"></script> 
 
</head> 
 
<body> 
 

 
<?php session_start(); if(!empty($_SESSION['success_msg'])){ ?> 
 
<div class="alert alert-success"><?php echo $_SESSION['success_msg']; ?></div> 
 
<?php unset($_SESSION['success_msg']); } ?> 
 
<?php 
 
include_once('dbConfig.php'); 
 
$query = mysqli_query($conn,"SELECT * FROM appointments"); 
 
?> 
 
<?php 
 
$connect = mysqli_connect("localhost", "root", "root", "appointments"); 
 
$output = ''; 
 
$sql = "SELECT * FROM appointments ORDER BY id DESC"; 
 
$result = mysqli_query($connect, $sql); 
 
$output .= ' 
 
<form name="bulk_action_form" action="delete_multiple.php" method="post" onSubmit="return delete_confirm();"/> 
 
     <div class="table-responsive"> 
 

 
      <table class="table table-bordered"> 
 
       <tr> 
 
        <th><input type="checkbox" name="select_all" id="select_all" value=""/></th> 
 
        <th width="10%">Id</th> 
 
        <th width="40%">Name</th> 
 
        <th width="40%">Email</th> 
 
        <th width="40%">Address</th> 
 
        <th width="10%">phoneNumber</th> 
 
        <th width="10%">appointmentTime</th> 
 
        <th width="10%">appointmentDate</th> 
 
        <th width="50%">message</th> 
 
    
 
         
 
       </tr>'; 
 
          if(mysqli_num_rows($result) > 0) 
 
          { 
 
            while($row = mysqli_fetch_assoc($result)) 
 
            { 
 
             $output .= '    
 
            
 
       <tr data-row-id="'.$row["id"].'"> 
 
        <td align="center"><input type="checkbox" name="checked_id[]" class="checkbox" value="'.$row["id"].'"/></td> 
 
        <td>'.$row["id"].'</td> 
 
        <td class="name" data-id1="'.$row["id"].'" contenteditable>'.$row["name"].'</td> 
 
        <td class="email" data-id2="'.$row["id"].'" contenteditable>'.$row["email"].'</td> 
 
        <td class="address" data-id2="'.$row["id"].'" contenteditable>'.$row["address"].'</td> 
 
        <td class="phoneNumber" data-id2="'.$row["id"].'" contenteditable>'.$row["phoneNumber"].'</td> 
 
        <td class="appointmentTime" data-id2="'.$row["id"].'" contenteditable>'.$row["appointmentTime"].'</td> 
 
        <td class="appointmentDate" data-id2="'.$row["id"].'" contenteditable>'.$row["appointmentDate"].'</td> 
 
        <td class="message" data-id2="'.$row["id"].'" contenteditable>'.$row["message"].'</td> 
 
         
 
       </tr> 
 
      '; 
 
     }         
 
            
 
} 
 
else 
 
{ 
 

 
     $output .= '<tr><td colspan="10">Data not Found</td></tr>'; 
 
} 
 

 

 
$output .= '</table> 
 
<div align="center"> 
 
       <input type="submit" class="btn btn-danger" name="bulk_delete_submit" value="Delete"/>  
 
       </div> 
 
     </div> '; 
 
echo $output; 
 
?> 
 
    </body> 
 
</html>

私は...ここにテーブルのJSが発見された表示ページだ可能性がある場合ここで、また、JavaScriptの

function delete_confirm(){ 
 
\t var result = confirm("Are you sure to delete users?"); 
 
\t if(result){ 
 
\t \t return true; 
 
\t }else{ 
 
\t \t return false; 
 
\t } 
 
} 
 

 
$(document).ready(function(){ 
 
    $('#select_all').on('click',function(){ 
 
     if(this.checked){ 
 
      $('.checkbox').each(function(){ 
 
       this.checked = true; 
 
      }); 
 
     }else{ 
 
      $('.checkbox').each(function(){ 
 
       this.checked = false; 
 
      }); 
 
     } 
 
    }); 
 
\t 
 
\t $('.checkbox').on('click',function(){ 
 
\t \t if($('.checkbox:checked').length == $('.checkbox').length){ 
 
\t \t \t $('#select_all').prop('checked',true); 
 
\t \t }else{ 
 
\t \t \t $('#select_all').prop('checked',false); 
 
\t \t } 
 
\t }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $('#select_all').on('click',function(){ 
 
     if(this.checked){ 
 
      $('.checkbox').each(function(){ 
 
       this.checked = true; 
 
      }); 
 
     }else{ 
 
      $('.checkbox').each(function(){ 
 
       this.checked = false; 
 
      }); 
 
     } 
 
    }); 
 
\t 
 
\t $('.checkbox').on('click',function(){ 
 
\t \t if($('.checkbox:checked').length == $('.checkbox').length){ 
 
\t \t \t $('#select_all').prop('checked',true); 
 
\t \t }else{ 
 
\t \t \t $('#select_all').prop('checked',false); 
 
\t \t } 
 
\t }); 
 
});

です。

<?php 
 
    require("config.php"); 
 
    if(empty($_SESSION['user'])) 
 
    { 
 
     header("Location: success.php"); 
 
     die("Redirecting to index.php"); 
 
    } 
 
?> 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <title></title> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <link href="css/simple-sidebar.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    
 
    
 
</head> 
 

 
<body> 
 

 
    <div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 
       <li class="sidebar-brand"> 
 
        <a href="#"> 
 
         Hope Medi Clinic 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="logout.php">Logout</a> 
 
       </li> 
 
       <li> 
 
        <a href="../../appointments/">Main Website</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 

 
     <!-- Page Content --> 
 
        <div class="container"> 
 
       <br /> 
 
       <br /> 
 
       <br /> 
 
       <div class="table-responsive"> 
 
        <h3 align="center">Appointments</h3><br /> 
 
        <div id="live_data"></div> 
 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
 
       </div> 
 
      </div> 
 
     <!-- /#page-content-wrapper --> 
 

 
    </div> 
 
    
 
    <script> 
 
$(document).ready(function(){ 
 
     function fetch_data() 
 
     { 
 
      $.ajax({ 
 
       url:"select.php", 
 
       method:"POST", 
 
       success:function(data){ 
 
        $('#live_data').html(data); 
 
       } 
 
      }); 
 
     } 
 
     fetch_data(); 
 
     function edit_data(id, text, column_name) 
 
     { 
 
      $.ajax({ 
 
       url:"edit.php", 
 
       method:"POST", 
 
       data:{id:id, text:text, column_name:column_name}, 
 
       dataType:"text", 
 
       success:function(data){ 
 
        alert(data); 
 
       } 
 
      }); 
 
     } 
 
    /* ............. */ 
 
     $(document).on('blur', '.name', function(){ 
 
      var id = $(this).data("id1"); 
 
      var name = $(this).text(); 
 
      edit_data(id, name, "name"); 
 
     }); 
 
     
 
     $(document).on('blur', '.email', function(){ 
 
      var id = $(this).data("id2"); 
 
      var email = $(this).text(); 
 
      edit_data(id, email, "email"); 
 
     }); 
 
    $(document).on('blur', '.address', function(){ 
 
      var id = $(this).data("id2"); 
 
      var address = $(this).text(); 
 
      edit_data(id, address, "address"); 
 
      
 
     }); 
 
    $(document).on('blur', '.phoneNumber', function(){ 
 
      var id = $(this).data("id2"); 
 
      var phoneNumber = $(this).text(); 
 
      edit_data(id, phoneNumber, "phoneNumber"); 
 
     }); 
 
    $(document).on('blur', '.appointmentTime', function(){ 
 
      var id = $(this).data("id2"); 
 
      var appointmentTime = $(this).text(); 
 
      edit_data(id, appointmentTime, "appointmentTime"); 
 
     }); 
 
    $(document).on('blur', '.appointmentDate', function(){ 
 
      var id = $(this).data("id2"); 
 
      var appointmentDate = $(this).text(); 
 
      edit_data(id, appointmentDate, "appointmentDate"); 
 
     }); 
 
    $(document).on('blur', '.message', function(){ 
 
      var id = $(this).data("id2"); 
 
      var message = $(this).text(); 
 
      edit_data(id, message, "message"); 
 
     }); 
 
    
 
     $(document).on('click', '.btn_delete', function(){ 
 
      var id=$(this).data("id3"); 
 
      if(confirm("Are you sure you want to delete this?")) 
 
      { 
 
       $.ajax({ 
 
        url:"delete.php", 
 
        method:"POST", 
 
        data:{id:id}, 
 
        dataType:"text", 
 
        success:function(data){ 
 
          alert(data); 
 
          fetch_data(); 
 
        } 
 
       }); 
 
      } 
 
     }); 
 
     
 
     
 
}); 
 
    </script> 
 
    
 

 
<script> 
 
    $("#menu-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled"); 
 
    }); 
 
</script> 
 

 
</body> 
 

 
</html>

+0

がしますprint_r 'の結果を投稿してください使用($ _ POSTは、[ 'checked_id []'])' – Boby

+0

なかった理由3番目のコードからスクリプトを繰り返しますか? 3番目のコードで削除確認用のスクリプトをすでにお持ちの場合、最後に指定したコードのAJAXの目的は何ですか?あなたの最初のコードは 'delete_multiple.php'と仮定します。クラスタグが 'btn_delete'のボタンはどこにありますか? –

+0

@LoganWayne混乱して申し訳ありませんが、私はここに自分のコードを貼り付けたときにそれを削除するのを忘れました。実際には1行の削除だけで、複数の削除機能とは関係ありません。ボタンについては、コードから削除しました。 –

答えて

0

質問:

  • なぜあなたはあなたの第三与えられたコードからスクリプトを繰り返したのですか?
  • 3番目のコードで削除確認用のスクリプトを既にお持ちの場合、最後に指定したコードでAJAXの目的は何ですか?
  • あなたの最初に与えられたコードはdelete_multiple.php
  • となります。クラスタグがbtn_deleteのボタンはどこにありますか?
  • ブラウザのコンソールからエラーが表示されますか?

最初に、ユーザーのテーブルの下のDeleteボタンがバッチ削除用であると仮定します。冗長スクリプトを削除し、jQueryスクリプトを実行しているので、jQueryファイルが含まれていることを確認してください。

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

次に、各行に削除ボタンが必要ですか?あなたの最後のコードでは、これはAjaxの目的ですか?

削除ボタン(単一の削除)のための新しい列を追加します:btn_deleteがクリックされた場合、それだけでその行を削除するように

.... 
<td class="appointmentDate" data-id2="'.$row["id"].'" contenteditable>'.$row["appointmentDate"].'</td> 
<td class="message" data-id2="'.$row["id"].'" contenteditable>'.$row["message"].'</td> 
<td><a href="#" data-artid="'.$row["id"].'" class="btn_delete"><span class="glyphicon glyphicon-remove"></span></a></td> 
.... 

を:

$(document).on('click', '.btn_delete', function(){ 

    var elem = $(this), 
     id = elem.data("data-artid"); 

    if(confirm("Are you sure you want to delete this?")) 
    { 
     $.ajax({ 
      url:"delete.php", 
      method:"POST", 
      data:{id:id}, 
      dataType:"text", 
      success:function(data){ 
       elem.closest("tr").hide(200); 
      } 
     }); 
    } 
}); 

だからあなたdelete.phpに削除クエリが表示されます:

mysqli_query($conn,"DELETE FROM appointments WHERE id=".$_POST["id"]); 

提案:

  • 使用少なくとも*_real_escape_string()
  • またはいっそのは、prepared statement
+0

申し訳ありません、私はすでにあなたの質問に答えています。私はすでにそれらを持っています(ここには含まれていませんでした。)バッチの削除は私の懸念です:)私は申し訳ありませんそれを明確にする。私はあなたのバッチ削除の提案をお試しさせていただきます。 –

+0

また、3番目のコードを更新しました。私はそれが欠けていたことに気づいた、エディタは何とか早くそれをトリミングした。申し訳ありません、 –

+0

@ NathanDeGuia - バッチ削除を実行しようとすると、ブラウザのコンソールにエラーが表示されますか? –

関連する問題