Me gustaría hacer algo muy simple: revelar un div si se selecciona un botón de opción, ocultar otro div y revelar ese div si se selecciona el otro botón de opción, ocultando así el primer div.
Esto es lo que tengo, que no funciona:
row .col-sm-6.form-group = form.radio_button "meta_data[quantity_meta][type]", value: "range", onclick: "toggleDiv('.toggle-range', '.toggle-fixed');" = form.label "meta_data[quantity_meta][type]", "range" .row .col-sm-6.form-group.fixed = form.radio_button "meta_data[quantity_meta][type]", value: "fixed", onclick: "toggleDiv('.toggle-fixed', '.toggle-range');" = form.label "meta_data[quantity_meta][type]", "fixed" .div.toggle-range = form.label "YO!", hidden: true .div.toggle-fixed = form.label "Can't stop the feeling!", hidden: trueY el JavaScript (accesible a través de canalización de activos):
function toggleDiv(hideDiv, showDiv) { $(hideDiv).hide(); $(showDiv).show(); }Bastante simple. Sin embargo, cuando renderizo la página e inspecciono mis "botones de opción", esto es lo que veo:
<input type="radio" value="{:value=>"range", :onclick=>"toggleDiv('.toggle-range', '.toggle-fixed')"}" name="meta_data[quantity_meta][type]">Está poniendo mi atributo onclick en el atributo de valor del botón de opción.
¿Cómo puedo lograr mi objetivo aquí?
Esto no tiene nada que ver con Haml o tu javascript. La firma de radio_button es:
radio_button(method, tag_value, options = {})Dado que está pasando un hash como segundo argumento, se convierte en una cadena. En su lugar necesitas:
= form.radio_button "meta_data[quantity_meta][type]", "range", onclick: "toggleDiv('.toggle-range', '.toggle-fixed');"