Question

我正在使用Codeigniter框架来开发我的项目。我也在使用AJAX编辑数据。当我编辑第一个数据时，它被正确地编辑，但是当我更新第二个数据而不刷新浏览器时，先前的编辑数据或当前的编辑数据都被更新为新结果。请解决我的问题。预先感谢。

function editFunction(id)
  {
    $.ajax({
            url: "edit_result/" +id,
            data: {id:id},
            type: "post",
            async: false,
            dataType: 'json',
            success: function(response){
                $('#reg_no').val(response.reg);
                $('#total_marks').val(response.tot_marks);
                $('#grade').val(response.grade);
                   },
                   error: function()
                   {
                    alert("error");
                   }
          });
    $('#updateBtn').click(function(event){
      event.preventDefault();
        var grade_id =  document.getElementById("grade").value;
        var total_id =  document.getElementById("total_marks").value;
           if(grade_id=='' || total_id=='')
           {
            $('#updateBtn').prop('disabled',true);
            setTimeout(function(){document.getElementById("updateBtn").disabled = false;},2000);
            $('.message').html('Please fill all fields').fadeIn().delay(1000).fadeOut('slow');;
           }
           else
           {
      $.ajax({
            url: "edit_result_valid/" +id,
            data: $(this).serialize(),
            type: "post",
            async: false,
            dataType: 'json',
            success: function(response){
               alert('success');
                   },
                   error: function()
                   {
                    alert("error");
                   }
          });
    }
    });

  }

我正在对模式执行编辑操作。请同时检查HTML代码

  <div class="modal fade" id="editModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title">Edit Result</h2>
            <p class="message" style="color: red;"></p>
          </div>
          <div class="modal-body">
          <form role="form" id="updateForm">
          <div class="box-body">
            <div class="form-group">
              <label for="exampleInputEmail1">Reg No :</label>
              <input type="text" class="form-control" id="reg_no" readonly="">
            </div>
            <div class="row">
              <div class="col-sm-6">
            <div class="form-group">
              <label>Total Marks :</label>
              <input type="number" class="form-control" id="total_marks" placeholder="Enter total marks" onfocus="colorFunction(this)" name="tot_marks">
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label>Grade</label>
              <?php
                  $firstItem[''] = 'Please select one...';
                  $options = array(
                    'A++'    => 'A++ (90% & above)',
                    'A+'     => 'A+ (80% to 89%)',
                    'A'      => 'A (60% to 79%)',
                    'B+'     => 'B+ (50% to 59%)',
                    'B'      => 'B (40% to 49%)',
                  );
                  $options = array_merge($firstItem, $options);
                  $selected_option = $this->input->post('grade', TRUE);
                  echo form_dropdown('grade', $options,$selected_option,['class'=>'form-control','id'=>'grade','onfocus'=>'colorFunction(this)']); ?>
            </div>
          </div>
          </div>
        </div>
          <!-- /.box-body -->
        </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
             <button type="submit" class="btn btn-success pull-right" data-dismiss="modal" id="updateBtn">Update</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

Answer 1

我已经回答了我的问题。我在代码中使用off（'click'），可以在下面看到更新代码。

 $('#updateForm').off('click','#updateBtn').on('click','#updateBtn',function(event){
      event.preventDefault();
        var grade_id =  document.getElementById("grade").value;
        var total_id =  document.getElementById("total_marks").value;
           if(grade_id=='' || total_id=='')
           {
            $('#updateBtn').prop('disabled',true);
            setTimeout(function(){document.getElementById("updateBtn").disabled = false;},2000);
            $('.message').html('Please fill all fields').fadeIn().delay(1000).fadeOut('slow');;
           }
           else
           {
      $.ajax({
            url: "edit_result_valid/" +id,
            data: $("#updateForm").serialize(),
            type: "post",
            async: false,
            dataType: 'json',
            success: function(response){
              if(response=='1')
              {
                $('.alert-success').show();
                $('.alert-success').html('Result Updated Successfully').fadeIn().delay(4000).fadeOut('slow');
               $('#example1').DataTable().ajax.reload();s
              }
              },
                   error: function()
                   {
                    alert("error");
                   }
          });
    }
    });

Answer 2

首先在视图上玩游戏。我想你没有使用数据库的主键来更新。让我解释一下。

查看时：在另外一个输入元素上，该输入元素是隐藏的，并且具有您的主键值。给它分配一个具有tbl_id示例值的ID

<input type="hidden" value="<?php echo {variable that has your primary key } ?>" id="tbl_id" >

在开始编写之前，在ajax调用中

var id = $("#tbl_id").val();

致电控制器时，请检查您是否有可用的ID 接下来，您将调用模型进行更新。这是您所有其他数据得到更新的地方。

要在其之前调用模型use语句时

if($id != '') { // $id is what you have shared via ajax call
 $this->model_name->update_function($id,$array); // $array is all other fields as per codeigniter need
} else { echo "unable to capture id"; exit; }

最后更新模型。

所有操作均由ajax完成：)

当我使用Ajax更新Codeigniter中的第二个数据时，将再次编辑我先前编辑的数据

2 个答案: