Conflicto javascript

[Novato2013]

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:

<script type="text/javascript">
    $('#myModal').modal('hide')
</script>
 

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

Código HTML:

<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:

<form id="myModal" method="post" accept-charset="UTF-8" >
         <div style="...> ...blablabla... </div>
         <div style="...> ...blablabla... </div>
</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:

<div class="listelements ui-draggable">
...
</div>
 

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

Código HTML:

<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:

$(function() {
// there's the gallery and the trash
    var $gallery = $( ".gallery" ),
    $trash = $( "#trash" );
    // let the gallery items be draggable
    $( ".listelements", $gallery ).draggable({
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
                    revert: "invalid", // when not dropped, the item will revert back to its initial position
                    containment: "document",
                    helper: "clone",
                    cursor: "move"
                });
                
                // let the trash be droppable, accepting the gallery items
                $trash.droppable({
                    accept: ".gallery > .listelements",
                    activeClass: "ui-state-highlight",
                    drop: function( event, ui ) {
                        deleteImage( ui.draggable );
                    }
                });
 
                // let the gallery be droppable as well, accepting items from the trash
                $gallery.droppable({
                    accept: "#trash .listelements",
                    activeClass: "custom-state-active",
                    drop: function( event, ui ) {
                        recycleImage( ui.draggable );
                    }
                });
}
 

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.

[cesa_r]

Agrega esta linea:

Código:

var $ = jQuery.noConflict();

[Novato2013]

Iniciado por cesa_r

Agrega esta linea:

Código:

var $ = jQuery.noConflict();

Por un momento conseguiste iluminarme la cara... no me funciona

No sé si hay que añadirle algo más o depende de dónde coloque la línea, de todas formas he probado colocarla cuando empieza el script de la caja, luego sola dónde empieza la función que hace arrastable a la tabla y luego colocándola en ambos sitios y nada :(

De todas formas muchas gracias por tu respuesta, si se te ocurre algo más.

[Novato2013]

Iniciado por cesa_r

Agrega esta linea:

Código:

var $ = jQuery.noConflict();

cesar_r

Indagando en tu línea de código he encontrado que por lo visto se puede sustituir $ por cualquier letra, es decir, puedo poner:

Código Javascript:

var a = jQuery.noConflict();
 

y donde antes había $ en el script, pongo una a en todos los lados. Lo he probado, y tb se puede hacer con todos los scripts poniendo una letra diferente a cada uno.
El resultado es que ahora al clickear para que me aparezca la caja popup me aparece pero a la vez se me pone toda la pantalla en negro transparente y los otros scripts no me funcionan bien...
Te suena de algo lo que te cuento o te da alguna nueva idea??

Muchas gracias.

Saludos.

[cesa_r]

Como dices:

var $ = jQuery.noConflict();

$ puede ser sustituida por una letra pero es mas tedioso te deveria funcionar esta linea tal cual.

Intenta asi:

<script type="text/javascript">
var $ = jQuery.noConflict();

$(document).ready(function() {

$('#myModal').modal('hide')

$(function() {
// there's the gallery and the trash
var $gallery = $( ".gallery" ),
$trash = $( "#trash" );
// let the gallery items be draggable
$( ".listelements", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});

// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: ".gallery > .listelements",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});

// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash .listelements",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
}

//////////////////////////////////////////////////////////////////////////////////////////////////

});
</script>

[Novato2013]

Nada :( ...

[Novato2013]

Iniciado por cesa_r

Como dices:



$ puede ser sustituida por una letra pero es mas tedioso te deveria funcionar esta linea tal cual.

Intenta asi:

AVANZANDO:

He eliminado este script porque me he dado cuenta que no hacía nada, sólo crear conflictos:

Código Javascript:

<script type="text/javascript">
        $('#myModal').modal('hide')
        </script>
 

Y dado que las soluciones expuestas aquí o que se me han ocurrido no funcionaban, he intentado con un evento onclick y un alert dentro de este

Código HTML:

<div onclick="alert('You are inside of the box ')">
 

Y con eso me permite que salga una ventana popup y que funcione tb el evento draggable, pero claro, la ventana es la que te sale por defecto con el alert, lo que quiero es que aparezca la caja que yo he creado con sus respectivas clases pero no encuentro donde modificar la ventana del alert y no sé si es posible

Lo que se me ha ocurrido es crear una función javascript que sustituya el alert y está función de javascript sea la q crea la caja, sé que es posible crear una clase con javascript(tengo poca experiencia con este lenguaje)pero no he visto ni encontrado ningún ejemplo de un script que cree varias clases dentro de otras y con sus respectivos estilos, es esto posible?

Lo suyo sería poner mi caja con sus divs y clases dentro del alert sin más y que se modificase la caja del alert pero era demasiado bonito para poder ser cierto :P :)

Muchas gracias por cualquier tipo de ayuda u orientación.