Was ist der beste Weg, um in diesem Beispiel jQuery/Ajax mit CodeIgniter zu arbeiten?

Question

Ich habe ein Problem, CodeIgniter und jQuery zu bekommen, um Ajax-Funktionalität zu erzeugen. Ich habe den ganzen Tag programmiert, jQuery gelernt und generell meinen Hintern getreten. Lass mich die Situation durchbrechen, und hoffentlich wird jemand den Mut haben, mir zu helfen.

Ich habe ein Trouble-Ticket-System, das viele Karten auf einer Seite zeigt ... jedes Ticket innerhalb einer Vielzahl von divs wie so verschachtelt ist:

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

Sobald er ausgeführt wird, sollte die $ actionlog etwas ähnlich wie das Folgende:

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 

Und dann gibt es eine Textarea und eine Update-Taste folgt. Hier

ist der Inhalt meiner Zusatz jQuery-Datei:

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

Und das m_tickets Modell sieht wie folgt aus:

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

der ajaxtestc Controller sieht wie folgt aus

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

Jetzt ... hier ist, was ich will. Ich möchte auf den Aktualisierungsbutton klicken, den Worker in den Textbereich eingeben, ihn am Ende des vorhandenen Protokolls in der Datenbank hinzufügen und das Actionlog auf dem Bildschirm aktualisieren.

Ich kann keinen klaren Weg finden, dies zu tun. Kann irgendjemand etwas darüber sagen, wie ich diesen Prozess starten könnte?

Jede Hilfe wird sehr geschätzt, und danke im Voraus.

Answer 1

Innen $('.updatebutton-362').click, ändern Sie die .load() Linie (ersetzen Name, ID mit dem, was Parameter, die Sie senden möchten):

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

Dann über alles in index() im ajaxtestc Controller, analysieren die _POST Variablen und rufen Sie was auch immer Funktion, die Sie in Ihrem Modell haben, um das Aktionsprotokoll zu aktualisieren.

Was in der index() Aktion angezeigt wird, wird in die actionlog Spanne geladen.

Answer 2

Erstens, Ihr Code sieht durcheinander. Das erste Tag scheint nicht geschlossen zu sein, und das Formular_open ist darin verschachtelt. Meine Faustregel zur Entwicklung eines Webs ist, dass es zuerst ohne Javascript funktioniert. Dann fügen Sie Javascript als bessere Erfahrung hinzu. In Ihrem Fall oben, versuchen Sie das Formular mit alten Weg zu erstellen, nach dem Senden, umleiten zu Seite, die Sie wollen. Nachdem Sie gut gearbeitet haben, fügen Sie jQuery einzeln hinzu. Verwenden Sie jquery form plugins, um das Formular zu senden. Fügen Sie eine einfache Überprüfung des Controllers hinzu, um die Ajax-Anfrage zu bearbeiten. Normalerweise benutze ich JSON für das Senden von Formularen, daher werde ich im Controller ein json_encode-Array an eine von Ajax gesendete Formularanforderung zurückgeben.

Ich hoffe, dies hilft Ihnen.