Converting from prototype to jQuery - javascript / ajax

Question

I'm looking for some help converting this from prototype to jQuery. I'm doing some free work for a charity and updating a system they use to track and assign volunteers. I've managed to convert everything else so far, however, this has me stumped. Please excuse the spelling mistakes, the code is verbatim what I've been given.

I've had a look at http://docs.jquery.com/Ajax/jQuery.ajax but not been able to put everything together that covers all the different parts. Normally just end up with some sort of broken mess.

I have a page with lots of checkboxes, like this:

<input <?PHP echo $checked; ?> type='checkbox' onclick='toggle_advisor_assignment_mark("<?PHP echo $advisor['id']; ?>", "<?PHP echo x('case_id'); ?>");' />

When checked or unchecked (as the case may be), ajax is used to call the php which uses the advisor id and case id to assign or remove the advisor/volunteer, and it returns the output for a div (called adviors_box) to list the current advisors/volunteer.

The javascript code:

function toggle_advisor_assignment_mark(id, case_id)
{
new Ajax.Updater('adviors_box', 'index.php', {
evalScripts: true,
method: 'POST', 
parameters: 'task=case_change_advisors&ajax_mode=yes&id='+id+'&case_id='+case_id
});
}

Thanks in advance for any help.

Answer 1

I'm not sure about the evalScripts part but if your payload doesn't have any scripts to be executed (it is not a good idea to mix scripts with content anyway), you can do it this way:

$.post('index.php', 
    {"task" : "case_change_advisors",
     "ajax_mode" : yes, 
     "id" : id
     "case_id" : case_id },
    function(data) {
        $("#adviors_box").html(data);
    });

Answer 2

function toggle_advisor_assignment_mark(id, case_id)
{
    $('#advisors_box').load('index.php', {
            task: 'case_change_advisors',
            ajax_mode: 'yes',
            id: id,
            case_id: case_id
       });
}

Answer 3

You can use key: value pairs in an object literal as the second parameter on the load function. Also, if any data is passed in as the second parameter, the request is automatically sent as a POST request:

function toggle_advisor_assignment_mark(id, case_id) {
 $('#advisors_box').load('index.php', {
  task: 'case_change_advisors',
  ajax_mode: 'yes',
  id: id,
  case_id: case_id 
 });
}

More on this at the jQuery Docs for the load function