CI - Loading controller with Javascript button

$('ul.list1 li a').on('click', function(e) {    e.preventDefault();    $('a.button1').removeClass("active");    $(this).parent().find('a.button1').addClass("active");    $("div#content div.comments").fadeOut('slow')    .load($(this).attr('href')).fadeIn('slow');    var col1Height = $("div#left-pannel").height() -63 ;    $('div#sidebar').css("min-height", col1Height );});

div#content div.comments will be replaced with new content from the server if your view echos anything as html.

Your click handler needs two things: preventDefault(), and an AJAX method such as jQuery's $.ajax() or $.get().

preventDefault() will prevent the default action of navigating the page to the href value. Add a parameter to the click event to represent the event, and call preventDefault() on that.

$.ajax() or $.get() will perform the action of hitting the URL to cast the vote. Personally I prefer $.ajax(), it performs a GET request by default but you can set the type to POST. There are many other options available such as dataType (json, text, xml, etc.). The success and error functions are straight-forward to implement too.

JavaScript:

$('ul.list1 li a').click(function(e) {    e.preventDefault();    // cache this for scope change    var $this = $(this);    $.ajax({        url: this.href,        success: function() {            // your original JavaScript here            $('a.button1').removeClass('active');            $this.addClass('active'); // no need for .parent().find()            $('div#content div.comments').fadeIn('slow');            var col1Height = $("div#left-pannel").height() - 63;            $('div#sidebar').css("min-height", col1Height);        },        error: function() {            alert('Sorry, your vote was not successful.');        }    });});

I also changed how you called addClass() in your code. First, we needed to cache $(this) since "this" will no longer refer to the clicked element in the success function. Second, based on the HTML you provided, the element you need to find, 'a.button', is the element that was clicked. If that is the case, we can drop .parent().find('a.button') and just operate on $this directly.

More on jQuery.ajax(): http://api.jquery.com/jQuery.ajax/

Feel free to ask questions about the code. I hope that helps!

Somewhere on your javascript code you need to actually call the Controller,

Depending on how you build your controller you can do something like this

$('ul.list1 li a').click(function() {    $(this).parent().find('a.button1').addClass("active");    $('div#content div.comments').load('http://url/to/the/controller/plus/params/to/cast/the/vote');    $("div#content div.comments").fadeIn('slow');    var col1Height = $("div#left-pannel").height() -63 ;    $('div#sidebar').css("min-height", col1Height );    return false;});

In case you are expecting post variables on your controller the request would be a little different.

Also i'm assuming that there is a div.comments somewhere in your html.

Can you post the method from you controller that handles the request?