Help changing function from prototype to jQuery!

Question

Hey I found this function online and it works fine if I use it by itself, but the rest of my document has all jQuery functions and I'd like this one to be in jQuery as well.

I also get a few errors when mixing prototype and jQuery.

Here is the function:

function updateCommodityProduct(e) {
    // The response comes back as a bunch-o-JSON
    var objects = eval("(" + e.responseText + ")")  // evaluate JSON

    if (objects) {
        var rselect = document.getElementById('commodityProduct')

        // Clear all previous options
        var l = rselect.length

        while (l > 0) {
            l--
            rselect.remove(l)
        }

        // Rebuild the select
        for (var i=0; i < objects.length; i++) {
            var object = objects[i]
            var opt = document.createElement('option');
            opt.text = object.enDescription
            opt.value = object.productCode
            try {
                rselect.add(opt, null) // standards compliant; doesn't work in IE
            }
            catch(ex) {
                rselect.add(opt) // IE only
            }
        }
    }
}

Thanks in advance!!

UPDATE:

Here is where the function is being used:

I'm using it with Grails, but g:select is almost the same thing as a select I can also use a select if that's an option too.

(Here is some information on g:select and properties, pretty simple, http://www.grails.org/doc/1.0.x/ref/Tags/select.html )

<td valign="top"><form id="selectForm">
<b>GROUP:</b>
<g:select id="productGroups" optionKey="groupCode" name="getAllProductGroups2" from="${getAllProductGroups}" optionValue="enDescription" onchange="${remoteFunction(controller:'comodity', action:'ajaxGetCommodities', params:'\'groupCode=\' + escape(this.value) ', onComplete:'updateCommodityProduct(e)')}" style="width:220px" />
</br>
<b>COMMODITY:</b>
<g:select name="commodityProduct" id="commodityProduct"  style="width:220px">
</g:select></form></td>

Thanks again!!

Answer 1

This is a bit shorter in jQuery, like this:

function updateCommodityProduct(objects) {
  if (!objects) return;
  var select = $('#commodityProduct').empty();

  $.each(objects, function(i, o) {
    $("<option />", { text: o.enDescription, value: o.productCode })
      .appendTo(select);
  });
}

Notice this version takes the objects already, just change your $.ajax() dataType to "json" and it'll already be an object at this point. You'd use this as your success callback directly, for example:

$.ajax({
  //....options...
  success: updateCommodityProduct
});

Answer 2

Part of this code doesn't make sense. Either it was modified from the original, or it was wrong to begin with.

Anyway, I'm guessing at the intention of the code, but give this a try:

function updateCommodityProduct(e) {
    // The response comes back as a bunch-o-JSON
    var objects = eval("(" + e.responseText + ")")  // evaluate JSON

    if (objects) {
        var $rselect = $('#commodityProduct').empty();
        $.each( objects, function(i,val) {
            $('<option/>', {text:val.enDescription,value:val.productCode})
                          .appendTo($rselect);
        });
    }
}

---

EDIT:

If productGroups is the <select> that should trigger the event, then you could do something like this:

    // run the code on DOM ready
$(function() {

       // attach a change() handler to the productGroups element
    $('#productGroups').change(function() {

         // Retrieve the selected value of the <select> element
        var value = $(this).val();

         // You'll need to send the selected value to the server.

        $.ajax({
            url: '/path/to/resource', // your server url here
            dataType: 'json',         // anticipate JSON response from server
            success: function( resp ) {
                // trigger an alert() to show that response was received
                alert( resp );

                if (resp) {
                    var $rselect = $('#commodityProduct').empty();
                    $.each( resp, function(i,val) {
                        $('<option/>', {text:val.enDescription, value:val.productCode})
                              .appendTo($rselect);
                    });
                }
            }
        });
    });
});