0

Im trying to find solution for this problem for almost 4 hours already what im doing is that im updating the profile information of the person that being logged in but the problem is that the update button inside modal is not working it doesn't update the data from db nor close the modal when finish this is my code

script

      $('#btn_update').on('click',function(){

        var faculty_name = $('#faculty_name_edit').val();
        var faculty_type = $('#faculty_type_edit').val();
        var department_name = $('#department_name_edit').val();
        var email_address = $('#email_address_edit').val();

         $.ajax({
             type : "POST",
             url  : "<?php echo site_url('pages/update_profile')?>",
             dataType : "JSON",
            data : {faculty_name: faculty_name, faculty_type:faculty_type, department_name:department_name, email_address:email_address},
             success: function(data){
               $('#faculty_name_edit').val("");
               $('#faculty_type_edit').val("");
               $('#email_address_edit').val("");
                $('#department_name_edit').val("");
               $('#edit_profile').modal('hide');
                show_profile();
            }
         });
         return false;


    });

View

    <form>

<div class="modal fade" id="edit_profile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update User Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Faculty Name</b></label>

  <div class="col-md-6">
    <input type="text" name="faculty_name_edit" placeholder="faculty_name" id="faculty_name_edit" class="form-control">
  </div>

</div>
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Faculty Type</b></label>
  <div class="col-md-6">
  <input type="text" name="faculty_type_edit" id="faculty_type_edit" class="form-control" placeholder="faculty_type" readonly>
  </select>
  </div>
</div>
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Department</b></label>

  <div class="col-md-6">
    <input type="text" name="department_name_edit" id="department_name_edit" class="form-control" placeholder="department_name" readonly>
  </div>

</div>
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Email</b></label>
  <div class="col-md-6">
  <input type="text" name="email_address_edit" id="email_address_edit" class="form-control" placeholder="email_address" required="email ">
  </select>
  </div>
</div>


</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>

Model

         function update_profile_data(){
            $faculty_name = $this->input->post('faculty_name');
            $faculty_type = $this->input->post('faculty_type');
            $department_name = $this->input->post('department_name');
            $email_address = $this->input->post('email_address');

            $this->db->set('faculty_name', $faculty_name);
            $this->db->set('faculty_type', $faculty_type);
            $this->db->set('department_name', $department_name);
            $this->db->set('email_address', $email_address);
            $this->db->where('faculty_name', $faculty_name);
            $result = $this->db->update('faculty');
            return $result;
        }

Controller

    public function update_profile()
{
    $data = $this->page_model->update_profile_data();
    echo json_encode($data);
}
Static A
  • 1
  • 1
  • this should help: https://stackoverflow.com/questions/21796947/jquery-ajax-function-not-working. Submit button triggers submit, handle submit event – Vickel May 07 '20 at 13:33

1 Answers1

0

$('#btn_update').on('click',function(e){
        e.preventDefault()
        var faculty_name = $('#faculty_name_edit').val();
        var faculty_type = $('#faculty_type_edit').val();
        var department_name = $('#department_name_edit').val();
        var email_address = $('#email_address_edit').val();

         $.ajax({
             type : "POST",
             url  : "<?php echo site_url('pages/update_profile')?>",
             dataType : "JSON",
            data : {faculty_name: faculty_name, faculty_type:faculty_type, department_name:department_name, email_address:email_address},
             success: function(data){
               $('#faculty_name_edit').val("");
               $('#faculty_type_edit').val("");
               $('#email_address_edit').val("");
                $('#department_name_edit').val("");
               $('#edit_profile').modal('hide');
                show_profile();
            }
         });
         return false;


    });
<form>

<div class="modal fade" id="edit_profile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update User Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Faculty Name</b></label>

  <div class="col-md-6">
    <input type="text" name="faculty_name_edit" placeholder="faculty_name" id="faculty_name_edit" class="form-control">
  </div>

</div>
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Faculty Type</b></label>
  <div class="col-md-6">
  <input type="text" name="faculty_type_edit" id="faculty_type_edit" class="form-control" placeholder="faculty_type" readonly>
  </select>
  </div>
</div>
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Department</b></label>

  <div class="col-md-6">
    <input type="text" name="department_name_edit" id="department_name_edit" class="form-control" placeholder="department_name" readonly>
  </div>

</div>
<div class="form-group row">
  <label class="col-md-6 col-form-label"><b>Email</b></label>
  <div class="col-md-6">
  <input type="text" name="email_address_edit" id="email_address_edit" class="form-control" placeholder="email_address" required="email ">
  </select>
  </div>
</div>


</div>
<div class="modal-footer">
<a href="#" class="btn btn-secondary" data-dismiss="modal">Close</a>
<a href="#" id="btn_update" class="btn btn-primary">Update</a>
</div>
</div>
</div>
</div>
</form>
jobayersozib
  • 401
  • 2
  • 7