boton con id dinamico con jquery

REVIDEUX · #1 (**permalink**) 17/04/2012, 14:31

Buenas tardes señores:

Es la primera vez que realizo consultas aqui, deseo absolver mis dudas y tambien apoyar cuando se pueda a otros compañeros.

La razon es la siguiente, estoy creando botones con "id" dinamico, pero me gustaria mostrar un mensaje diferente por cada boton,en el cual me muestre el valor del "id", deseo realizarlo con jquery, aunque la verdadera aplicacion esta en MVC, la idea es esta:

for (i=0; i<6;i++)
{
<input type="submit" id ="i" value="adicionar"/>
}

Si tuvieran alguna forma de ayudarme se los agradecere enormemente.El valor que le puse de i=6 puede ser variable.

lukas4 · #2 (**permalink**) 17/04/2012, 14:44

a jquery no le se, solo espero que este ejemplo te ayude =)

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function display()
{
for(i=0;i<10;i++){
document.write("<input type='text' id='"+i+"' value='el valor del id es: "+i+"'/><br/><br/>");
}
}
</script>
</head>
<body>
<button type="button" onclick="display()">Display</button>
</body>
</html>

gjx2 · #3 (**permalink**) 17/04/2012, 14:58

Puedes usar el metodo bind capturar los eventos de los botones.

Tienes aqui un ejemplo http://jsfiddle.net/nXrCu/1/

REVIDEUX · #4 (**permalink**) 17/04/2012, 15:03

Creo compañero que estas equivocado la intencion no es generar un javascript con cualkier numero,sino q este numero "id" sea tomado por el javascript y que por ejemplo resalte el este identificador en algun mensaje, aunque la verdadera intencion no es esa pero necesito tratar de capturar ese "id" para operarlo junto con algunos otros elementos q tengo en mi vista, de igual manera gracias, pero no es lo que deseo.

Cita:

Iniciado por lukas4

a jquery no le se, solo espero que este ejemplo te ayude =)

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function display()
{
for(i=0;i<10;i++){
document.write("<input type='text' id='"+i+"' value='el valor del id es: "+i+"'/><br/><br/>");
}
}
</script>
</head>
<body>
<button type="button" onclick="display()">Display</button>
</body>
</html>

REVIDEUX · #5 (**permalink**) 17/04/2012, 15:20

Señores les presento mi verdadero boton:

<input type="submit" class="nice small radius blue button" value="Delete" name="Delete" id="i" onClick="javascript:recargar()" data-reveal-id="myModal2"/>

function recargar(){
$("i").live("click", function (evento)
{
var id = $(this).attr("id");
alert(id);
});
}

Pero como les habia comentado el "i" es generado en un bucle variable, el compañero anterior estuvo cerca pero ese class ".btn" no lo llego a comprender.

caricatos · #6 (**permalink**) 17/04/2012, 16:25

Hola:

Como se trata de una librería, hemos movido el tema al foro adecuado... pero para evitar errores, los id's no pueden ser números (ni empezar)

Saludos

REVIDEUX · #7 (**permalink**) 17/04/2012, 16:57

Por supuesto moderador pero con un i.ToString ya estamos hablando de otra cosa, la idea principal es que este valor puede variar, solo trate de especificar que podria ser variable con un for que es lo mas aproximado a lo que hablo, la conversion es un tema resuelto para cualquiera.

Cita:

Iniciado por caricatos

Hola:

Como se trata de una librería, hemos movido el tema al foro adecuado... pero para evitar errores, los id's no pueden ser números (ni empezar)

Saludos

caricatos · #8 (**permalink**) 18/04/2012, 00:52

Hola:

Cita:

Iniciado por REVIDEUX

... un i.ToString ya estamos hablando de otra cosa...

Un número entrecomillado sigue siendo un número para un atributo id

...

Saludos

REVIDEUX · #9 (**permalink**) 18/04/2012, 07:23

