Changing data dynamically using Ajax in CodeIgnite

问题:

This question already has an answer here:

• Displaying the data dynamically using Ajax 5 answers

I have this like button, when I click this one, the no of likes will change automatically. The number of likes is displayed above the button. To do this, I've used ajax to implement this function.

This is my code in the View:

<p id='state'>
   <i class='fa fa-thumbs-up'></i> <?php echo $countLike;?> likes &bull; 
   <i class='fa fa-thumbs-down'></i> <?php echo $countDisLike;?> dislikes</p>

   <button class='detailButton' name='like_name' id='click_like' value='<?php echo $link;?>' title='Like this post'><i class='fa fa-thumbs-up'></i> Like</button>

Javascript code above the view:

<script type="javascript/text">
$(document).ready(function){
  $("#click_like").click(function(event){
    event.preventDefault();
    var id = document.getElementById("click_name").value;
    jQuery.ajax({
      type:"GET",
      url: "<?php echo base_url();?>index.php/photoCheese/like_total/",
      dataType:'json',
      data: {like_id = id},
      success: function(res){
        if(res){
          jQuery("div#state").html(res.no_likes);
        }      
      }
    });
  });
});

My controller:

public function like_total(){
        $id = $this->session->userdata('userID');
        $upload = $_GET['like_id'];
        $data = array('like' => 1,
                        'userID'=>$id,
                        'uploadID'=>$_GET['like_id']);

        $this->photoCheese_model->get_like_total($data,$upload);

        return json_encode($data);
    }

Model:

public function get_like_total($data,$uplaod){
        $success = $this->db->insert('tbl_like',$data);

        if($success){
            $this->db->select('uploadID,SUM(`like`) as no_likes',false);
            $this->db->where('uploadID',$upload);
            $this->db->where('like !=',2);

            $query = $this->db->get();


        }
        return $query->result_array();
    }

When I try to run this code, it has no effect. I mean, it shows no result at all. I'm new to ajax and it is my first time also to implement this one. Please, help me with this one. Thanks a lot.

回答1:

this is wrong in your code.Also take reference from jQuery.ajax()

data: {like_id = id},

it would be

data: {like_id:id},

回答2:

As stated by saty your data object is not correct.

In addition, and more important, this line fails:

jQuery("div#state").html(res.no_likes);

Your #state is a p element not a div so the selector should not select anything at all. Thus resulting in not seeing any change. The next error in that line is that it replaces the complete HTML with the number, instead of just updating the number. Try this HTML and JS instead:

html:

<p id='state'>
    <i class='fa fa-thumbs-up'></i><span id="state_likes"><?php echo $countLike;?></span> likes &bull; 
    <i class='fa fa-thumbs-down'></i> <?php echo $countDisLike;?> dislikes
</p>

<button class='detailButton' name='like_name' id='click_like' value='<?php echo $link;?>' title='Like this post'><i class='fa fa-thumbs-up'></i> Like</button>

javascript:

jQuery.ajax({
  type:"GET",
  url: "<?php echo base_url();?>index.php/photoCheese/like_total/",
  dataType:'json',
  data: {like_id: id},
  success: function(res){
    if(res){
      jQuery("#state_likes").html(res.no_likes);
    }      
  }
});

That should get you in the right direction. If you want I can refactor your code some more for readability.

回答3:

You need to update your code

data: {like_id = id},

into

data: {like_id : id},

or you can also pass it like as

data: "like_id ="+id,

SideNotes

1) Within your Controller. Why you were using $_GET['like_id'] you can use CI function as

$upload = $this->input->get('like_id');

2) Within your controller it seems you were returning encoded $data and not the result

return json_encode($data);

it should be

$result = $this->photoCheese_model->get_like_total($data,$upload);

return json_encode($result);

You can check your consoles using console.log() as

success: function(res){
        console.log(res);
        if(res){
          jQuery("div#state").html(res.no_likes);
        }      
      }

回答4:

change data like below use : in place of =

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

jQuery.ajax({
      type:"GET",
      url: "<?php echo base_url();?>index.php/photoCheese/like_total/",
      dataType:'json',
      data: {like_id : id},
      success: function(res){

          $("#like").html(res);

      }
    });

and your HTML for showing like count like below

<p id='state'>
   <i class='fa fa-thumbs-up'></i> <b id="like"><?php echo $countLike;?></b> likes &bull; 
   <i class='fa fa-thumbs-down'></i> <?php echo $countDisLike;?> dislikes</p>

回答5:

Debug your code by opening Inspect element in Chrome and then press 'like_name' button and see the if there is new link added to Network Tab if No then your your is just not calling the function, If yes there is new link the click on that and check response and header, BTW remove the event.preventDefault(); its only for submit button

Please upload an image similer to this one containg your result

Use this image as reference to how to upload image