Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Diabliyo en 27 Junio 2011, 18:39 pm


Título: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 27 Junio 2011, 18:39 pm
Estoy implementando unos JQuerys a mi sistema, ya que he manejado siempre puro AJAX, pero ahora quiero usar el potencial de este framework.

Ya estuve haciendo algunos ejemplo (como practica) y me funcionan bien...

Ahora he puesto manos a la obra en la implementacion de algunos cambios en mi sitio web, pero me topo con el inconveninete de que me tira este error:

Código:
$(".estrella") is null

Lo que estoy implementando es un sistema de votaciones (con estrellitas), he impreso las estrellas usando CSS (usando sprites), pero quiero que al momento de que se pase el raton por alguna estrella esta se torneo de color (mouseover), pero no lo puedo lograr debido al error que les menciono...

Alguien le sucede igual, alguna idea ?

Mi code:

Código
  1. <html>
  2. <head>
  3. script language="javascript" type="text/javascript" src="miweb.com/js/jquery.js"></script>
  4. 	<script language="javascript" type="text/javascript" src="miweb.com/js/myjquery.js"></script>
  5. 	<script language="javascript" type="text/javascript" src="miweb.com/js/script.js"></script>
  6.  
  7.  
  8. <style>
  9. .icono_votaciones {background:transparent url(../imagenes/iconos.png) no-repeat;float:left;height:16px;width:80px;
  10. cursor:pointer;background-position:-1px -284px;}
  11. .estrella {width:16px;height:16px;float:left;}
  12. </style>
  13. </head>
  14.  
  15. <body>
  16. <!-- mucho codigo.... //-->
  17.  
  18.      <div class="icono_votaciones">
  19.           <div class="estrella"></div>
  20.           <div class="estrella"></div>
  21.           <div class="estrella"></div>
  22.           <div class="estrella"></div>
  23.           <div class="estrella"></div>
  24.      </div>
  25.  
  26. </body>
  27. </html>

En myjquery.js tengo:
Código:
$(document).ready(function()	{
	$('.estrella').mouseover( function() {
		var star= $(this).index()+1;
		$(this).parent().css( "background-position", "0 -"+ (32*star) +"px" );
		});
});

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Shell Root en 27 Junio 2011, 19:17 pm
Tienes errores de sintaxis. Mirad,
Código
  1. script language="javascript" type="text/javascript" src="'. HTTP_SERVER. '/js/jquery.js"></script>

Ni idea que es HTTP_SERVER

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 27 Junio 2011, 19:19 pm
Cita de: Shell Root en 27 Junio 2011, 19:17 pm
Tienes errores de sintaxis. Mirad,
Código
  1. script language="javascript" type="text/javascript" src="'. HTTP_SERVER. '/js/jquery.js"></script>

Ni idea que es HTTP_SERVER


Perdon... la variable HTTP_SERVER esta definida con la URL de la web.

Código:
define( HTTP_SERVER, "http://". $_SERVER['HTTP_HOST']. "/" );

Uso esto asi porque implemento mod_reqrite (urls amigables), asi que para evitar escirbir: $_SERVER['HTTP_HOST'], hice la variable esa de: HTTP_SERVER.

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Shell Root en 27 Junio 2011, 19:24 pm
Pero igual se supone que es PHP, debería de ser así no se  :silbar: -jamás en mi vida he usado algo como eso-
Código
  1. <script language="javascript" type="text/javascript" src="<?= HTTP_SERVER ?>/js/jquery.js"></script>

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 27 Junio 2011, 20:23 pm
En fin.. lo del HTTP_SERVER no es por hay el problema, sino el null...

Saludos !

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Nakp en 27 Junio 2011, 20:41 pm
ok... abre la consola del firebug (o lo que uses, debe ser una consola javascript)

e intenta con esto en la consola y si te da null es por 1 sola razon, no estas incluyendo jquery xD
Código
  1. $(".estrella")

y despues con
Código
  1. jQuery

si devuelve "is not defined" ya sabes que sucedio xD no existe jquery... si devuelve function() es que no hay elementos con la clase .estrella

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 27 Junio 2011, 22:53 pm
Por favor orientame sobre la consola del Firebug, lo tengo instalado en el firefox pero jamas lo uso...

Lo unico que hago para ver los errores generados en ejecucion de javascritp es la consola JavaScritp que atre Firefox (Ctrl+Shift+J). Es donde me sale:

Código:
Error: $(".estrella") is null
Archivo de origen: http://turundus.net/js/myjquery.js

Como ven la pagina es: http://www.turundus.net. si acceden y ven el codigo HTML veran que invoco el JQuery y esta presente:

Código:
<script language="javascript" type="text/javascript" src="http://turundus.net/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://turundus.net/js/myjquery.js"></script>
<script language="javascript" type="text/javascript" src="http://turundus.net/js/script.js"></script>

jquery.js --> es el jquery.1.6.1-google.min.js
myjquery.jd --> mi codigo jquery