Me imagino moderador que aqui todos sabemos los q hacemos y sin duda alguna se sabe donde podria ponerse ello, no es cierto??...si puede aportar algo mejor seria estupendo, refiriendome a la solucion del tema....

Saludos cordiales...

lukas4 · #10 (**permalink**) 18/04/2012, 09:53

Cita:

Iniciado por REVIDEUX

Me imagino moderador que aqui todos sabemos los q hacemos y sin duda alguna se sabe donde podria ponerse ello, no es cierto??...si puede aportar algo mejor seria estupendo, refiriendome a la solucion del tema....

Saludos cordiales...

javascript id:

Specifies a unique id for the element. Naming rules:

Must begin with a letter A-Z or a-z <-debe comenzar con una letra
Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
In HTML, all values are case-insensitive

sigo sin enteder que ocupas hacer

REVIDEUX · #11 (**permalink**) 18/04/2012, 11:37

Bueno para los que se complican tanto, por temas de nomenclatura y se desvian por responder algo que no se ha preguntado, les envio esto:

Esto es lo que se renderiza despues de aplicar algun for, bueno para que lo comprendan mejor, en un escenario mas comodo, por ejemplo tengo una tabla empleados, pueden haber 80 o 100 empleados, o quizas 5 o 10, podrian aparecer las fotos de la persona junto sus nombres por bloques y junto con ellos un botoncito(en este caso se realizara con 4) como se muestra a continuacion:

"lukas4"
<input type="submit" class="nice small radius blue button" value="Delete" name="Delete1" id="eli2-1" data-reveal-id="myModal2"/>

"gjx2 "
<input type="submit" class="nice small radius blue button" value="Delete" name="Delete2" id="eli2-2" data-reveal-id="myModal2"/>

"caricatos "
<input type="submit" class="nice small radius blue button" value="Delete" name="Delete3" id="eli2-3" data-reveal-id="myModal2"/>

"revideux"
<input type="submit" class="nice small radius blue button" value="Delete" name="Delete4" id="eli2-4" data-reveal-id="myModal2"/>

La cuestion aqui es recuperar este id(ya sea eli2-1,eli2-2,eli2-3, eli2-4 ), para poder mostrarlo en un mensaje, si tuvieran alguna otra indicacion o mejor aun la solucion(realizado con jquery) seria perfecto.

Saludos Cordiales...

caricatos · #12 (**permalink**) 18/04/2012, 15:11

Hola:

Deberías saber valorar mejor las ayudas... he visto que has dado valoración negativa a dos de los que hemos respondido... y aunque esas respuestas no resuelvan el tema, deberás considerar siempre... pero para tí, eso es negativo... bueno, aunque con la librería no puedo ayudarte, te cuento que las variables también se envían por los botones submit, siempre y cuando tengan definidos los campos name y value... no estoy seguro de que el problema en este caso sea de javascrip o simple html... también podrías pensar en variables tipo "hidden"... pero no me apetece ayudarte más, porque no te lo mereces.

Saludos

REVIDEUX · #13 (**permalink**) 18/04/2012, 15:15

Bueno ya que no se pudo responder a tiempo la pregunta aqui esta la respuesta la mostrare tal como es:

for (i=0, i< x, i++)
{
contador += 1;
aprueba = contador;
afin = aprueba.ToString();
resuelto = "eli2/" + afin;
<input type="submit" class="nice small radius blue button" value="Delete" name="Delete/@afin" onclick="recupera('@resuelto.ToString()')" id="eli2/@afin" data-reveal-id="myModal2"/>
}

el javascript:

function recupera(value) {
alert(value);
}

A veces las cosas simples no las vemos, y las respuestas inadecuadas sobran.

Hasta luego saludos cordiales.

REVIDEUX · #14 (**permalink**) 18/04/2012, 15:31

