Javascript Reload?

[eluser]Corey Freeman[/eluser]
I'm trying to make a social-media like voting system. I dunno if this is the totally wrong place to ask, but how would I go about having the button auto-reload and display the new amount of votes + disable the voting functionality?

I don't know if using a model to just check that the vote is in a pivot table and then reloading could be done in a frame, per say...

Sorry if this is way off-topic and confusing.

[eluser]treeface[/eluser]
The question that pertains to CI here is how you should handle AJAX requests with CodeIgniter. It effectively works just like a regular request. Run an asynchronous request in javascript to your server to the controller that you wish with a JSON string, decode it in your controller, do what you need to do with your model, load whatever you need to load from your views as strings (see params for the load view function), and pass back whatever you need to pass back to javascript in a new encoded JSON string (or whatever communication method you want to use).

Beyond this is outside the scope of CodeIgniter and might better be asked on a site like stackoverflow with tags for javascript, php, and codeigniter.

It would also help if you were more descriptive about exactly what you want to do. For now I'm left wondering what you mean by "auto-reload".

[eluser]Corey Freeman[/eluser]
Sorry. Like when you like something on facebook? It changes from "like" to "xxx people like this". That's the effect I'm trying to achieve.

[eluser]treeface[/eluser]
No worries..the most difficult part of learning something new is finding the right questions to ask. The trouble here is that you're asking to solve a simple problem in a complex frame of reference. If you know Javascript, PHP, and HTML this is not hard. OK so basically here are the issues at hand:

1. You will need an html element to click (the "like" button in your example).

