[SOLUCIONADO] Eventos JavaScript no actuan sin recargar pagina antes

alejduin · #1 (**permalink**) 01/05/2013, 16:46

Buenas, como estan?

Estoy creando una pagina para la cual estoy usando jquery mobile y php, en una de las paginas programe un evento con JavaScript que me permite editar un registro de una base de datos mysql con solo hacer click sobre un texto.

El problema es que cuando cargo la pagina donde se deberia realizar esa funcion no se ejecuta nada, seguidamente vuelvo a cargar la pagina y alli si funciona lo que he programado.

Cualquier ayuda o sugerencia sera muy importante, de antemano gracias.

daPhyre · #2 (**permalink**) 01/05/2013, 19:49

Es difícil adivinar sin ver un código, pero adivinaré que estás agregando los Listeners antes que la página cargue. Te recomiendo que agregues los eventos en un document.on('init',miFuncionInit).

Si no es este el problema, necesitaremos más información.

alejduin · #3 (**permalink**) 21/05/2013, 11:26

Estoy iniciando en javascript, me ha pasado varias veces y no se como resolverlo, si entran el la pagina: http://creaciones.comli.com/ podrán ver en carrusel en la parte superior, para este he usado javascript y una libreria llamada jquery.carouFredSel-6.2.1-packed.js, crei que era cosa de la libreria pero me ocurre hasta con funciones sencillas hechas por mi mismo, al ir a cualquier otra area de la pagina y volver al index se ven la imagenes fijas pero no actua el javaScript, no hay movimiento, pero si recargan la pagina este comienza a funcionar.
Tal vez es una tontería pero no tengo idea de que pueda ser.
este el el codigo del carrusel (HTML)

Cita:

aqui esta el codigo JavaScript para lamar la libreria:

Cita:

daPhyre · #4 (**permalink**) 22/05/2013, 09:05

Código Javascript:

Ver original$( document ).ready(function() {

La versión más reciente ya no soporta "ready" y similares; ahora lo hace todo mediante "on"; quizá sea eso. Prueba con esta forma:

Código Javascript:

Ver original$( document ).on('ready', function() {

alejduin · #5 (**permalink**) 23/05/2013, 12:23

No, no es eso, ahora estoy pensando que es otra cuestión, es posible que sea porque estoy usando JQueryMobile. y el slider esta dentro de la pagina en JQM, porque cuando coloco el slider en paginas HTML5 no me da problema

.

Cita:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>..:: Creaciones Y & Y ::..</title>

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1.js"></script>


<script type="text/javascript" language="javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function($) {
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
});
</script>
<style type="text/css" media="all">
.image_carousel {
padding: 15px 0 15px 40px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
</style>
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>Page header</h1>
<nav data-role="navbar">
<ul>
<li><a href="index.php">item1</a></li>
<li><a href="sintaxisa.html">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</nav>
</header>
<article data-role="content">
<div class="image_carousel">
<div id="foo1">
<img src="imagenes/productos/01.jpg" width="140" height="140" />
<img src="imagenes/productos/02.jpg" width="140" height="140" />
<img src="imagenes/productos/02.jpg" width="140" height="140" />
<img src="imagenes/productos/03.jpg" width="140" height="140" />
<img src="imagenes/productos/04.jpg" width="140" height="140" />
<img src="imagenes/productos/05.jpg" width="140" height="140" />
<img src="imagenes/productos/06.jpg" width="140" height="140" />
<img src="imagenes/productos/07.jpg" width="140" height="140" />
<img src="imagenes/productos/08.jpg" width="140" height="140" />
<img src="imagenes/productos/09.jpg" width="140" height="140" />
<img src="imagenes/productos/10.jpg" width="140" height="140" />
<img src="imagenes/productos/02.jpg" width="140" height="140" />
<img src="imagenes/productos/02.jpg" width="140" height="140" />
<img src="imagenes/productos/03.jpg" width="140" height="140" />
<img src="imagenes/productos/04.jpg" width="140" height="140" />
<img src="imagenes/productos/05.jpg" width="140" height="140" />
<img src="imagenes/productos/06.jpg" width="140" height="140" />
<img src="imagenes/productos/07.jpg" width="140" height="140" />
<img src="imagenes/productos/08.jpg" width="140" height="140" />
<img src="imagenes/productos/09.jpg" width="140" height="140" />
<img src="imagenes/productos/10.jpg" width="140" height="140" />
</div>
<div class="clearfix"></div>
</div>
</article>
<footer data-role="footer">
<h4>Page footer</h4>
</footer>
</section>
</body>
</html>
</body>
</html>

Ahora no se que hacer.

alejduin · #6 (**permalink**) 26/05/2013, 22:11

Te cuento que solucione mi problema colocando rel="external" asi

Cita:

<a href="xxx.html "rel="external">Link a pagina con JavaScript que no funcionaba</a>

Ahora lo que no se es que contraindicaciones tiene eso, estoy investigandolo.
Muchas gracias por atender a mi duda.