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 what ever the worker has typed into the textarea, add it to the end of the existing log in the database, and refresh the actionlog 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

First, your code look mess. The first tag seems unclosed, and the form_open is nested inside it. My rule of thumb to developing a web is, make it work without any javascript first. Then add javascript as better experience. In your case above, try build the form with old way, after submit, redirect to page you want. After that working well, add jquery one at a time. Use jquery form plugins to submit form. Add a simple checking in the controller to handle ajax request. I usually use json for form submit, so in controller, I will return a json_encode array to a ajax submitted form request.

Hope this help you.

Answer 2

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.