CI - Upload Controller with Javascript Button
I am admittedly not very good with Javascript (and then AJAX). I have a button that you click to vote on a page. After clicking on the page, the section descends and expands so that you can see the comments below (so that the voter is not shaken by the comments). This works nicely, but unfortunately the button click doesn't actually load the PHP controller to send votes to the database.
View:
<div class="vote clearfix">
<ul class="list1 clearfix">
<li class="css3">
<a href="<?=base_url()?>vote/submit_vote/<?=$post?>/1/1" class="button1 css3">
<span>Button Text</span></a>
</li>
</ul>
</div>
JavaScript:
$('ul.list1 li a').click(function() {
$('a.button1').removeClass("active");
$(this).parent().find('a.button1').addClass("active");
$("div#content div.comments").fadeIn('slow');
var col1Height = $("div#left-pannel").height() -63 ;
$('div#sidebar').css("min-height", col1Height );
return false;
});
I would like this button to pass the vote to the controller. What would be the best way to fix the button so that it links normally?
source to share
Your click handler needs two things, preventDefault () and an AJAX method like jQuery $ .ajax () or $ .get ().
preventDefault () will prevent the default action of moving the page by the href value. Add a parameter to the click event to represent the event and call the preventDefault () function.
$. ajax () or $ .get () will do the action to remove the voting url. I personally prefer $ .ajax (), it makes 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 also directly implemented.
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 so, we can drop .parent (). Find ('a.button') and just work with $ this directly.
More on jQuery.ajax (): http://api.jquery.com/jQuery.ajax/
Feel free to ask questions about the code. Hope this helps!
source to share
$('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 looks like html.
source to share
Somewhere in your javascript code you need to call Controller,
Depending on how you are creating 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;
});
If you are expecting post variables on your controller, the request will be slightly different.
Also I am assuming you have div.comments in your html.
Can you post this method to your controller that handles the request?
source to share
Something like this should do it:
$('ul.list1 li a').click(function() {
var a = this;
$('a.button1').removeClass("active");
$(a).parent().find('a.button1').addClass("active");
$("div#content div.comments").hide().load($(a).attr("href"), function(){ $(this).fadeIn('slow'); });
var col1Height = $("div#left-pannel").height() -63 ;
$('div#sidebar').css("min-height", col1Height );
return false;
});
source to share
You need to AJAX call to your controller
<div class="vote clearfix">
<ul class="list1 clearfix">
<li class="css3">
<a href="<?=base_url()?>vote/submit_vote/<?=$post?>/1/1" class="button1 css3">
<span>Button Text</span></a>
</li>
</ul>
</div>
JS:
$('ul.list1 li a').click(function(e) {
e.preventDefault();
var obj = $(this);
$.get(obj.attr('href'),function(res){
if(res == 1) //assuming your controller returns 1 on success
{
$('a.button1').removeClass("active");
$(this).parent().find('a.button1').addClass("active");
$("div#content div.comments").fadeIn('slow');
var col1Height = $("div#left-pannel").height() -63 ;
$('div#sidebar').css("min-height", col1Height );
}
});
});
source to share
How about this:
JAVASCRIPT:
$('ul.list1 li a').click(function() {
$('a.button1').removeClass("active");
$(this).parent().find('a.button1').addClass("active");
$("div#content div.comments").fadeIn('slow');
var col1Height = $("div#left-pannel").height() -63 ;
$('div#sidebar').css("min-height", col1Height );
var post = $(this).attr('id');
$.ajax({
url: '<?=base_url()?>vote/submit_vote/' + post +'/1/1'
});
});
HTML:
<div class="vote clearfix">
<ul class="list1 clearfix">
<li class="css3">
<a id="<?=$post?>" href="#" class="button1 css3">
<span>Button Text</span></a>
</li>
</ul>
</div>
source to share