Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Saber que imagenes estan marcadas y enviar petición

Estas en el tema de Saber que imagenes estan marcadas y enviar petición en el foro de Frameworks JS en Foros del Web. Buenas, Tengo un listado de imagenes/iconos que al ser pulsados se iluminan porque mediante un toggleclass les añado o quito una clase. La idea que ...
  #1 (permalink)  
Antiguo 06/06/2012, 14:56
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Saber que imagenes estan marcadas y enviar petición

Buenas,

Tengo un listado de imagenes/iconos que al ser pulsados se iluminan porque mediante un toggleclass les añado o quito una clase.

La idea que busco es que el usuario seleccione las imagenes pulsando encima y que luego pulsando un boton de enviar, envíe la información de que imagenes se han pulsado al servidor. Me sirve con el identificador de la imagen, ya que las imagenes que se muestran vienen de la base de datos.

Tengo la parte de marcar las imagenes, pero no consigo ver de qué forma puedo saber cuales quedan marcadas para que pulsando el botón enviar me las envíe al servidor.

Debo tener un <form> y un botón submit para poderlo hacer? es lo recomendable o puedo recopilar la info en alguna capa oculta y mediante ajax enviar la información al servidor?

¿Cómo lo haríais vosotros?

Dejo el codigo actual, que solo me muestra el total, y no el id de cada imagen que fue marcada...

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.     $("li").click( function () {
  3.         $(this).toggleClass('activo');
  4.         var n = $('.activo').length;
  5.         $("span.total").text("Hay " + n + " elementos seleccionados");
  6.     });
  7. });

Muchas gracias de antemano
  #2 (permalink)  
Antiguo 06/06/2012, 15:25
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 6 meses
Puntos: 87
Respuesta: Saber que imagenes estan marcadas y enviar petición

Hola,

Para obtener los id de las imágenes, podrías usar each().

Código Javascript:
Ver original
  1. $(".activo").each(function(){
  2.     $("span.total").append("id seleccionado: "+$(this).attr("id")+", ");
  3. });

Ahora.. para enviar esta información, puedes hacer de las 2 formas que propones. Puedes tener un <form> con un campo oculto donde almacenes la info antes de enviarla, o bien enviar esta información por AJAX.

Saludos!
  #3 (permalink)  
Antiguo 07/06/2012, 00:27
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Saber que imagenes estan marcadas y enviar petición

Gracias,

Tengo la siguiente lista, el identificador lo he colocado en el <li>, la forma que dices funciona va recopilando los id's, lo que pasa que te los va sumando.

<ul class="lista">
<li id="1"><img src="imagen1.png"/></li>
<li id="2"><img src="imagen2.png"/></li>
<li id="3"><img src="imagen3.png"/></li>
<li id="4"><img src="imagen4.png"/></li>
<li id="5"><img src="imagen5.png"/></li>
<li id="6"><img src="imagen6.png"/></li>
</ul>

Código Javascript:
Ver original
  1. $("li").click( function () {
  2.         $(this).toggleClass('activo');
  3.         $(".activo").each(function(){
  4.             $("span.total").append($(this).attr("id")+", ");
  5.         });
  6.     });

Si selecciono el 1, 2 y 3, y desmarco el 2 por ej. me debería decir que tengo marcados el 1 y el 3. Sin embargo me muestra todo esto: 1, 1, 2, 1, 2, 3, 1, 3,

¿Se os oscurre alguna forma para que añada o quite elementos de forma correcta? :S

Muchas gracias de antemano
  #4 (permalink)  
Antiguo 08/06/2012, 08:33
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 6 meses
Puntos: 87
Respuesta: Saber que imagenes estan marcadas y enviar petición

Hola,
Para el ejemplo que te dí, bastaría con borrar el contenido de <span>:

Código PHP:
Ver original
  1. $("li").click( function () {
  2.         $(this).toggleClass('activo');
  3.         $("span.total").empty();
  4.         $(".activo").each(function(){
  5.             $("span.total").append($(this).attr("id")+", ");
  6.         });
  7.     });

Saludos!
  #5 (permalink)  
Antiguo 08/06/2012, 11:45
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Saber que imagenes estan marcadas y enviar petición

Gracias quike88! muy útil!

Estoy probándolo y parece que todo bien, se guarda una coma al final que no sé quitar, pero es un detalle menor, cuando reciba los datos ya la trataré.

Lo bueno es que diste en el clavo.

Un saludo
  #6 (permalink)  
Antiguo 08/06/2012, 12:03
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Saber que imagenes estan marcadas y enviar petición

Una pregunta más!

Si el campo es cualquier elemento que no sea un formulario lo tengo, pero quiero guardarlo en un campo hidden de un formulario xD

¿Cómo guardo los valores en un hidden dentro del "value"?

Lo he probado dandole un id al input pero me los guarda despues del input, no dentro del campo value

Incluso se leer los datos de un campo
$("#nombrecampo").val();

Pero no escribir en él...

<input type="hidden" id="categorias" name="categorias" value="" />

Muchas gracias de antemano!
  #7 (permalink)  
Antiguo 08/06/2012, 12:48
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Saber que imagenes estan marcadas y enviar petición

Lo he probado también intentando coger el valor del span... ya que el span tengo bien los valores e intentandolo meter en el value del campo hidden pero no lo consigo

Código Javascript:
Ver original
  1. $("span.total").empty();
  2.             $("#suscripcion_categorias li.activo").each(function(){
  3.                 $("span.total").append($(this).attr("id")+", ");
  4.                 var value = $("span.total").val();
  5.                 $("#categorias").attr('value', value);
  6.             });
  #8 (permalink)  
Antiguo 08/06/2012, 12:52
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Saber que imagenes estan marcadas y enviar petición

Tenia un error al coger el valor del contenido del span, en lugar de .val() era .html()

Código Javascript:
Ver original
  1. $("span.total").empty();
  2.             $("#suscripcion_categorias li.activo").each(function(){
  3.                 $("span.total").append($(this).attr("id")+", ");
  4.                 var value = $("span.total").html();
  5.                 $("#categorias").attr('value', value);
  6.             });

Pero este metodo es un poco cutre tener que tener una capa span entre medias...

¿No se puede ir agrupando directamente los valores en el campo value del campo hidden?

Muchas gracias de antemano
  #9 (permalink)  
Antiguo 08/06/2012, 13:13
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 6 meses
Puntos: 87
Respuesta: Saber que imagenes estan marcadas y enviar petición

Hola,

podrías guardar los valores en un array y luego volcarlos en el atributo value de tu input.

Código Javascript:
Ver original
  1. $("li").click( function () {
  2.         var datos = new Array();
  3.         var i = 0;
  4.         $(this).toggleClass('activo');
  5.         $(".activo").each(function(){
  6.             datos[i] = $(this).attr("id");
  7.              i++;
  8.         });
  9.         $("#categorias").attr('value', datos.join(','));
  10.     });

Saludos!
  #10 (permalink)  
Antiguo 08/06/2012, 13:49
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Saber que imagenes estan marcadas y enviar petición

Cita:
Iniciado por quike88 Ver Mensaje
Hola,

podrías guardar los valores en un array y luego volcarlos en el atributo value de tu input.

Código Javascript:
Ver original
  1. $("li").click( function () {
  2.         var datos = new Array();
  3.         var i = 0;
  4.         $(this).toggleClass('activo');
  5.         $(".activo").each(function(){
  6.             datos[i] = $(this).attr("id");
  7.              i++;
  8.         });
  9.         $("#categorias").attr('value', datos.join(','));
  10.     });

Saludos!
Lo clavaste, funciona de 10!

Muchas gracias crack!

Etiquetas: ajax, imagenes, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:27.