Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] Recoger el color de la celda seleccionada por el usuario con php

Estas en el tema de Recoger el color de la celda seleccionada por el usuario con php en el foro de PHP en Foros del Web. Buenas tardes, He creado unos filtros para una búsqueda, de tal manera que el usuario entra y puede seleccionar el país con un select desplegable ...
  #1 (permalink)  
Antiguo 22/08/2013, 09:22
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 61
Antigüedad: 6 años, 5 meses
Puntos: 5
Recoger el color de la celda seleccionada por el usuario con php

Buenas tardes,

He creado unos filtros para una búsqueda, de tal manera que el usuario entra y puede seleccionar el país con un select desplegable donde aparecen los distintos paises y así para varias cosas como categoría, año, color, etc. Una vez que he conseguido los filtros y recibir la opción que marca el usuario para luego buscar en la base de datos con la entrada del usuario, quiero ponerlo más bonito, que no sea un simple select para todo, sino cambiar algunos. De tal manera que para los años he creado un slider el cual funciona perfectamente y ahora para los colores quería crear una tabla de colores para sustituir el select, de tal manera que el usuario pueda marcar la casilla del color q vea y yo poder saber qué casilla ha marcado.

Lo primero que se me ocurrió, es pensar en extrapolar el select a la tabla es decir, el <select> es a <table> como el <option> del select puede ser a <td> de la tabla , pero nada no me funcionó, este es el código inicial q tenía cuando buscaba el color con el select y el cual funciona perfectamente:

Código PHP:
Ver original
  1. if (isset ($_POST['ColorInput'])) {
  2.     $ColorInput = $_POST['ColorInput'];
  3.     if ($ColorInput !=''){
  4.         if($DataFilter!="") {
  5.             $DataFilter .= " AND ";
  6.         }
  7.         $DataFilter .= "Body_colorgroup_id = " . $ColorInput ." ";
  8.     }
  9. } else {
  10.     $ColorInput = '';
  11. }
Este if comprueba si el usuario ha seleccionado algún color y si es asi busca en la base de datos usando la variable $DataFilter

Y esta segunda parte, aparte de recoger el color marcado por el usuario lo mantiene en pantalla a pesar de que se recargue la página, de tal manera que cuando se muestren los resultados se muestre tb el color q se seleccionó y no se quede vacío el select.

Código PHP:
Ver original
  1. <label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
  2.                                     <select name="ColorInput">
  3.                                         <option></option>
  4.                                         <?php
  5.                                         $rcscolor = $cardata->query($qrycolor);
  6.        
  7.                                         while ($row = $rcscolor->fetch_array(MYSQLI_BOTH)) {
  8.                                            
  9.                                             if ($row["body_colorgroup_id"] == $ColorInput) {
  10.                                                 $ColorSelected = "selected";
  11.                                             } else {
  12.                                                 $ColorSelected = "";
  13.                                             }
  14.                                            
  15.                                             ?><Option  <?php echo $ColorSelected; ?> value="<?php echo $row["body_colorgroup_id"]; ?>"><?php echo $row["colorDescription"]; ?></option>
  16.                                         <?php
  17.                                         }
  18.                                        
  19.                                         echo "</select>"
  20.                                         ?>                     
  21.                                     </select>

Bien, una vez visto que me funcionaba al igual q con otros filtros, he querido ponerlo más bonito como he dicho, y lo primero que hice es lo q he contado simplemente cambiar table por select y option por td, aparte de construir la tabla. Este código no me funcionaba así q no lo posteo más q nada porque ya lo he ido mejorando y no lo tengo tal cual. Ademas no sé si será una burrada lo q intenté pero para mi tiene mucha lógica, ya que una tabla es un menu al igual q el select simplemente q lo muestra en celdas directamente sin ser desplegable, pero bueno, no funciona o no he sabido hacer que funcione.

Luego he usado
Código HTML:
Ver original
  1. type="hidden"
que se supone que es para opciones ocultas al usuario pero no lo pillo muy bien y no sé si me sirve para lo busco, tampoco he conseguido que funcione.

Por último tengo un script que doy la sensación de que se marca la celda, por lo menos el usuario ya sabe que está la celda marcada, pero ahora no sé cómo recoger la celda q ha marcado. el script q he usado es este:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             var cell = null;
  3.             function press(obj) {
  4.               obj.style.border = '1px solid #46FB04';
  5.               //obj.style.background = 'rgba(70,251,4,0.1)';
  6.               //.trans{ background:rgba(255,255,255,0.6);}
  7.               if (cell != null && cell != obj)
  8.                 cell.style.border = '';
  9.               cell = obj;
  10.             }
  11.         </script>
Lo he intentado con background pero no consigo q se vea el color marcado asi q lo mejor es cambiar el borde un poco, lo he kerido poner más grueso el borde con más px pero me cambiar el tamaño de las celdas haciendo estás irregulares, así q lo he dejado en 1px, q aunq no se nota mucho pero bueno, lo más importante es poder coger el background para asi tener el color q ha marcado.

