[SOLUCIONADO] Problema con función javascript

[calichecal]

Hola a todos, un saludo.

Tengo un inconveniente con un proyecto rails, mas exactamente con una función javascript. Estoy tratando de terminar unos selects dinamicos que ayuden a seleccionar un municipio.

Osea, que se carguen unos municipios en un select en base al departamento seleccionado en otro select:

con este script:

dynamic_municipios.js.erb

var municipios = new Array();
<% for municipio in @municipios -%>
municipios.push(new Array(<%= municipio.departamentos_id %>, '<%=h municipio.nombre %>', <%= municipio.id %>));
<% end -%>

function departamentoSelected() {
departamentos_id = $('municipios_departamentos_id').getValue();
options = $('negocios_municipios_id').options;

options.length = 1;
municipios.each(function(municipio) {
if (municipio[0] == departamentos_id) {
options[options.length] = new Option(municipio[1], municipio[2]);
}
});
if (options.length == 1) {
$('state_field').hide();
} else {
$('state_field').show();
}
}

document.observe('dom:loaded', function() {
departamentoSelected();
$('municipios_departamentos_id').observe('change', departamentoSelected);
});

Todo iba bien, estoy siguiendo este tutorial:
http://railscasts.com/episodes/88-dynamic-select-menus


Pero al final cuando lo fui a probar, firebug me arrojo este error:

TypeError: document.observe is not a function
[Parar en este error]

document.observe('dom:loaded', function() {

He encontrado una supuesta solución de reemplazar jquery por prototype, pero no puedo hacer eso, estoy utilizando bootstrat.

Agradezco sus aportes y consejos, este es mi gemfile:

Código HTML:

source 'https://rubygems.org'

gem 'rails', '3.2.13'
gem 'strong_parameters'
gem 'mysql2'
gem 'execjs','2.0.2'
gem 'rake' , '10.1.1'
gem 'therubyracer'
gem "less-rails"


# gem 'will_paginate', '3.0.3'
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'

  # ejecutar rails g bootstrap:install, despues del bundle install

end

  gem 'twitter-bootstrap-rails'
  gem 'jquery-rails'
  gem "paperclip", :git => "http://github.com/thoughtbot/paperclip.git"

Y esto es lo que tengo en mi aplication.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

[abimex]

pues sustituye las funciones que utilizes por cosas de jQUery, por ejemplo

"document.observe('dom:loaded', function() {" por "$(document).on('ready', function(){"
"$('municipios_departamentos_id').observe" por "$('municipios_departamentos_id').on"

Y asi creo que hay otras cosas, pero no lo voy a hacer todo por ti ;P

Un saludo!

[calichecal]

Iniciado por abimex

pues sustituye las funciones que utilizes por cosas de jQUery, por ejemplo

"document.observe('dom:loaded', function() {" por "$(document).on('ready', function(){"
"$('municipios_departamentos_id').observe" por "$('municipios_departamentos_id').on"

Y asi creo que hay otras cosas, pero no lo voy a hacer todo por ti ;P

Un saludo!

Hola !! muchas gracias abimex ya había hecho algo similar,

Código PHP:

  $(document).ready( function() {
    $("#municipios_departamentos_id").change( function() {
          departamentoSelected();
    });
}); 
   

pero no me estaba funcionando, jeje en realidad estoy mas orientado al back-end, pero con lo tuyo creo que ya funcionará..

[calichecal]

Lo logre !! para cualquiera quien sigua este tutorial:

http://railscasts.com/episodes/88-dynamic-select-menus

pero este trabajando con bootstrap, entonces el script que esta en prototype, puede quedar en jquery de la siguiente manera:

Código PHP:

  var municipios = new Array();
<% for municipio in @municipios -%>
  municipios.push(new Array(<%= municipio.departamentos_id %>, '<%=h municipio.nombre %>', <%= municipio.id %>));
<% end -%>

function departamentoSelected() {

 
  departamentos_id = $('#municipios_departamentos_id').val();
 

 
     
    $('#negocios_municipios_id').html('');
    $('#negocios_municipios_id').append('<option value="">Seleccione un municipio</option>');

    for (i=0;i<municipios.length;i++){ 
        if (municipios[i][0] == departamentos_id){

          $('#negocios_municipios_id').append('<option value="'+municipios[i][2]+'" >'+municipios[i][1]+'</option>');
        }
    } 


    if ($('#negocios_municipios_id option').length == 1) {
      $('#state_field').hide();
    } else {
      $('#state_field').show();
    }
  

}


$(document).ready(function(){
  departamentoSelected();
  $('#municipios_departamentos_id').on('change', departamentoSelected);
});