What is the best way to get jQuery/Ajax to work with CodeIgniter in this example?

Question

I have a problem trying to get CodeIgniter and jQuery to produce ajax functionality. I have been coding all day, learning jQuery, and generally getting my butt kicked. Let me break down the situation, and hopefully, someone will have the courage to help me.

I have a trouble ticket system that displays many tickets on a page... each ticket is nested inside of a multitude of divs like so:

<div class="eachticketwrapper" id="ticket-362">
   <div class="actionlog">
        <form action="<?= base_url();?>admin/updateticket/362" method="post" id="362" name="362">
           <ul class="displayinline">
           <p>Action Log:
           <span class="actionlog-362">
                <?php echo $actionlog; ?>
            </span>
            </p>
   </div> <!--actionlog-->
            <p>
        <textarea name="actionlogbox362" cols="100" rows="2" id="actionlogbox362" style="" ></textarea>
        </p>
            <div class="finalbuttons">
                <?php echo form_open('admin/updateticket/'.'362'); ?>
            <li><?php 
                            $attrib = "class='updatebutton-362' id='updatebutton-362'";
                            echo form_submit("RapidTask",'Update',$attrib); //setup the button, and set permissions. ?></li>
                <?php echo form_close(); // close the form. ?>
             </div> <!--finalbuttons-->
</div> <!--eachticketwrapper-->

When run, the $actionlog should resemble something like the following:

worker - 2009-06-25 18:15:23 - Received and Acknowledges Ticket.
worker - 2009-06-25 18:15:23 - Changed Status to In Progress
worker - 2009-06-25 18:15:46 - Changed Priority to High
worker - 2009-06-25 18:15:46 - Changed Category to Network Connection Problem
worker - 2009-06-25 18:17:16 - did something

And then there is a textarea and an update button following it.

Here is the contents of my supplementary jQuery file:

$(document).ready(function() {
    $('.updatebutton-362').click(function()
        {
            var id = $(this).attr("id").split("-"); // Split the id value at the hyphen, and grab the ticketnum.
            $('.actionlog-'+id[1]).load('http://localhost/ci/index.php/ajaxtestc/');  // do something...
            return false; // return false so default click behavior is not followed.
        });
});

the ajaxtestc controller looks like this:

function index()
    {
        $data['actionlog'] = $this->m_tickets->actionLogPull(362);
        $this->load->vars($data);
        $this->load->view('content/ajaxtestform');
    }

And the m_tickets model looks like this:

function actionLogPull($requestedNum=NULL)
    {
        $this->db->where('ticketnum', $requestedNum); // Grab only the status for the ticket requested $requestednum=NULL
        $requestedTicket = $this->db->get('tickets'); // set the initial ticket info to a variable
        $returnvalue = $requestedTicket->row('actionlog');
        return $returnvalue;
    }

Now... here is what I WANT. I want to click the update button, have it take whatever the worker has typed into the text area, add it to the end of the existing log in the database, and refresh the action log on the screen.

I can't come up with a clear way to do this. Can anyone shed some light on how I could start this process?

Any help is greatly appreciated, and thanks in advance.

Answer 1

Inside $('.updatebutton-362').click, change the .load() line to (replace name, id with whatever parameters you want to send):

$.post('http://localhost/ci/index.php/ajaxtestc/', 
    {name: "John Doe", id: "anything"},
    function(data) {
      $('.actionlog-'+id[1]).html(data);
    }
});

Then above everything in index() in the ajaxtestc controller, parse the _POST variables and call whatever function you have in your model to update the action log.

Whatever is displayed by the index() action will be loaded into the actionlog span.