Using jQuery.Ajax, CodeIgniter and CSS to update database and user interface
Working recently on a project to create an events registration application, I ran into an interesting problem. The problem: how to create a simple user interface using Ajax to register and unregister from the event. For this project, I’m using the PHP framework CodeIgniter from EllisLab and jQuery.
I was able to fairly easily get the database to update when the user clicks on an event. The event is represented in markup using a DIV element. Example:
$str = "";
foreach ($query->result_array() as $row) {
if ($this->events->is_registered($this->session->userdata('user_id'),
$row['id'])) {
$str .= "<div id=\"event" . $row['id'] . "\" class=\"event registered\" rel=\"" . $row['id'] . "\">\n";
} else {
$str .= "<div id=\"event" . $row['id'] . "\" class=\"event unregistered\" rel=\"" . $row['id'] . "\">\n";
}
$str .= "<table>\n";
$str .= "<td>Event: </td>\n";
$str .= "<td>" . $row['event_name'] . "</td>\n";
$str .= "</tr>\n";
...
$str .= "</table>\n";
$str .= "<div class=\"event-status\">\n";
$str .= "</div>\n";
$str .= "</div>\n";
}
return $str;
The ‘reg_status’ DIV is used to display the “registered” or “unregistered” visuals to the user.
In the UI, when the user hovers over an event, the UI changes. I’m using jQuery to handle the hover event and CSS to change the UI. Example:
$(function() {
$(".event").hover(
function(){$(this).addClass("event-hover")},
function(){$(this).removeClass("event-hover")}
);
To update the database, I used jQuery.Ajax to run a controller in the CodeIgniter code.
$('.event').click(function() {
var event_id = $(this).attr("rel"); // grab event_id
// from markup
$.ajax({
url: "<?php echo base_url() . index_page(); ?>/controller/function/"+<?php echo $this->session->userdata('user_id') ?>+"/"+event_id+"",
dataType: 'json',
type: 'POST',
data: $(this).serialize(),
success: function(data){
/*
* Update UI
*/
if (data.reg_status) {
$("#event"+event_id+"").removeClass("unregistered"),
$("#event"+event_id+"").addClass("registered")
} else {
$("#event"+event_id+"").removeClass("registered"),
$("#event"+event_id+"").addClass("unregistered")
}
},
error: function(){
alert('Something major failed');
}
});
});
In the code above, a couple interesting things are worth pointing out. First, I’m passing the ID of the user and the ID of the event to the controller function via url segments. CodeIgniter parses these and passes them properly to the function. Second, the Ajax call makes use of JSON datatype to return the registration status back from the function. I tried multiple ways to accomplish this, but was unable to get it working correctly until I received this response from the CodeIgniter forums.
Here’s how the relative code in the controller function looks:
$data['reg_status'] = TRUE;
echo json_encode($data);
Other than some CSS, this example is complete and should help if you need to do something similar. Users will appreciate the simple interface.
Comments
Add Comment