El código final que tengo es este:

Código PHP:
Ver original
  1. <label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
  2.                                 <table name="ColorInput" id="ColorsTable" >
  3.                                     <?php
  4.                                     $arrcolorDescription = array();
  5.                                    
  6.                                     $rcscolor = $cardata->query($qrycolor);
  7.                                    
  8.                                     while ($row = $rcscolor->fetch_array(MYSQLI_BOTH)) {
  9.                                             switch ($row["StructurePK"]) {
  10.                                                 case 'Color';
  11.                                                     $arrColor[] = $row;
  12.                                                     break;
  13.                                             }
  14.                                             if ($row["body_colorgroup_id"] == $ColorInput) {
  15.                                                 $ColorSelected = "selected";
  16.                                             } else {
  17.                                                 $ColorSelected = "";
  18.                                             }
  19.                                     }
  20.                                     ?>     
  21.                                         <tr>
  22.                                     <?php  
  23.                                             $intCount = 1;
  24.                                             $intHalf =  count($arrColor)/2;
  25.                                            
  26.                                             foreach ($arrColor as $Color => $valueArray){
  27.                                     ?>              <td onclick="press(this)" type="hidden" name="ColorInput" <?php echo $ColorSelected; ?> value="<?php echo $row["body_colorgroup_id"]; ?>" class="<?php echo $valueArray["ClassColor"]; ?>" title="<?php echo $valueArray["colorDescription"]; ?>"> </td>
  28.                                     <?php  
  29.                                                     if ($intCount >= $intHalf) {
  30.                                     ?>
  31.                                                         </tr>
  32.                                                         <tr>
  33.                                     <?php               $intHalf = $intHalf*2;
  34.                                                     }  
  35.  
  36.                                                     $intCount++;
  37.                                                 }
  38.                                             unset($valueArray);
  39.                                     ?>  </tr>
  40.                                    
  41.                                 </table>

Me marca la celda con el evento onclick y el script q he puesto más arriba, pero no me recoge la información.

Si alguien se le ocurre algo, estaría muy agradecido.

Muchas gracias.

Saludos.
  #2 (permalink)  
Antiguo 23/08/2013, 03:13
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 61
Antigüedad: 6 años, 5 meses
Puntos: 5
Respuesta: Recoger el color de la celda seleccionada por el usuario con php

AVANZANDO...

Poniendo esta nueva línea dentro del script:

Código Javascript:
Ver original
  1. $(#colorelement).value = obj.class.name;

De tal manera que me quedaría así el script:

Código Javascript:
Ver original
  1. //Select a cell of the table colors
  2.             var cell = null;
  3.             function press(obj) {
  4.               obj.style.border = '3px solid #006DCC';
  5.               $(#colorelement).value = obj.class.name;
  6.               //obj.style.background = 'rgba(70,251,4,0.1)';
  7.               //.trans{ background:rgba(255,255,255,0.6);}
  8.               if (cell != null && cell != obj) {
  9.                 cell.style.border = '';
  10.                 cell = obj;
  11.               }
  12.             }

Y poniendo un input con un hidden después de la tabla de colores que posteé más arriba:

Código HTML:
Ver original
  1. ...</table>                    
  2.                                 <input type="hidden" id="colorelement" name="colorelement" value="" />

Creo que recojo la información de la celda, pero me está fallando un faltando algo para que termine de funcionar... no termino de entender bien la funcionalidad del hidden, es un input sin más, no sé si es q me falta algo ahí para que funcione bien...

Postearé más cuando avance. Si alguien ve algo se lo agradecería. Gracias.

P.D.: ya pude poner más grueso el borde de la celda (3px) como podeis ver, lo arreglé fijando el tamaño de la celda con una nueva clase aparte.
  #3 (permalink)  
Antiguo 10/09/2013, 05:01
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 61
Antigüedad: 6 años, 5 meses
Puntos: 5
Respuesta: Recoger el color de la celda seleccionada por el usuario con php

CASI ACABADO

Ya he conseguido recoger el color y marcar la celda correcta y que después de buscar los elementos se me quede la celda marcada, pero si a partir de ahí quiere el usuario realizar una nueva búsqueda al marcar otro color(otra celda) se queda marcada la anterior a no ser que clickees sobre la anterior y entonces ya se desmarca. Creo que es por el comando $_SESSION que guarda el valor de la anterior celda marcada aunque en teoría la parte de clickear es de java y debería de deseleccionarse automaticamente en el primer clickeo en otra celda, pongo el código nuevo:

La parte del filtro del color ahora es así:
Código PHP:
Ver original
  1. //Color
  2. $ColorFilter='';
  3.  
  4. if (isset ($_POST['colorcar'])) {
  5.     $ColorInput = $_POST['colorcar'];
  6. } elseif (isset( $_SESSION['filter']['colorcar'] )) {
  7.     $ColorInput = $_SESSION['filter']['colorcar'];
  8. } else {// Nothing
  9. }
  10.  
  11. if (isset($ColorInput)) {
  12.        
  13.     if ($ColorInput !=''){
  14.         $_SESSION['filter']['colorcar'] = $ColorInput;
  15.         if($DataFilter!="") {
  16.             $DataFilter .= " AND ";
  17.         }
  18.        
  19.         foreach ($arrColor as $CarColor) {
  20.             if ($CarColor["ClassColor"] == $ColorInput) {
  21.                 $ColorFilter = $CarColor["body_colorgroup_id"];
  22.             }
  23.         }
  24.         $DataFilter .= "Body_colorgroup_id = " . $ColorFilter ." ";
  25.     }
  26. }else {
  27.     $ColorInput = '';
  28. }

Mientras que la que está dentro del form para mostrar al usuario por pantalla la tabla de colores es así:

Código PHP:
Ver original
  1. <label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
  2.                                 <table name="ColorInput" id="ColorsTable" >
  3.                                     <tr>
  4.                                     <?php  
  5.                                         $intCount = 1;
  6.                                         $intHalf =  count($arrColor)/2;
  7.                                            
  8.                                         foreach ($arrColor as $Color){
  9.                                            
  10.                                             if ($Color["body_colorgroup_id"] == $ColorFilter ) {
  11.                                     ?>          <td onclick="press(this)" name="ColorInput" style ="border:3px solid black"  value="<?php echo $Color["body_colorgroup_id"]; ?>" class="<?php echo $Color["ClassColor"]; ?>" title="<?php echo $Color["colorDescription"]; ?>"></td>
  12.                                     <?php   } else {
  13.                                     ?>          <td onclick="press(this)" name="ColorInput"  value="<?php echo $Color["body_colorgroup_id"]; ?>" class="<?php echo $Color["ClassColor"]; ?>" title="<?php echo $Color["colorDescription"]; ?>"></td>
  14.                                     <?php   }  
  15.                                             if ($intCount >= $intHalf) {
  16.                                     ?>
  17.                                     </tr>
  18.                                     <tr>
  19.                                     <?php       $intHalf = $intHalf*2;
  20.                                             }  
  21.                                             $intCount++;
  22.                                         }
  23.                                         /*press(<?php echo $ColorFilter; ?>);*/
  24.                                     ?> 
  25.                                     </tr>
  26.                                 </table>                       
  27.                                 <input type="hidden" id="colorcar" name="colorcar" value="" />

Si os fijais, esta línea dle if:

Código PHP:
Ver original
  1. if ($Color["body_colorgroup_id"] == $ColorFilter ) {
  2.                                     ?>          <td onclick="press(this)" name="ColorInput" style ="border:3px solid black"  value="<?php echo $Color["body_colorgroup_id"]; ?>" class="<?php echo $Color["ClassColor"]; ?>" title="<?php echo $Color["colorDescription"]; ?>"></td>
Es donde le digo que cambie el borde de color si $Color["body_colorgroup_id"] == $ColorFilter , creo que debería ser en esa zona a lo mejor dónde debería de añadir más código para recoger tb la opcion de q el usuario marca un segundo color en la siguiente busqueda elimnandose d la seleccion el primer color seleccionado.

Y este es el javascript que me selecciona la celda de la tabla al hacer click y me cambia el borde de grosor para que el usuario sepa que color está seleccionando:

Código Javascript:
Ver original
  1. <script type="text/javascript">    
  2. //Select a cell of the table colors
  3.             var cell = null;
  4.             function press(obj) {
  5.                 obj.style.border = '3px solid black';
  6.                 if (cell != null && cell != obj){
  7.                     cell.style.border = '';
  8.                 }
  9.                 cell = obj;
  10.                 $("#colorcar").attr({
  11.                     value: cell.className
  12.                 })
  13.             }
  14. </script>

Con todo esto el único detallito que queda es q se desmarque automáticamente la celda marcada cuando el usuario clicke en otro color y no se marquen los dos, pero no sé muy bien como hacerlo.

Thanks
  #4 (permalink)  
Antiguo 11/09/2013, 04:08
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 61
Antigüedad: 6 años, 5 meses
Puntos: 5
Respuesta: Recoger el color de la celda seleccionada por el usuario con php

Ya lo he arreglado, comparto:

He añadido a la primera condición de mi if de la tabla este ID: "selected-color" q he introducido en el principio de mi script de tal manera que queda asi:

Código Javascript:
Ver original
  1. //Select a cell of the table colors
  2.             var cell = document.getElementById('selected-color');
  3.             if (cell) {
  4.                 press(cell);
  5.             }
  6.            
  7.             function press(obj) {
  8.                 obj.style.border = '3px solid black';
  9.                 if (cell != null && cell != obj){
  10.                     cell.style.border = '';
  11.                 }
  12.                 cell = obj;
  13.                 $("#colorcar").attr({
  14.                     value: cell.className
  15.                 })
  16.             }

Y he colocado mi script al final del código para que funcione correctamente en vez de en el head donde estaba antes.

Espero que sirva.

Salu2.

Etiquetas: celda, color, recoger, select, sql, tabla, usuario, variable
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 07:38.