Codeigniter Ajax Post not working

Question

Hello guys im trying to create a simple voting for comments like and dislike but i want to do that with jquery Ajax so i don't want to refresh the page when someone like it.

And this is my jquery code

$(document).ready(function(){
      $(".vote-btn").click(function() {
        var voteId = this.id;
        var upOrDown = voteId.split('_'); 
        // alert(upOrDown); = provides -->  id,name
        // var all = 'voteId:'+upOrDown[0]+ ',upOrDown:' +upOrDown[1];
        // alert(all);

        $.ajax({
            type: "POST",
            url: "http://localhost/Dropbox/cipr/index.php/demo",
            cache: false,
            dataType:'json',            
            data:{'voteId='+upOrDown[0] + '&upOrDown=' +upOrDown[1],
            success: function(response){                
                try{
                    if(response=='true'){   
                        var newValue = parseInt($("#"+voteId+'_result').text()) + 1;            
                        $("#"+voteId+'_result').html(newValue);
                    }else{
                        alert('Sorry Unable to update..');
                    }
                }catch(e) {     
                    alert('Exception while request..');
                }       
            },
            error: function(){                      
                alert('Error while request..');
            }
         });
    });
});

this is my Controller code Demo.php

<?php

class Demo extends CI_Controller {

function Demo(){
    parent::Controller();
    $this->load->model('sygjerimet');
}

public function index(){

    $voteId=  $this->input->post('voteId');
    $upOrDown=  $this->input->post('upOrDown');

    $status ="false";
    $updateRecords = 0;

    if($upOrDown=='voteup' || true){
        $updateRecords = $this->sygjerimet->updateUpVote($voteId);
    }else{
        $updateRecords = $this->sygjerimet->updateDownVote($voteId);
    }

    if($updateRecords>0){
        $status = "true";
    }
    echo $status;
}

And this is my model code sygjerimet.php

<?php 

Class Sygjerimet extends CI_Model {

function shtoSygjerimin()
{
    $permbajtja = $this->input->post('idea');
    $data = array(
        'permbajtja' => $permbajtja
    );

    $this->db->insert('pr_sygjerimet', $data);

}

function updateDownVote($voteId){
    $sql = "UPDATE pr_sygjerimet set vote_down = vote_down+1 WHERE ID =?";
    $this->db->query($sql, array($voteId));
    return $this->db->affected_rows();
}

function updateUpVote($voteId){
    $sql = "UPDATE pr_sygjerimet set vote_up = vote_up+1 WHERE ID =?";
    $this->db->query($sql, array($voteId));
    return $this->db->affected_rows();
}

}

And this is my view Code

<?php
          $query = $this->db->query('SELECT * FROM pr_sygjerimet');

            foreach ($query->result() as $row)
            {
                echo "<div class='sygjerimi'>";
                echo htmlspecialchars($row->permbajtja);
                if(!$log_in):
                echo '<br>';
                echo ' <button id="'.$row->ID.'_votedown" class="vote-btn"><i class="fa fa-thumbs-down">'.htmlentities($row->vote_down).'</i></button> ';
                echo ' <button id="'.$row->ID.'_voteup" class="vote-btn"><i class="fa fa-thumbs-up">'.htmlentities($row->vote_up).'</i></button> ';
                endif;
                echo "</div>";
            }

        ?>

That's it guys when i cilck vote it executes this code

alert('Error while request..');

If anyone can help that would be Great :) Thanks

Answer 1

try this

$.ajax({
    //pull the toke csrf like this
    data:{'<?php echo $this->security->get_csrf_token_name();?>':'<?php echo $this->security->get_csrf_hash();?>'},

});

Answer 2

Most likely this is the CI CSRF protection; if you use POST, CI automatically checks the CSRF hidden field and since you are building the ajax post yourself, it's not sending the hidden field so it bags on you.

Check the several $config['csrf_*'] lines in your config/config.php file. You can disable (but I don't recommend this). You can also serialize the form in jQuery and send that, and it should work for you, and keep you a bit more protected from CSRF attacks.

Just to rule this in or out, you can disable the 'csrf_protection' and if it works then, you can enable it again and then change your javascript to serialize the form and use that as your data with your ajax post.