Trying to get jQuery/Ajax to work with CI

[eluser]slowgary[/eluser]
I believe the .load() function loads an entirely new page, whereas you'd probably be better using something like .post(), especially since CI deals mainly with post data. Also, since you're going to be printing multiple 'eachticketwrapper's to the screen, you should tailor your JavaScript so that you only need to call it once, instead of once per wrapper (I think that's what you're doing now by using the class 'updatebutton-362'). I'd probably also put the event on the form submit, not on the button click since a user can submit a form without clicking the submit button (by pressing enter). So first change your classes to just 'updateform' or something, since a class should be reused, and you can still get the ticket number from the unique ID:

Code:

<form action='/admin/updateticket/362' class='updateform' id='updateform-362' method='post'> //without javascript, this form should still work
<div>
     &lt;input type='text' name='blah_blah'/&gt;  //whatever form inputs you need
     &lt;input type='text' name='blah_blah2'/&gt;

     &lt;input type='submit' value='update'/&gt;
</div>
&lt;/form&gt;

Then your JavaScript would look like this:

Code:

$(document).ready(function(){
     $('.updateform').each(function(){
          var current_form = $(this);
          current_form.bind('submit', function(event){
               event.preventDefault();  //prevents the form submission
               $.post(
                    current_form.attr('action'),  //url that the ajax call goes to
                    {
                         myfield1 : current_form.find("input[name='blah_blah']").val(),  //post variables to send with the call
                         otherfield2 : current_form.find("input[name='blah_blah2']").val(),
                         ajax : true,  //the controller can use this to know if it's ajax or not
                    },
                    function(data){  //callback function after ajax success
                      alert(data.apples);  //do something with the return data
                      $('#somediv').html(data.oranges);  //do something with the return data
                    },
                    'json');  //I recommend getting your databack as JSON, allows you to access return data as written above
          });
     };
});

THEN, you'd have something like this in your admin controller:

Code:

function updateticket($ticket_num)
{
     //do something with $ticket_num
     $this->Your_model->do_something($ticket_num);

     if($this->input->post('ajax'))
     {
          //this is how you return data back to in json format
          return json_encode(array('apples' => 'granny_smith', 'oranges' => 'mmmm...'));
     }
     else  //normal, non-ajax form submission code
     {
          //do something
     }
}

I hope this helps, good luck.