JaveryでAjaxを使用したインライン編集

Question

誰かが次のコードでどこが間違っているかもしれないかお勧めしますか？私はAjaxとJqueryを使って編集可能なhtmlテーブルのいくつかのフィールドを作ろうとしています。編集はフロントエンドで動作していますが、ページを更新すると編集内容はデータベースに書き込まれなくなるので消えます。私のコードは、これまで行く：

のindex.phpを - 私は編集可能な名前フィールド

echo "<table cellpadding='0' cellspacing='0' border='0' class='table table-striped' id='datatable'> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Address</th> 
      <th>City</th> 
      <th>County</th> 
      <th>Phone</th> 
      <th>Mobile</th> 
      <th>Admin</th> 
     </tr> 
     </thead><tbody>"; 
     while($row = $sth->fetchObject()){ 
      echo '<tr> 
       <td class="edit name '.$row->customer_id.'">'.$row->name.'</td> 
       <td>'.$row->address_line_1.',<br />'.$row->address_line_2.',<br />'.$row->address_line_3.'</td> 
       <td>'.$row->city.'</td> 
       <td>'.$row->county.'</td> 
       <td>'.$row->phone.'</td> 
       <td>'.$row->mobile.'</td> 
       <td><div class="btn-group"> 
       <a class="btn btn-primary" href="#">Admin</a> 
       <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> 
       </a><ul class="dropdown-menu"> 
       <li><a href="mailto:'.$row->email.'"><i class="icon-envelope"></i>Email</a></li><li><a href="#"><i class="icon-pencil"></i>Edit</a></li><li><a id="'.$row->customer_id.'" class="delete"/><i class="icon-trash"></i>Delete</a></li> 
       </td></tr>'; 
        } 
      echo "</tbody></table>"; 

のjQuery

<script> 
      $(document).ready(function(){       
       $('td.edit').click(function(){ 
        $('.ajax').html($('.ajax input').val()); 
        $('.ajax').removeClass('ajax'); 

        $(this).addClass('ajax'); 
        $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">'); 

        $('#editbox').focus(); 

       } 
      ); 
       $('td.edit').keydown(function(event){ 
        arr = $(this).attr('class').split(" "); 
         if(event.which == 13) 
          { 
          $.ajax({ type: "POST", 
             url:"includes/edit-customer.php", 
             data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1], 
             success: function(data){ 
              $('.ajax').html($('.ajax input').val()); 
              $('.ajax').removeClass('ajax'); 
             }}); 
         } 

        } 
       ); 
        $('#editbox').live('blur',function(){ 
        $('.ajax').html($('.ajax input').val()); 
        $('.ajax').removeClass('ajax'); 
       }); 
      }); 
    </script> 

編集customer.phpを作成しようとしています

<?php 

    //MySQL Database Connect 
    require 'config.php'; 

    if(isset($_POST['rownum'])) 
    { 
     update_data($_POST['field'],$_POST['value'],$_POST['rownum']); 
    } 

    print_r($_POST); 

    function get_data() 
    { 
     $query = $dbh->prepare("SELECT * FROM customer"); 
     $query->execute(); 
     return $query; 
    } 

    function update_data($field, $data, $rownum) 
    { 
     $query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum;); 
     $query->execute();  
    } 
?> 

私のデータベースの顧客テーブルの列をCUSTOMER_IDされ、名前、address_line_1、address_line_2、address_line_3、市、郡、電話、携帯電話、電子メール

Answer 1

セミコロンは、あなたのUPDATE文であり：

$query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum;); 

$query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum); 

もう一つの問題は、あなただけの分割とされているのでarr[]でごrownumberとfieldが簡単に混入することができることであるであるべき1つは最初に来たと仮定します。

Answer 2

私は問題を簡素化する必要があると思います。まず、データがサーバー側に保存されていないようです。クエリの実行中にエラーがないかどうかはチェックしません。すべてのエラーメッセージが返さ見に

$result = $query->execute();  
// execute() can fail for various reasons. 
if (false===$result) { 
    die('execute() failed: ' . htmlspecialchars($query->error)); 
}' 

と成功を変更：/エラーを見つけることのようにそれを修正し、エラーベクトルを排除

success: function(data){ 

alert(data); 
}}); 

をこれが空の場合、我々は、エラーを排除することができますあなたの質問に。