2009-06-27 10 views
0

CodeIgniterとjQueryでAjax機能を使用するときに問題が発生しました。私は終日コーディングしていて、jQueryを学んでいて、お互いの尻を蹴っていました。状況を打ち破ろうとしたら、誰かが私を助けてくれる勇気があることを願っています。この例では、CodeIgniterでjQuery/Ajaxを動作させる最も良い方法は何ですか?

私はページ上の多くのチケットを表示するトラブルチケットシステムを持っているが...各チケットは、そのような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; 
    } 

今...私が望むのはここです。私は更新ボタンをクリックして、作業者がテキストエリアに入力したことを、データベース内の既存のログの最後に追加し、画面上のアクションログを更新することができます。

私はこれを行うための明確な方法を考え出すことができません。どのように私はこのプロセスを開始することができるか誰かがいくつかの光を放つことができますか?

ご協力いただきまして誠にありがとうございます。

+0

コードクリーンアップの必要性とは別に、私はCIとjQを一日中扱っています。毎日、最初に私があなたに言うことができるのは、ajaxコントロールにデータをエコーする感覚を得ることです。最初に単純な$ .ajaxまたは$ .getJSON要求を実行する単純なビューを設定します。あなたが直接ajaxを使用する場合、データ型をjsonに設定します。 'echo(json_encode($ theArrayOfData));'でPHPのデータ配列を返します。 jsonとしてgetJSONまたはajaxデータ型を使用した場合、.success()は配列のjsonオブジェクトを持ちますが、.completeを使用する場合は、data.responseTextで$ .parseJSONを使用する必要があります – SpYk3HH

答えて

4

、(、送信したいものは何でもパラメータをIDとして名を置き換える)に​​行を変更します、そして、ajaxtestcコントローラでindex()内のすべての上

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

_POST変数を解析して、何でも呼び出しますアクションログを更新するためにモデル内に持っている関数です。

index()アクションで表示される内容は、いずれもactionlogスパンに読み込まれます。

+0

AH HA!これはまさに私が探していたものです! ジミーさんありがとうございました! – HeavyObjectLifter

0

まず、あなたのコードは混乱します。最初のタグは閉じられていないように見え、form_openはその内部にネストされています。 ウェブを開発する私の経験則は、JavaScriptを一切使わずに動作させることです。その後、より良い経験としてjavascriptを追加します。 あなたのケースでは、あなたが望むページにリダイレクトした後に、古い方法でフォームを構築してみてください。そのうまくいった後、一度にjqueryを追加してください。 jqueryフォームプラグインを使用してフォームを送信します。 ajaxリクエストを処理するためのコントローラの単純なチェックを追加します。 私は通常、フォーム提出にjsonを使用します。コントローラでは、json_encode配列をajaxから送信されたフォームリクエストに返します。

ご希望の場合はこちらをご覧ください。 $('.updatebutton-362').clickインサイド

+0

こんにちはドニー、返信いただきありがとうございます。 コードがかなり乱雑に見えますが、それは主にこの質問に関係のないビットを切り詰めているためです。 コードはjQueryなしで完璧に動作しますが、ページを更新せずにアップデートを実行しようとしています。 – HeavyObjectLifter

関連する問題