即使刷新后,Ajax也没有显示最新结果

时间:2016-06-09 15:15:28

标签: php jquery ajax pdo

我有一个基本表(简化数据以尝试定位问题),它使用jquery .ajax以便允许实时输入,删除和修改数据。这曾经工作正常,但我最近转移到PDO而不是mysqli,并随后转换此代码,但它没有按预期工作。我创建的fetch_data()函数没有得到最新的插入(即使在刷新+它在数据库中的IS之后),这意味着数据不完整。想知道是否有人可以提供帮助。

编辑1:为了清楚起见,即使页面刷新后,也只会显示最新的数据条目。然而,一旦输入了另一个新条目,该数据条目确实显示出来。 (所以在表格显示之前就有一个缓冲区)

的index.php

$(document).ready(function(){  
  function fetch_data()  
  {  
       $.ajax({  
            url:"select.php",  
            method:"POST",  
            success:function(data){  
                 $('#live_data').html(data);  
            }  
       });  
  }  
  fetch_data();  
  $(document).on('click', '#btn_add', function(){  
       var first_name = $('#first_name').text();  
       var last_name = $('#last_name').text();  
       if(first_name == '')  
       {  
            alert("Enter First Name");  
            return false;  
       }  
       if(last_name == '')  
       {  
            alert("Enter Last Name");  
            return false;  
       }  
       $.ajax({  
            url:"insert.php",  
            method:"POST",  
            data:{first_name:first_name, last_name:last_name},  
            dataType:"text",  
            success:function(data)  
            {  
                 alert(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', '.first_name', function(){  
       var id = $(this).data("id1");  
       var first_name = $(this).text();  
       edit_data(id, first_name, "first_name");  
  });  
  $(document).on('blur', '.last_name', function(){  
       var id = $(this).data("id2");  
       var last_name = $(this).text();  
       edit_data(id,last_name, "last_name");  
  });  
  $(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();  
                 }  
            });  
       }  
  });  
 });

select.php

$dbc = new PDO("mysql:host=".DBHOST.";port=3306;dbname=".DBNAME, DBUSER, DBPASS);
$dbc->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$output = '';

$dbq = $dbc->prepare('SELECT * FROM tbl_sample ORDER BY id DESC');
$dbq->execute();
$dbq->fetch(PDO::FETCH_ASSOC);

$output .= '  
<div class="table-responsive">  
    <table class="table table-bordered">  
       <tr>  
         <th width="10%">Id</th>  
         <th width="40%">First Name</th>  
         <th width="40%">Last Name</th>  
         <th width="10%">Delete</th>  
       </tr>';  
if($dbq->fetchColumn() > 0)  
{  
 while($row = $dbq->fetch(PDO::FETCH_ASSOC))  
   {  
    $output .= '  
       <tr>  
         <td>'.$row["id"].'</td>  
         <td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>  
         <td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>  
         <td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>  
       </tr>  
';  
  }  
$output .= '  
 <tr>  
  <td></td>  
  <td id="first_name" contenteditable></td>  
  <td id="last_name" contenteditable></td>  
  <td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>  
</tr>  
 ';  
}  
else  
{  
$output .= '
 <tr>  
<td colspan="4">Data not Found</td>  
 </tr>';  
 }  
 $output .= '</table>  
 </div>';  
 echo $output;

0 个答案:

没有答案