Simple AJAX question; how to add a checkbox to a result row and have it's state saved

[eluser]Nathan Pitman (Nine Four)[/eluser]
Ok, I'm a total newbie when it comes to AJAX. I have a job that I'm working on where we have a set of results on screen and want to add a simple check box for each row so that a user can 'tick' off a row and have that immediately saved back to the relevant DB column without having to submit the page.

In basic terms how would I go about doing something like that? Ideally I'd like to use JQuery as this is the library we have used elsewhere. Any pointers much appreciated!!!

[eluser]kosminbonea[/eluser]
You really didn't say much about your setup, perhaps the checkbox could be added when you generate the table, and then just use the click event with jQuery. Otherwise, I'm sure you can at least specify in which <td> should the checkbox be added, with a class name. So something like this could be done:

Code:

$(document).ready(
    function()
    {
        $("td.check").prepend(
            '<input type="checkbox" />'
        );

        // then post to the required method
        $("td.check input[@type='checkbox']").click(
            function()
            {
                $.post(address, // the controller/method
                    {id: $("#someOtherElement").attr("id")}, // parameters you need to send
                    function(response) // perhaps do something with the response
                    {
                        $("div#messages").html(response); // if need be
                    }
                );
            }
        );

Obviously, this has to be adapted to your specific needs, but this is how I'd do it. Hope this helps.

[eluser]Nathan Pitman (Nine Four)[/eluser]
Hi there. In the end I found an example here on the forums which I was able to work from to get the result I needed. I wrote a simple function in one of my controllers to perform the task required when a user checks or unchecks the checkbox and then called it with the following JavaScript (jQuery):

Code:

$(function(){
    $('.update').click(function(){
        $.ajax({
           type: "POST",
           url: "/reporting_results/mark_result",
           data: "id="+$(this).attr("id")+"✓="+$(this).val()+"&user;_id=<?=$user_id?>&product;=<?=$this->uri->segment(3)?>",
        });
    return true
    });
});