Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/09/2013, 07:53
Novato2013
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 61
Antigüedad: 11 años, 5 meses
Puntos: 5
Problema con POPUP JQuery

Buenas,

he usado un jquery para hacer una ventana popup ya que de otra forma no lo lograba, el resultado es más o menos el esperado pero con algún inconveniente. He cambiado el evento onclick que venía por defecto por mouseover lo cual no me da ningún problema. El problema es el siguiente:
Tengo una lista de elementos que los muestro cada uno en una tabla y entonces kería que cuando el usuario pasara el ratón por encima del precio por ejemplo se abriera una ventana popup con otros detalles, esto lo cnsigo pero sólo se abre para la primera tabla, es decir, para el primer elemento, creo que es porque pongo la ventana popup fuera del for pero la llamada a esta ventana esa dentro de la casilla correspondiente, dentro del for.

Si coloco la ventana popup dentro del for lo que me hace es imprimirme directamente la ventana popup en cada elemento, sin necesidad de pasar el ratón por encima ni nada, y encima me cambia el tamaño de las tablas como es lógico ya que se mete dentro de estas donde está la llamada.

Pongo código para ayudar al entendimiento y a ver si alguien me puede ayudar:

Esta es la parte de la tabla para cada elemento, y el for q las genera, la id que llama al POPUP está en la segunda celda

Código PHP:
Ver original
  1. foreach( $rcsNumberOnPage as $NumberOnPages => $row) {                 
  2.                 ?>
  3.                     <div class="listcars">
  4.                         <table id="boxcarwidth" >
  5.                             <colgroup id="picturecartable" />
  6.                             <tr>
  7.                                 <td rowspan="4" colspan="2"><img src="<?php echo $row["SoucreUrlImage"]; ?>" alt=" "></td>
  8.                                 <td class="titlestable" >
  9.                                     <b id="opener" style="color:black;" >
  10.                                         &euro;<b> <?php echo formatNumber($row["PriceValue"]);?> </b>/
  11.                                         <b style="color:orange;">&euro; <?php echo formatNumber($row["BPMAmount"]);?> </b>
  12.                                     </b>                                               
  13.                                 </td>
  14.                                 <td class="titlestable" ><b><?php echo formatNumber($row["Mileage"]);?> Kms </b></td>
  15.                                 <td class="titlestable" ><b><?php echo $row["Initial_registration"];?></b></td>
  16.                                 <td class="titlestable" ><b><?php echo $row["Horsepower"];?> Kw</b></td>
  17.                             </tr>
  18.                             <tr>
  19.                                 <td colspan="4" ><b id="titlecarcolor"> <?php echo $row["Title"];?></b></td>
  20.                             </tr>
  21.                                
  22.                             <tr rowspan="2" >
  23.                                 <td colspan="3">This text comes from the data base, and it should be the definition of the car in which is showed some characteristics, we have to do this uploading the database, and setting a new column group</td>
  24.                                 <td class="buttonAdd text_align_right" >
  25.                                     <a href="link/to/trash/script/when/we/have/js/off"  title="Add this car" class="ui-icon icon-check" ></a>
  26.                                 </td>
  27.                             </tr>
  28.                         </table>
  29.                     </div> 
  30.                 <?php
  31.                 }
  32.                 ?>             
  33.                 </div>

Justo después de cerrar el for coloco la ventana POPUP que es sólo código HTML con su correspondiente llamada, no merece la pena poner todo el html no sirve para nada, pongo sólo la primera línea del id:

Código HTML:
Ver original
  1. <div id="dialog" >...
  2. </div>

Y en el head es donde coloco el script que es el siguiente:

Código Javascript:
Ver original
  1. <script>
  2.             $(function() {
  3.                 $( "#dialog" ).dialog({
  4.                     autoOpen: false,
  5.                     show: {
  6.                         effect: "blind",
  7.                         duration: 1000
  8.                     },
  9.                     hide: {
  10.                         effect: "explode",
  11.                         duration: 1000
  12.                     }
  13.                 });
  14.                 $( "#opener" ).mouseover(function() {
  15.                     $( "#dialog" ).dialog( "open" );
  16.                 });
  17.             });
  18.         </script>

Eso es todo, si alguien se le ocurre o ve donde estoy fallando. El resumen es que la ventana solo me aparece en el primer elemento y quiero que me aparezca en todos, yo creo que es porque no la meto dentro dle for pero cuando la meto me la imprime directamente sin necesidad del evento mouseover, cómo hago para que no me la imprima directamente y me funcione todo como el primer elemento??

Esta es el enlace dle jquery por si sirve de algo q usado:

http://jqueryui.com/dialog/#animated

Muchas gracias de antemano.

Saludos.