使用ajax jquery

时间:2017-04-03 13:36:06

标签: javascript php jquery mysql ajax

我尝试使用ajax jquery在表列上进行就地编辑。我正在用这样的ajax jquery返回表:

找到表格的表格:

<div class="input-group">
    <span class="input-group-addon">Term</span>
     <!-- I passed the tables name as values for a specific period -->
        <select name="term" class="form-control" id="term">
           <option value="">Select Period</option>
           <option value="period_one">1st Period</option>
           <option value="period_two">2nd Period</option>
           <option value="period_three">3rd Period</option>
           <option value="period_four">4th Period</option>
           <option value="period_five">5th Period</option>
           <option value="period_six">6th Period</option>
           <option value="first_exam">First Semester Exam</option>
           <option value="second_exam">Second Semester Exam</option>
         </select>
  </div>

发送post值的JQuery Ajax脚本:

<script>


$(document).ready(function() {
    $('#term').on('change', function() {
    var term = $('#term').val();
    if (term != '') {
      $.ajax({
          url:"findGrades.php",
          method:"post",
          data:{"term":term},
          dataType:"text",
          success:function(data){
            $("#result").html(data);
          //after the result have been displayed the datatable function is called
          $('#dataTable').DataTable();
        }
      });
    } else {
      $("#result").html('');
    }
   }); 
 });

我的findGrades.php的代码

$term = mysqli_escape_string($connection, $_POST['term']);

$output .= '<td contenteditable="true" onBlur="saveToDatabase(this,'.$term.','.$row["score"].','.$row['id'].')">'.$row["score"].'</td>';

根据返回的结果(表格),我希望能够编辑该表中的列,这是我在此处显示的列。这就是为什么我在其上添加了一个令人满意的属性。

Ajax为表格带来了正确的结果,但当我尝试更新时,我从我的js控制台收到此错误:

未捕获的ReferenceError:未定义period_one     在HTMLTableCellElement.onblur(gradesTry:1)

&#39; PERIOD_ONE&#39;是select元素之一的值,也是term / table

的值

以下是我的完整脚本文件的外观:

<script>
    function saveToDatabase(editableObj,term,column,id) {
        $.ajax({
           url: "saveedit.php",
           method: "POST",
data:'&editval='+editableObj.innerHTML+'&term='+term+'&column='+column+'&id='+id,
           dataType:"text",
           success: function(data){
            $('#result').html(data);
           }        
       });
     }

$(document).ready(function() {
    $('#term').on('change', function() {
    var term = $('#term').val();
    if (term != '') {
      $.ajax({
          url:"findGrades.php",
          method:"post",
          data:{"term":term},
          dataType:"text",
          success:function(data){
            $("#result").html(data);
          //after the result have been displayed the datatable function is called
          $('#dataTable').DataTable();
        }
      });
    } else {
      $("#result").html('');
    }
   }); 
 });
</script>

saveedit.php的内容

$column = $_POST["column"];
$value = $_POST['editval'];
$id = $_POST['id'];
$term = $_POST['term'];

$query = "UPDATE $term SET $column = '{$value}' WHERE id = $id";
$result = mysqli_query($connection, $query);
if ($result && mysqli_affected_rows($connection) >= 0){
        echo "updated successfully";
} else {
    die("Database query failed. ". mysqli_error($connection));
}

我非常确定我没有以正确的方式做事。如果您能指出正确的方向,我将非常感激。感谢。

0 个答案:

没有答案