Встроенное редактирование с использованием Ajax в Jquery

Question

Может, кто-нибудь подскажет, где я могу ошибаться, используя следующий код? Я пытаюсь сделать некоторые поля в таблице HTML редактируемыми с помощью Ajax и Jquery. Редактирование работает во внешнем интерфейсе, но когда я обновляю страницу, изменения исчезают, поскольку они не записываются в базу данных. Пока идет мой код:

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 моей базы данных: customer_id, name, address_line_1, address_line_2, address_line_3, город, округ, телефон, мобильный телефон, электронная почта

Answer 1

Я думаю, вам нужно упростить проблему. Во-первых, кажется, что данные не сохраняются на стороне сервера. Вы не проверяете, есть ли ошибка во время выполнения вашего запроса. Измените его так, чтобы найти ошибку / устранить вектор ошибки:

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

И измените успех, чтобы увидеть все возвращенные сообщения об ошибках:

success: function(data){

alert(data);
}});

Если это пустое значение, мы можем исключить ошибку в вашем запросе.

Answer 2

В вашем выражении 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);

Другая проблема заключается в том, что ваши rownumber и field в arr[]может легко запутаться, так как вы просто раскалываетесь и предполагаете, что кто-то пришел первым.