Prototype to jQuery Conversion Confusion

Question

I have the following function:

function updateproductselectionxxx(form, productassignment, mainproductid, subprodqty) {
    var checkingurl = "shopajaxproductselection.asp";
    var pars = 'productassignment=' + productassignment + '&qty=' + subprodqty + '&mainid=' + mainproductid;
    var url = checkingurl + '?' + pars;
    var target = 'productselectionresult' + productassignment;
    var myAjax = new Ajax.Updater(target, checkingurl, {
        method: 'post',
        parameters: pars
    });
}

And I am currently in the process of converting all the javascript on this website to jQuery. Usually I can use something similar to:

function updateproductselection(form, productassignment, mainproductid, subprodqty) {
    $.ajax({
        type: 'POST',
        url: 'shopajaxproductselection.asp',
        data: $(form).serialize(),
        success: function (response) {
            $(form).find('productselectionresult' + productassignment).html(response);
        }
    });

    return false;
}

And that does the trick, however I really only want to send over 1 field as indicated in the first function and I would also like to send along the information I am sending directly to the function upon it being called. JavaScript is definitely not my area of expertise but usually I can muddle through, but this time everything I have tried has caused errors and I'm not getting very far. Any help would be greatly appreciated.

Answer 1

Looks like a bit of confusion between POST and GET. Although the request method is set to POST in the older Prototype version the params are being sent via CGI which normally appear on the server as a GET. It's a bit hard to say more without seeing the server-side code, but you could try this, such that the jQuery version more closely mimics the old Prototype version:

function updateproductselection(form, productassignment, mainproductid, subprodqty) {
    var checkingurl = "shopajaxproductselection.asp";
    var pars = 'productassignment=' + productassignment + '&qty=' + subprodqty + '&mainid=' + mainproductid;
    var url = checkingurl + '?' + pars;
    $.ajax({
        type: 'POST',
        url: url,
        data: {},
        success: function (response) {
            $(form).find('#productselectionresult' + productassignment).html(response);
        }
    });

    return false;
}

Note that I have added a hash # to the start of productselectionresult - this is crucial due to the difference in the way PrototypeJS works. In Prototype, you can use an ID selector like:

$('id')

whereas in jQuery it has to be:

$('#id')