Ayuda Javascript

mry00 #1 Nov '12

De mano decir que no tengo ni idea de Javascript, así que a ver si me podéis ayudar:
Tengo un combobox con varias opciones(dni,nombre,departamento,área de conocimiento) y debajo del combobox una label para meter texto, la idea es que cuando se seleccione dni en el combobox debajo aparezca "DNI:" y la label para meter el texto, y si selecciono Nombre que aparezca "Nombre:" y la label.
Debajo os dejo el código que tengo hecho(no funciona), los "form" que veis es porque estoy utilizando el Framework Spring MVC.

<div class="campos">
    <div class="campo">
        <form:label path="buscarPor">Buscar Por:</form:label>
        <div>
            <select name="buscarPor" id="buscarPor">
                <option value="dni">DNI</option>
                <option value="nombre">Nombre</option>
                <option value="Departamento">Departamento</option>
                <option value="Área de Conocimiento">Área de Conocimiento</option>
            </select>
        </div>



<script type="text/javascript">
function cargarLabel(){
    var seleccionado = $(this).val();
    if(seleccionado == 'dni'){

        $('#seleccion').html('<div class="campo">'+'<form:label path="seleccion">DNI:</form:label>'+
                '<div>'+'<form:input path="seleccion"/>'+'<form:errors path="seleccion"/>'+'</div>'+'</div>');
    }if(seleccionado == 'nombre'){

        $('#seleccion').html('<div class="campo">'+'<form:label path="seleccion">Nombre:</form:label>'+
                '<div>'+'<form:input path="seleccion"/>'+'<form:errors path="seleccion"/>'+'</div>'+'</div>');
    }
}

$(function () {
    $('#buscarPor').change(cargarLabel);
});

</script>
</div>

<div class="campo">
<form:label path="seleccion">??</form:label>
    <div>
        <form:input path="seleccion"/>
        <form:errors path="seleccion"/>
    </div>
</div>

Mc_KaPPeR #2 Nov '12

 <select name="buscarPor" id="buscarPor" onChange="cargarLabel()">

...
...
function cargarLabel(){

   if(document.getElementById('buscarPor') == 'dni' )
       <div > etc </div>
   if(document.getElementById('buscarPor') == 'nombre' )
       <div > etc </div>
    ....
    ....
}

no seria algo asi?

3 respuestas

mry00 #3 Nov '12

#2 Pues no lo se, ya digo que no tengo mucha idea xD
He probado desde aqui: http://jsfiddle.net/FpeFb/5/ y sigue sin funcionar, a ver si le puedes echar un vistazo

elkaoD #4 Nov '12

var seleccionado = $('buscarPor').val();

No alcanzo a entender por qué ponías this ahí.

1 respuesta

mry00 #5 Nov '12

#4 ahora que me doy cuenta, yo tampoco se porque lo puse xD, ahora lo estoy intentando con el getElementbyId pero tampoco :/
puedes echar un vistazo aqui: http://jsfiddle.net/FpeFb/6/ ??

edit: #6 hice caso a #2, estoy perdidisimo

1 respuesta

elkaoD #6 Nov '12

#5 pero qué cojones? Y esos <div> en el JS?

1 respuesta

SiNSoNiDo #7 Nov '12 Gafe

#1 ¿es esto lo que quieres? No entiendo bien lo de aparezca "DNI:" y la label para meter el texto, supongo que te refieras a un campo de texto (o input de tipo text).

$(document).ready(function() {
    $('#buscarPor').change(function() {
        var input = ': <input type="text">';
        $('#seleccion').html($('#buscarPor').val()+input);
    });
});

Pon el código en el cuadro de javascript.

4 respuestas

cebollino #8 Nov '12

menudo lío os estáis armando jeje

http://jsfiddle.net/FpeFb/8/

1 respuesta

mry00 #9 Nov '12

#7 si eso es, perdon me explique fatal, creo que ya lo tengo solucionado, muchas gracias

elkaoD #10 Nov '12

#8 madre mía y los que nos estamos liando somos nosotros? xD