2. If you don't understand javascript, you need to. If you're learning javascript for the first time, learn some basics about the language (it's not too hard) and then *use jQuery*. jQuery, like CodeIgniter in PHP, is a sort of "framework" for Javascript that lets you easily do pretty much everything you will need to do. This will, for the most part, solve any cross-browser JS issues and it will keep your code clean, compact, and readable.

3. This button will need to have an event listener attached to it. An event listener is just a function that is run when an event fires. So in Javascript you would have something like this:

Code:

$(document).ready(function() {
    $('#myLikeButton').click(runLike);
})

function runLike(e) {
    //send your item id off to php here...send it to the controller that you want to send it to
}

4. So now you're sending it off to PHP...in CodeIgniter, inside the controller method that is run on the asynchronous request, get the id, send it off to your model where you will have a "likeItem" function, get info back from the model, die() back the results to javascript, and manipulate your myLikeButton how you please.

So yeh...this is really a multi-topic question. If all of this is foreign to you, you need to look up tutorials first on how to use javascript, then on how to use jQuery, then on how to use CodeIgniter (if you don't know how), then on how to use AJAX with CodeIgniter (really these pieces are separate...you could take a javascript front-end and plug it into any backend just the same...only difference is in your URLs). Here's one I just found on Google:

http://www.mrforbes.com/blog/2009/01/a-q...-tutorial/

[eluser]Corey Freeman[/eluser]
Thanks for the comprehensive tutorial. I guess I'd say I have beginner-moderate knowledge of Code Igniter at this point, moderate PHP knowledge, Expert HTML knowledge, and beginner jquery knowledge. I'll have to look into the steps you've suggested. Thanks ^_^

I may have to hire someone to enhance this for me later, haha.

[eluser]treeface[/eluser]
You're welcome, Corey. Just spend the next day or two diving into jQuery (browse their website...they have great docs and examples) and you'll get a hang of it in no time. Since you know HTML, I think you'll be amazed at what it can do w/regard to HTML manipulation. Then do the same for CodeIgniter. If you're a real beginner, have a look at my (totally awful) tutorial on CodeIgniter here (at the time I wasn't as good as I am now, but that might be an advantage for you):

http://vimeo.com/8785711

Really what you're trying to do is just a simple asynchronous post request sent to PHP so CI can handle it, store the "like", and send info back to JS that it was successful (or any other info you wanna send back). Conceptually, it's not difficult at all, it's just a matter of understanding the moving parts.

Good luck!

[eluser]Corey Freeman[/eluser]
I found this tutorial: http://ad1987.blogspot.com/2009/02/reddi...l-and.html and tried adapting it to codeigniter. Of course, I got nothing...

VIEW

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
&lt;html lang="UTF-8"&gt;
&lt;head&gt;
&lt;title&gt;&lt;?=$title ?&gt; | ReveCloud - Aspiration Sharing&lt;/title&gt;
&lt;meta name="author" content="Minus the Pie Media" /&gt;
&lt;meta name="description" content="goal setting, dream sharing, goal social network, challenge setting" /&gt;
&lt;meta name="description" content="A website that allows you to share your goals and get encouragement to pursue your dreams." /&gt;
&lt;link rel="stylesheet" type="text/css" href="&lt;?=base_url() ?&gt;style.css" /&gt;
[removed][removed]
[removed]
$(function(){
$("a.vote_up").click(function(){
//get the id
the_id = $(this).attr('id');

// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");

//fadeout the vote-count
$("span#votes_count"+the_id).fadeOut("fast");

//the main ajax request
  $.ajax({
   type: "POST",
   data: "action=vote_up&id;="+$(this).attr("id"),
   url: "http://localhost:8888/dreams/index.php/votes",
   success: function(msg)
   {
    $("span#votes_count"+the_id).html(msg);
    //fadein the vote count
    $("span#votes_count"+the_id).fadeIn();
    //remove the spinner
    $("span#vote_buttons"+the_id).remove();
   }
  });
});
});
[removed]
&lt;/head&gt;
&lt;body&gt;
<div id="wrapper">
<div id="header">
<div id="logo">
&lt;?php if ($this->session->userdata('is_logged_in') != TRUE) { ?&gt;
<a href="&lt;?=base_url() ?&gt;"><img src="&lt;?php echo base_url(); ?&gt;images/logo.png" alt="Project 27" /></a>
&lt;?php }
else { ?&gt;
<a href="&lt;?=base_url() ?&gt;/index.php/dashboard"><img src="&lt;?php echo base_url(); ?&gt;images/logo.png" alt="Project 27" /></a>
&lt;?php } ?&gt;
</div>
<div id="user-info">
&lt;?php foreach($query->result() as $row): ?&gt;
<strong><a >id; ?&gt;">&lt;?=$row->username; ?&gt;</a></strong>
&lt;?php endforeach; ?&gt;
</div>
</div>
<div id="container">
<div id="profile-info">
&lt;?php foreach($query->result() as $row): ?&gt;
<img >avatar; ?&gt;" alt="&lt;?=$row->username; ?&gt;" />
<p><h3>&lt;?=$row->username; ?&gt;</h3>
This is where the description goes.</p>
&lt;?php endforeach; ?&gt;
</div>
<table id="goals">
<tbody>
&lt;?php foreach($goals->result() as $row):
$effective_vote = $row->votes;
?&gt;
<tr>
<td>&lt;?=$row->id ?&gt;</td>
<td>&lt;?=$row->image ?&gt;</td>
<td>&lt;?=$row->goal ?&gt;</td>
<td>
<span class='votes_count' id='votes_count&lt;?=$row->id; ?&gt;'>&lt;?php echo $effective_vote." votes"; ?&gt;</span>  
<span class='vote_buttons' id='vote_buttons&lt;?=$row->id; ?&gt;'>  
<a href='[removed];' class='vote_up'>id; ?&gt;'></a>  
</span>
</td>
</tr>
&lt;?php endforeach; ?&gt;
</tbody>
</table>
&lt;?php $this->load->view('footer'); ?&gt;

Votes Controller

Code:

<?php
class Votes extends Controller {

    function Votes() {
        parent::Controller();
    }
    
    function index() {
        $id = $_POST['id'];
        $action = $_POST['action'];
        $cur_votes = getAllVotes($id);
        $votes_up = $cur_votes[0]+1;
        $data = array(
            'votes' => $votes_up
        );
        $r = $this->db->update('goals', $data);
        if($r) //voting done
        {
        $effectiveVote = getEffectiveVotes($id);
        echo $effectiveVote." votes";
        }
        elseif(!$r) //voting failed
        {
        echo "Failed!";
        }
    }
    
    function getAllVotes($id) {
        $votes = array();
        $this->db->where('id', $id);
        $this->db->get('goals');
        if($query->num_rows == 1) {
            $votes[0] = $row['votes'];
        }
        return $votes;
    }
    
    function getEffectiveVotes($id) {
        $votes = getAllVotes($id);
        $effectiveVote = $votes[0];
        return $effectiveVote;
    }
}

From what I understand, the ajax runs the PHP stuff in the browser, then the javascript makes it look all pretty. I assume my problem lies with getting the ajax to run the controller? I adapted it from the tutorial to have only a vote-up function...so I may have messed up there too...

help?