Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/08/2013, 08:45
Novato2013
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 61
Antigüedad: 10 años, 10 meses
Puntos: 5
Conflicto javascript

Buenas tardes,

tengo un problema, he hecho una caja que cuando clickeas en el nombre se abre la caja esta con una serie de datos, primero la he creado aparte, en un archivo nuevo y me funciona perfectamente, este es el código de la caja:

Primero tiene un script:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     $('#myModal').modal('hide')
  3. </script>

Luego ya dentro del body una palabra que es donde clickeas para que se abra la caja:

Código HTML:
Ver original
  1. <a href="#myModal" data-toggle="modal" style="color:black;" >Palabra donde clickeas</a>

Y luego viene la caja creada con un form, os pongo solo la línea del form para que sea más legible todo, dentro del form sólo hay divs con estilos, sin más:

Código HTML:
Ver original
  1. <form id="myModal" method="post" accept-charset="UTF-8" >
  2.          <div style="...> ...blablabla... </div>
  3.          <div style="...> ...blablabla... </div>
  4. </form>

El caso es que por separado me funciona perfectamente, clickeo en la palabra y se me abre la caja, pero luego la meto en mi código en una zona específica y cuando clickeo no se abre. Os detallo más de lo que he descubierto hasta ahora y lo que pasa cuando clickeo:

Yo creo que es algún tipo de cnflicto con javascritp que no sé solucionar. Al principio pensaba que era por un evento onmouseover pero luego lo he descartado ya que cuando lo elimino este evento sigue pasando.
Luego con el Firebug cuando clickeo en la palabra de la caja me señala la siguiente línea en amarillo sn ejecutar la caja:

Código HTML:
Ver original
  1. <div class="listelements ui-draggable">
  2. ...
  3. </div>

Dentro de ese div es donde se encuentra la palabra para clickear que he puesto más arriba:

Código HTML:
Ver original
  1. <a href="#myModal" data-toggle="modal" style="color:black;" >Palabra donde clickeas</a>

La palabra tiene que ir ahí adentro pero el form(la caja) no tiene por qué, lo he probado en varias posiciones dentro fuera , antes y después del div de ui-draggable y nada.
Lo que se me ocurre es que me está dando un error con el ui-draggable ese que es una clase que se le añade a listelements cuando intento arrastrar el elemento, es otro javascrip, lo pongo:

Código Javascript:
Ver original
  1. $(function() {
  2. // there's the gallery and the trash
  3.     var $gallery = $( ".gallery" ),
  4.     $trash = $( "#trash" );
  5.     // let the gallery items be draggable
  6.     $( ".listelements", $gallery ).draggable({
  7.     cancel: "a.ui-icon", // clicking an icon won't initiate dragging
  8.                     revert: "invalid", // when not dropped, the item will revert back to its initial position
  9.                     containment: "document",
  10.                     helper: "clone",
  11.                     cursor: "move"
  12.                 });
  13.                
  14.                 // let the trash be droppable, accepting the gallery items
  15.                 $trash.droppable({
  16.                     accept: ".gallery > .listelements",
  17.                     activeClass: "ui-state-highlight",
  18.                     drop: function( event, ui ) {
  19.                         deleteImage( ui.draggable );
  20.                     }
  21.                 });
  22.  
  23.                 // let the gallery be droppable as well, accepting items from the trash
  24.                 $gallery.droppable({
  25.                     accept: "#trash .listelements",
  26.                     activeClass: "custom-state-active",
  27.                     drop: function( event, ui ) {
  28.                         recycleImage( ui.draggable );
  29.                     }
  30.                 });
  31. }

Para terminar de situar bien el conflicto y por si no ha quedado muy claro:

La palabra a clickear y que hace que salga una caja emergente o popup o como querais llamarlo, está dentro de una tabla con diferentes elementos y esta tabla entera le afecta una función javascript que la hace deslizable y soltable en otra parte. La caja por separado y la tabla por separado funcionan perfectamente pero cuando meto la palabra de la caja dentro de la tabla deslizable e intento clickear en la palabra no se me ejecuta la caja.
Creo que es porque la zona en donde clickeo a su vez tb es deslizable al estar dentro de la tabla entonces como que predomina la opción deslizable y no deja ejecutar la caja, pero eso es desde mi inexperiencia y lo que he podido observar, si alguien coincide conmigo y sabe como solucionarlo, le estaría agradecido.

Muchas gracias.