Converting from prototype to jQuery - javascript / ajax

Question

0

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.

edited Nov 18 '09 at 23:37

asked Nov 18 '09 at 23:32

Joseph Brown
3●2

Doug Neiner · Answer 1 · 2009-11-18 23:53:38Z

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

Warren Young · Answer 2 · 2009-11-18 23:45:50Z

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

Chetan Sastry · Answer 3 · 2009-11-18 23:45:11Z

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

Converting from prototype to jQuery - javascript / ajax

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged ajax javascript prototype jquery convert or ask your own question.

Hello World!

Related