Каков наилучший способ заставить jQuery / Ajax работать с CodeIgniter в этом примере?

Question

У меня проблема с попыткой заставить CodeIgniter и jQuery создать функциональность ajax. Я весь день программировал, изучал jQuery и вообще получал удовольствие. Позвольте мне разобрать ситуацию, и, надеюсь, у кого-нибудь хватит смелости помочь мне.

У меня есть система уведомлений о неполадках, которая отображает много билетов на странице ... каждый билет вложен в множество элементов типа div так:

<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-->

При запуске $ actionlog должен выглядеть примерно так:

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

А затем за ним текстовая область и кнопка обновления.

Вот содержимое моего дополнительного файла jQuery:

$(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.
        });
});

контроллер ajaxtestc выглядит так:

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

И модель m_tickets выглядит так:

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;
    }

Теперь ... вот что я ХОЧУ. Я хочу нажать кнопку обновления, чтобы он взял то, что работник набрал в текстовой области, добавил его в конец существующего журнала в базе данных и обновил журнал действий на экране.

Я не могу придумать, как это сделать. Может кто-нибудь пролить свет на то, как я мог начать этот процесс?

Любая помощь очень ценится, и заранее спасибо.

Answer 1

Внутри $('.updatebutton-362').click, измените строку .load() на (замените имя, идентификатор на любые параметры, которые вы хотите отправить):

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

Затем, прежде всего в index() в контроллере ajaxtestc, проанализируйте переменные _POST и вызовите любую функцию, имеющуюся в вашей модели, чтобы обновить журнал действий.

Все, что отображается действием index(), будет загружено в диапазон actionlog.

Answer 2

Во-первых, ваш код выглядит беспорядочно. Первый тег кажется незакрытым, а form_open вложен в него. Мое эмпирическое правило при разработке веб-сайтов - сначала сделайте так, чтобы оно работало без JavaScript. Затем добавьте JavaScript как лучший опыт. В приведенном выше случае попробуйте создать форму по-старому, после отправки перенаправьте на нужную страницу. После того, как это работает хорошо, добавьте jquery по одному. Используйте плагины формы jquery для отправки формы. Добавьте простую проверку в контроллере для обработки ajax-запроса. Я обычно использую json для отправки формы, поэтому в контроллере я верну массив json_encode в отправленный ajax запрос формы.

Надеюсь, это поможет вам.