Aun asi el error continua :(..... Que hago ?

Saludos !

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Nakp en 27 Junio 2011, 23:20 pm
no se si de algo sirve pero tienes el jquery afuera del head, ademas usas prototype (que tambien utiliza el signo dolar para su funcion) por lo tanto debes usar jQuery.noconflict(); y en vez de referirte a jquery con $ lo haras con jQuery :)

esto funciona de hecho :xD
Código
  1. jQuery('.estrella')

el problema es el conflicto con prototype ;)

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 28 Junio 2011, 00:46 am
Cita de: Nakp en 27 Junio 2011, 23:20 pm
no se si de algo sirve pero tienes el jquery afuera del head, ademas usas prototype (que tambien utiliza el signo dolar para su funcion) por lo tanto debes usar jQuery.noconflict(); y en vez de referirte a jquery con $ lo haras con jQuery :)

esto funciona de hecho :xD
Código
  1. jQuery('.estrella')

el problema es el conflicto con prototype ;)


Voy a probar como me mencionas...


Pero haciendo un parentesis, me puse a examinar con lupa el problema, ya que estoy acostumbrado a usar $ en llamadas jquery, asi que me arme un script voto.php el cual imprime 5 estrella s(tomadas de iconos.png) y cuando pasas el raton por cada estrella, esta se rellena.

Estoy usando LA MISMA NOTACION y corre muy bien...

Código
  1. <html>
  2. <head>
  3. <style type="text/css" rel="stylesheet">
  4. <!--
  5. .icono_votaciones {background:transparent url(template/catalogio/imagenes/iconos.png) no-repeat;float:left;height:16px;
  6. width:81px;cursor:pointer;background-position:-1px -284px;}
  7. .estrella {width:16px;height:16px;float:left;}
  8. //-->
  9. </style>
  10. <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
  11. 	<script language="javascript" type="text/javascript" src="js/myjquery.js"></script>
  12. </head>
  13.  
  14. <body>
  15. <?php
  16. echo '					<div class="icono_votaciones" id="rating1result0">
  17. 						<div class="estrella"></div>
  18. 						<div class="estrella"></div>
  19. 						<div class="estrella"></div>
  20. 						<div class="estrella"></div>
  21. 						<div class="estrella"></div>
  22. 					</div>
  23. 					<div class="result">0</div>';
  24. ?>
  25. </body>
  26. </html>

Pero cuando paso el codigo hacia mi implementacion en mi portal, ya no funciona :(...

Saludos !

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: RedZer en 28 Junio 2011, 00:57 am
no me lei todo solo tu ultimo post por k ando un poko ocupado mira veo que en el css tienes esto
<!--//-->
ami una ves en un hosting gratuito me dio problemas no se pero igual podrias quitar esas dos lineas . por k al menos ami me anulaba parte del codigo css en donde tenia puesto comentarios con esas lineas se los quite y funciono.

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 28 Junio 2011, 01:00 am
Cita de: Nakp en 27 Junio 2011, 23:20 pm
no se si de algo sirve pero tienes el jquery afuera del head, ademas usas prototype (que tambien utiliza el signo dolar para su funcion) por lo tanto debes usar jQuery.noconflict(); y en vez de referirte a jquery con $ lo haras con jQuery :)

esto funciona de hecho :xD
Código
  1. jQuery('.estrella')

el problema es el conflicto con prototype ;)


Pues tuviste toda la razon.... Sustitui los $ por jQuery.

La idea esta de la sustitucion no me gusta mucho, ya que estoy acostumbrado a usar el $, que puedo hacer para poder usar el $ en vez de jQuery ?

Saludos !

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: Diabliyo en 28 Junio 2011, 01:01 am
Cita de: RedZer en 28 Junio 2011, 00:57 am
no me lei todo solo tu ultimo post por k ando un poko ocupado mira veo que en el css tienes esto
<!--//-->
ami una ves en un hosting gratuito me dio problemas no se pero igual podrias quitar esas dos lineas . por k al menos ami me anulaba parte del codigo css en donde tenia puesto comentarios con esas lineas se los quite y funciono.

El problema no es el CSS.

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: alejandroivan en 28 Junio 2011, 01:49 am
Hola, si quieres usar el signo dólar ($) en vez de llamar directamente a jQuery, deberías reemplazar esto:

$(document).ready(function() { ... });

por esto otro:

jQuery(document).ready(function($) { ... });

Básicamente estás usando el signo dólar como un alias de la función jQuery dentro de esto. Lo otro que puedes hacer es invocar a la biblioteca jquery.js después de prototype.js en el head, así haces que la última definición de la función "$" sea un alias a jQuery.

Espero que te sirva, saludos.

Título: Re: [JQuery] $(".clase") is null .... porque ?
Publicado por: jairoortiz en 5 Julio 2011, 19:07 pm
Hola alejandroivan Muchas gracias me sirvio mucho tu comentario, tenia el mismo problema y lo pude solucionar.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines