Home/ Questions/Q 6955171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:42:06+00:00

I’m working on a Facebook-like status update using jquery in Codeigniter. So far, I’ve

  • 0

I’m working on a Facebook-like status update using jquery in Codeigniter. So far, I’ve got the database, models, controllers, views, and jquery.

My status updates are posting to the database. The problem is that I can’t see the prior status updates in my view (they should be in the #content div), instead, when I press submit I get a blank screen (i have php errors turned on, so it’s not that). I suspect the problem is in the jquery or the message list view.

DATABASE

CREATE TABLE IF NOT EXISTS `messages` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `message` VARCHAR(200) NOT NULL,
  PRIMARY KEY  (`id`)
)

CONTROLLER

<?php

class Message extends CI_Controller
{

    function index () {
        $this->load->view('default');
    }

function add()
{
    if ($this->input->post('submit')) {
            $id = $this->input->post('id');
            $message = $this->input->post('message');

            // Add the post
            $this->load->model('message_model');
            $this->message_model->addPost($id, $message);
        }
}

 function view($type = NULL)
{
    $data['messages'] = $this->db->get('message');

    if ($type == "ajax")
        $this->load->view('messages_list', $data);
    else // load the default view
        $this->load->view('default', $data);
}

}

MODEL

<?php 

class Message_model extends CI_Model {

function addPost($id, $message) {
        $data = array(
            'id' => $id,
            'message' => $message
        );

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

function get($limit=5, $offset=0)
{
    $this->db->orderby('id', 'DESC');
    $this->db->limit($limit, $offset);

    return $this->db->get('messages')->result();
}
}

HTML/JQUERY

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('#submit').click(function() {

        var msg = $('#message').val();

        $.post("<?= site_url('message') ?>", {message: msg}, function() {
            $('#content').load("<?= site_url('message/view/ajax') ?>");
            $('#message').val('');
        });
    });
});
</script>
</head>
<body>
<div id="form">    
    <?php echo form_open('message/add'); ?>
    <input type="text" id="message" name="message" />
    <?php echo form_submit('submit', 'Update', "class='button'"); ?>
    <?php echo form_close(); ?>
</div>
 <br />
 <br />
<div id="content">
<?php $this->load->view('messages_list') ?>   
</div>

</body>
</html>

MESSAGE LIST VIEW
(this is what should load in the #content div; a list of the previous messages–limited to 5 by the model)

<ol>
<?php 
if (!empty($message) and (is_array($message)))
 foreach ($message as $message):
?>
    <li><?= $message->message ?></li>
<?php endforeach ?>
</ol>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • You get redirected to a completely different page (blank), or is just the js that blanks the current page?
    • And, does it blank just #content or the whole page?
    • does the callback function of $.post() get called? (Try with an alert())
    • Are you sure that message/view/ajax is returning the expected html? -> try to see how the request goes by using Firebug console

    Update: avoiding the redirect

    It looks like you are not stopping the normal form submit, and thus page gets reloaded; to prevent this, you should add event.preventDefault() to your event handler:

    $('#your-form-id').submit(function(event) {
    event.preventDefault();
    // Your code here..
});

    (or, in your case, in the .click() handler for #submit, but it would be better to use .submit() for the form, if you can uniquely determine its id.. or you can just use $('#form form').submit( ... ))

    • 0