Изменить функцию с прототипа на JQuery - PullRequest
Новая
       11

Изменить функцию с прототипа на JQuery

0 голосов
/ 18 октября 2010

Эй, я нашел эту функцию в Интернете, и она отлично работает, если я использую ее сам, но остальная часть моего документа имеет все функции jQuery, и я бы хотел, чтобы эта функция была и в jQuery.

Я также получаю несколько ошибок при смешивании прототипа и jQuery.

Вот функция: 

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

Заранее спасибо !!

UPDATE:

Здесь используется функция:

Я использую его с Grails, но g: select - почти то же самое, что и select Я также могу использовать выбор, если это тоже вариант.

(Вот некоторая информация о g: select и свойствах, довольно просто, 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>

Еще раз спасибо !!

Ответы [ 2 ]

2 голосов
/ 18 октября 2010

Это немного короче в jQuery, например: 

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

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

Обратите внимание, что эта версия уже принимает объекты, просто измените $.ajax() dataType на "json"и это уже будет объект на данный момент.Вы бы использовали это как ваш success обратный вызов напрямую, например: 

$.ajax({
  //....options...
  success: updateCommodityProduct
});
1 голос
/ 18 октября 2010

Часть этого кода не имеет смысла. Либо он был изменен по сравнению с оригиналом, либо с самого начала был неверным.

Во всяком случае, я предполагаю, что код предназначен, но попробуйте: 

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:

Если productGroups - это <select>, который должен вызвать событие, тогда вы можете сделать что-то вроде этого: 

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