Bueno ahora si me parece que has mejorado en expresarte, diciendo que no conocias la libreria, por alli hubieras comenzado, todas las ayudas son bienvenidas pero con expresion como (ni empezar)(sigue siendo un número para un atributo id

) y (debe comenzar con una letra

), se lo merecian, y no son una muy grata bienvenida para cualquiera, asi que bien merecido esta, el que haya ingresado al foro no es porque sea un principiante de principiantes y me esten explicando sobre nomenclaturas de un 'id' unico, si lo creyeron pues que lastima deberian valorar a los nuevos ingresos en vez de intentar sobajarlos de arranque, simplemente se dice 'no se' o se evita uno responder, y tu caricatos siendo un moderador deberias de saberlo a la perfeccion, aun asi no me desanimo por estas actitudes y seguire apoyando en lo que pueda en el foro, soltando algunas preguntas de vez en cuando.

Gracias . Saludos Cordiales..

Cita:

Iniciado por caricatos

Hola:

Deberías saber valorar mejor las ayudas... he visto que has dado valoración negativa a dos de los que hemos respondido... y aunque esas respuestas no resuelvan el tema, deberás considerar siempre... pero para tí, eso es negativo... bueno, aunque con la librería no puedo ayudarte, te cuento que las variables también se envían por los botones submit, siempre y cuando tengan definidos los campos name y value... no estoy seguro de que el problema en este caso sea de javascrip o simple html... también podrías pensar en variables tipo "hidden"... pero no me apetece ayudarte más, porque no te lo mereces.

Saludos

caricatos · #15 (**permalink**) 18/04/2012, 15:57

Hola:

No debes justificar más lo injustificable... el aconsejarte algo para que no arrastres vicios deberías considerarlo una ayuda.

Cita:

Iniciado por REVIDEUX

... no es porque sea un principiante de principiantes y me esten explicando sobre nomenclaturas de un 'id' unico, si lo creyeron pues que lastima deberian valorar a los nuevos ingresos en vez de intentar sobajarlos de arranque...

No sé que quieres decir con "sobajar"...

Cita:

Iniciado por REVIDEUX

... y tu caricatos siendo un moderador deberias de saberlo a la perfeccion...

Bueno... no se trata de un puesto remunerado

... tengo el cartelito después de haber respondido un buen número de mensajes, en muchos casos dando buenas respuestas (como la que te he dado, aunque no la supieses valorar)... y mis respuestas son como un usuario normal, la moderación va por otro lado (evitar spam, o insolencias u otras cosas que sobren, o mover temas o mensajes... o cerrarlos...)

Saludos

emprear · #16 (**permalink**) 18/04/2012, 15:58

@REVIDEUX
Voy a obviar los comentarios y valoraciones que has hecho hacia otros usuarios, por demás injustificadas teniendo en cuenta lo oportuno de sus respuestas, ya que de no hacerlo tendría que responderte con términos que decididamente violan las normas del foro.

Vayamos a tu script entonces, eso que has hecho es sencillamente, un "mamarracho infuncional", podemos mejorarlo un poco con algo como

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var x = 6;
var contador = 0;
for (var i=0;i<=x;i++)
 
 {
 contador += 1;
 var aprueba = contador;
 var afin = aprueba.toString();
 var resuelto = "eli2/" + afin;
 document.writeln('<input type="submit" class="nice small radius blue button" value="Delete" name="Delete/@afin" onclick="recupera(\'@resuelto.ToString()\')" id="eli2/@afin" data-reveal-id="myModal2"/>');
 }
 
 
function recupera(value) {
 alert(value);
 }
//]]>
</script>
 
</body>
</html>

con lo que lo convertiríamos en un "mamarracho funcional"...
una serie de botones con id repetidos, hablando de ids, porque no te mantuviste en tus 1,2,3,4 en lugar de usar eli2/@afin.
Que pregunta la mía, si para hacer lo que estás haciendo da lo mismo

REVIDEUX · #17 (**permalink**) 18/04/2012, 16:28

Esta gracioso tu gatito mi estimado "emprear ", y vaya que sueles ser intimidador....

...bueno a lo que ibamos,supongo que habras leido desde el principio cual era la cuestion no?, esto esta desarrollado en mvc y su resultado no es necesariamente "ids" repetidos

