without refreshing the page how to replace and display the updated values from database using ajax/jquery in codeigniter

Question

Here when the likes() function is call through ajax the function gets executed properly without refreshing the page, but in view the likes of user remains the same. When the page is refreshed then the updated values of likes are shown. I want that the updates likes also should be shown without refreshing the page.

before refresh, but likes() function executed

after refreshing the page

Controller:

public function likes()
    {
        if(!$this->session->userdata('logged_in_user'))
        {   
            $this->session->set_flashdata('like','Please login to like.');
            redirect('login');
        }

        $user_id = $this->input->post('user_id');
        $events_id = $this->input->post('events_id');

        // $permalink = $this->input->post('permalink');
        $data = array(
                'user_id' => $this->input->post('user_id'),
                'events_id' => $this->input->post('events_id'),
                'likes' => 1
        );

        $check_likes = $this->events_model->check_likes($user_id,$events_id);

        if(empty($check_likes))
        {
            $this->events_model->create_likes($data);
            // redirect('events/view/' .$permalink);
        }
        else
        {
            if($check_likes['likes'] == 1)
            {
                    $this->events_model->unlike($events_id,$user_id);
                    // redirect('events/view/' .$permalink);
            }
            else
            {
                    $this->events_model->update_like($events_id,$user_id);
                    // redirect('events/view/' .$permalink);
            }
        }
    }

Model:

public function create_likes($data){
        return $this->db->insert('flix_likes',$data);
    }
public function get_likes($events_id)
    {   
        $this->db->select('flix_profiles.name,flix_likes.*');
        $this->db->from('flix_profiles');
        $this->db->join('flix_likes','flix_likes.user_id = flix_profiles.user_id');
        $this->db->where('flix_likes.events_id',$events_id);
        $query = $this->db->get();
        return $query->result_array();
    }

View:

<form id="form">
                    <?php 
                    $cnt=0;
                    foreach ($likes as $value)
                    { 
                        $cnt += $value['likes'];
                    } ?>
                    <input type="hidden" id="user_id" name="user_id" value="<?php echo $this->session->userdata('id'); ?>">
                    <input type="hidden" id="events_id" name="events_id" value="<?php echo $events['events_id']; ?>">
                    <input type="hidden" id="permalink" name="permalink" value="<?php echo $events['permalink']; ?>">
                    <button class="fa fa-thumbs-up fa-2x"></button> <b style="font-size:'20';"><?php if(!empty($likes)) { echo $cnt." Likes."; } ?></b>
                </form>

Jquery/ajax:

$(function () {
 $("#form").submit(function(e){
  var user_id = $('#user_id').val();
  var events_id = $('#events_id').val();
  var permalink = $('#permalink').val();

  $.ajax({
          type:'POST',
          url:'<?php echo base_url('events/likes'); ?>',
          data:{'user_id':user_id,'events_id':events_id,},
          success:function(data){
               console.log('success');
          }
      });
  return false;
 });
});

Answer 1

first stop form submit then reflect the values after ajax success.

$(function () {
 $("#form").submit(function(e){
  e.preventDefault(); //-------------------
  var user_id = $('#user_id').val();
  var events_id = $('#events_id').val();
  var permalink = $('#permalink').val();

  $.ajax({
          type:'POST',
          url:'<?php echo base_url('events/likes'); ?>',
          data:{'user_id':user_id,'events_id':events_id,},
          success:function(data){
              var jsonData = JSON.parse(data);  //--------
                $('#likes').text(jsonData.likes); 
               console.log('success');
          }
      });
  return false;
 });
});