Question

I have function in Javascript which works fine using prototype. The function is used to dynamicaly change a select field based on the selection of another field.

   var sizes_286 = new Array();
        sizes_286.push(new Array(536,  Pequeno , 1661));
        sizes_286.push(new Array(536,  Médio , 1662));
        sizes_286.push(new Array(536,  Grande , 1663));
        sizes_286.push(new Array(536,  ExtGrande , 1664));

   function varianteSelected_286(){
      var_id = $( variante_286 ).getValue();
      options = $( tamanho_286 ).options;
      options.length = 1;
      sizes_286.each(function(size){
        if (size[0] == var_id){
            options[options.length] = new Option(size[1], size[2]);
        }
    });
}


document.observe( dom:loaded , function(){
    $( variante_286 ).observe( change , varianteSelected_286);
});

The problem is that I started to use jQuery in my project, and since then this function stopped working. I m using jQuery (1.3.2) and prototype (1.6.1).

How can I create a jquery version of my old function? or
How can I make it still work after jquery is being loaded?
Is there a short and more elegant version of the same functionality?

Answer 1

If I was you I would try to avoid using both frameworks. Just do it in jQuery, like that:

<script type="text/javascript">
    var sizes_286 = [
        {id: 536, name:  Pequeno , size: 1661},
        {id: 536, name:  Médio , size: 1662},
        {id: 536, name:  Grande , size: 1663},
        {id: 536, name:  ExtGrande , size: 1664}
    ];

    $(document).ready(function(){
        $( #variante_286 ).change(function(){
            var var_id = $(this).val();
            var select = $( #tamanho_286 );

            var options =   ;
            $.each(sizes_286, function(i, n){
                if (n.id == var_id) {
                    options +=  <option value="  + n.size +  ">  + n.name +  </option> ;
                }
            });

            select.html(options);
        });
    });
</script>

Answer 2

There are sometimes problem with the $ function of Jquery with the same from protoype and in such cases we call a function so that Jquery $ function does not clash with that of Prototype.

The function is jquery.noConflict()

Please refer to the link : http://docs.jquery.com/Core/jQuery.noConflict

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Answer 3

Beginner is right about how to get jquery and prototype to run together, but if that s all you need it for, i think you re better off re-writing your function to jquery, and get rid of the need to run both frameworks parallel. The following should work (leave the array declaration as it is):

function varianteSelected_286() {
  var_id = $(this).val();
  options = $( #tamanho_286 )[0].options;
  options.length = 1;
  for(var i = 0; i < sizes_286.length; i++) {
     var size = sizes_286[i];
     if (size[0] == var_id) {
        options[options.length] = new Option(size[1], size[2]);
     }
  }

$(document).ready(function() {
   $( #variante_286 ).change(varianteSelected_286);
});

Answer 4

You need to create a function scope to use jQuery as $ and you could probably leave Prototype as the default $.

jQuery code:

(function($) {
    $( body ).hide()
})(jQuery.noConflict());

友情链接