Change 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!!

• EMMERICH: hiss eval("(" + e.responseText + ")") never do that!
• randomizertech: I got it online, I did not write this. I tried rewriting it in jQuery but it did not work as expected so I posted the question here.

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

• randomizertech: Where does the $.ajax({ --- } go?
• Nick Craver: @fgualda87 - You're using this code somewhere, as the result of an AJAX request...where is that?
• randomizertech: I'm using it on an onChange of a <select>
• Nick Craver: @fgualda87 - An onChange wouldn't be passing back an XmlHttpRequest, I would need to see where you're using it.
• randomizertech: When it changes it should go to the database and load another <select> with certain values, but depending on the text and value it should load certain elements on the other one.

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

• user113716: @fgualda87 - This is just a function. I would need to see how it is being called to know what is going on. In your question you say "g:select is almost the same thing as a select". Looking at the docs, it seems as though they are the same thing. The docs state: "Purpose: Helper tag for creating HTML selects." Is that right? Are you getting a typical <select> element on the page? I'll give you a hand, but I'll probably need to ask a few more questions.
• randomizertech: @patrick - I do get a typical <select> if you see the source of the page, but they have different properties. They can be treated the same way though.
• user113716: @fgualda87 - Ok, so how are you making the AJAX request? Are you using jQuery's $.ajax() method? Could you post that code in your question?
• randomizertech: @patrick No I'm not using the $.ajax() I don't know how to use it or where to put it
• user113716: @fgualda87 - The code you posted in your question appears to be a callback to an AJAX request. An AJAX request is sent to the server, and when a response is received, a callback typically runs. There can be different callbacks for different situations. Yours looks like it should run when a successful response is received. But first you need to make a request. Do you know the URL that should be sent to the server (your Grails application) to request the data?