,a menos que mi vista me engañe ademas de los que esta a mi costado, sin contar con los resultados obtenidos, y bueno para terminar te falto leer la parte en donde decia q era un numero indeterminado, claro no puse todo el codigo solo unas partes nada mas, pero aun asi gracias por tu respuesta, si deseas puedes violar las normas no tengo ningun problema, a fin de cuentas es tu tema, por mi quedo cerrado el que yo comence.

Saludos cordiales...

Cita:

Iniciado por emprear

@REVIDEUX
Voy a obviar los comentarios y valoraciones que has hecho hacia otros usuarios, por demás injustificadas teniendo en cuenta lo oportuno de sus respuestas, ya que de no hacerlo tendría que responderte con términos que decididamente violan las normas del foro.

Vayamos a tu script entonces, eso que has hecho es sencillamente, un "mamarracho infuncional", podemos mejorarlo un poco con algo como

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var x = 6;
var contador = 0;
for (var i=0;i<=x;i++)
 
 {
 contador += 1;
 var aprueba = contador;
 var afin = aprueba.toString();
 var resuelto = "eli2/" + afin;
 document.writeln('<input type="submit" class="nice small radius blue button" value="Delete" name="Delete/@afin" onclick="recupera(\'@resuelto.ToString()\')" id="eli2/@afin" data-reveal-id="myModal2"/>');
 }
 
 
function recupera(value) {
 alert(value);
 }
//]]>
</script>
 
</body>
</html>

con lo que lo convertiríamos en un "mamarracho funcional"...
una serie de botones con id repetidos, hablando de ids, porque no te mantuviste en tus 1,2,3,4 en lugar de usar eli2/@afin.
Que pregunta la mía, si para hacer lo que estás haciendo da lo mismo

GatorV · #18 (**permalink**) 18/04/2012, 19:57

Sí estas usando jQuery, te puedes ahorrar todo lo que hiciste y simplemente darle un class extra a tus botones:

Código HTML:

Ver original"lukas4"
<input type="submit" class="nice small radius blue button deletebutton" value="Delete" name="Delete1" id="eli2-1" data-reveal-id="myModal2"/>
 
"gjx2 "
<input type="submit" class="nice small radius blue button deletebutton" value="Delete" name="Delete2" id="eli2-2" data-reveal-id="myModal2"/>
 
"caricatos "
<input type="submit" class="nice small radius blue button deletebutton" value="Delete" name="Delete3" id="eli2-3" data-reveal-id="myModal2"/>
 
"revideux"
<input type="submit" class="nice small radius blue button deletebutton" value="Delete" name="Delete4" id="eli2-4" data-reveal-id="myModal2"/>

Código Javascript:

Ver originaljQuery(document).ready(function() {
      jQuery('.deletebutton').click(function() {
             alert(jQuery(this).attr('id'));
      });
});

Saludos.

PD. Es una lástima que realmente no valores la ayuda que te dan los demás usuarios debido a no expresarte de la forma más adecuada, al final es una ayuda y se merece valorarla.

REVIDEUX · #19 (**permalink**) 18/04/2012, 23:21

Buenas noches y gracias GatorV:

Si intente ese metodo pero no valia para mis fines ultimos, afortunadamente llegue a resolver el problema, de todas maneras gracias por el consejo ya que estoy seguro que servira para nuestros otros compañeros.

Saludos cordiales, hasta otra oportunidad.

P.D: No dejo de agradecer las sugerencias que puedan aportar nuestros compañeros, solo que no me gustan los tonitos sarcasticos, espero que sepan que es a lo que me refiero, y que pongan algunas cosas que salen del contexto de la pregunta, si son ayudas, pero distraerian a cualquier compañero que pueda ser principiante del fondo del tema, por ello les pedi reserva y que apoyen en caso de que tengan algo favorable y que hayan comprendido el tema, como lo hizo el compañero "gjx2", de todas maneras gracias a todos.