1 respuesta

cebollino #11 Nov '12

#10 qué ves de lio?
creo q lo que pide es q según el select pinte, lo otro ya lo puede rellenar con el código de spring...

y cuando quieras te explico

var seleccionado = $(this).val();

1 respuesta

elkaoD #12 Nov '12

#11 pero qué me vas a explicar tú a mí. ¿Has visto donde había puesto el $(this) amigo? No tienes contexto al objeto (es decir, no tienes this ligado a tu scope actual) si estás en la raíz del script.

A ti te ha funcionado porque lo tienes dentro del change de jQuery y la propia librería se encarga de ligar this a tu nodo DOM.

Y tu código es una mierda (sin ánimo de ofender, es un simple hecho.) Véase #7 para hacer prácticamente lo mismo. Y se puede incluso simplificar más si me apuras.

Dónde vas con un switch por Dios.

Aún así +1 por ponerle una closure alrededor a tu código.

1 respuesta

mry00 #13 Nov '12

Bueno ya esta solucionado , muchas gracias a todos de verdad, el tema es que no tengo ni idea de javascript y me he puesto a hacerlo a ciegas practicamente

cebollino #14 Nov '12

#12
Amigo, como tu dices, sin ánimo de ofender igualmente, date un paseo por internet y lee un poco más sobre el scope de javascript.

Si lo sacas fuera del código sigue funcionando igualmente, precisamente ahí esta la gracia del scope... $() lo que hace es convertir en un objeto jQuery la referencia del nodo.

Si no te lo crees http://jsfiddle.net/FpeFb/14/

Y por cierto el cod de #7 no lo había leido antes de postear pero vamos...
si en vez de

$('#seleccion').html($('#buscarPor').val()+input);

si pones

$('#seleccion').html($(this).val()+input);

te ahorras buscar de nuevo el id por todo el DOM.

Me gustaria saber donde esta la mierda en mi código, para aprender más que nada. Si vas a salirme ahora con lo que he puesto dentro de la variable html creo que se sobreentendia que era un ejemplo...
Obviamente se puede simplificar pero creo q este hilo no iba de eso.

Ah y por su puesto es más mantenible un código lleno de else if else if else if ... que por un switch, vamos hombre lo que me faltaba ya... xDDDDDD

Pero bueno, qué te voy a explicar yo a ti...

1 1 respuesta

S

Sarwaz #15 Nov '12

Entones, quien es mejor?

1

elkaoD #16 Nov '12

#14 tienes toda la razón en lo que dices, pero eso no aplica aquí.

En primer lugar, en #1 no hay $(...)

Aunque hubiera $(...), si tu función no está en un contexto de jQuery (y var seleccionado = $(this).val(); no lo está) this está ligado a window. ¿Tiene sentido hacer $(window).val();?

La mierda (sorry, he estado un poco gilipollas ahí) es que tienes mucho código repetido. #7 me gusta porque utiliza el propio value del nodo DOM. Tu variable html podrías inicializarla a '<div class="campo"><label path="seleccion">' y te ahorrabas código en los cases.

Un switch está bien si no te queda más remedio (incluso esto podría discutirlo, la alternativa no son if-elses obviamente), pero en este caso me parece un poco exagerado.

EDIT: comprobado, en ese código this es window.

1 respuesta

xMarston #17 Nov '12

Como dice elkaoD, this, si no está dentro del contexto de jQuery o dentro de un nodo jQuery, hace referencia a window.

1 respuesta

S

Sarwaz #18 Nov '12

#16 #17
El this del código de #1 hace referencia al evento que llama a la función. Solo haría referencia a window si la llamaras directamente. Os veo flojillos.

1 1 respuesta

elkaoD #19 Nov '12

#18 pues tienes toda la razón, igual me confundí porque #2 lo tiene en el onchange del HTML. JURO que pensaba que es también estaba en el onchange.

+1 para ti y orejas de burro para mí por no leer bien.

Ayuda Javascript

Usuarios habituales

Tags