[JQuery] $(".clase") is null .... porque ?

Diabliyo · 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 [Seleccionar]

$(".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 (javascript) [Seleccionar]

<html>
<head>
script language="javascript" type="text/javascript" src="miweb.com/js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="miweb.com/js/myjquery.js"></script>
	<script language="javascript" type="text/javascript" src="miweb.com/js/script.js"></script>


<style>
.icono_votaciones {background:transparent url(../imagenes/iconos.png) no-repeat;float:left;height:16px;width:80px;
cursor:pointer;background-position:-1px -284px;}
.estrella {width:16px;height:16px;float:left;}
</style>
</head>

<body>
<!-- mucho codigo.... //-->

     <div class="icono_votaciones">
          <div class="estrella"></div>
          <div class="estrella"></div>
          <div class="estrella"></div>
          <div class="estrella"></div>
          <div class="estrella"></div>
     </div>

</body>
</html>

En myjquery.js tengo:

Código [Seleccionar]

$(document).ready(function()	{
	$('.estrella').mouseover( function() {
		var star= $(this).index()+1;
		$(this).parent().css( "background-position", "0 -"+ (32*star) +"px" );
		});
});

Shell Root · 27 Junio 2011, 19:17 PM

Tienes errores de sintaxis. Mirad,

Código (html4strict) [Seleccionar]

script language="javascript" type="text/javascript" src="'. HTTP_SERVER. '/js/jquery.js"></script>

Ni idea que es HTTP_SERVER

Diabliyo · 27 Junio 2011, 19:19 PM

Cita de: Shell Root en 27 Junio 2011, 19:17 PM
Tienes errores de sintaxis. Mirad,
Código (html4strict) [Seleccionar] Expandir
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 [Seleccionar]

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.

Shell Root · 27 Junio 2011, 19:24 PM

Pero igual se supone que es PHP, debería de ser así no se

-jamás en mi vida he usado algo como eso-

Código (html4strict) [Seleccionar]

<script language="javascript" type="text/javascript" src="<?= HTTP_SERVER ?>/js/jquery.js"></script>

Diabliyo · 27 Junio 2011, 20:23 PM

En fin.. lo del HTTP_SERVER no es por hay el problema, sino el null...

Saludos !

Nakp · 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 (javascript) [Seleccionar]

$(".estrella")

y despues con

Código (javascript) [Seleccionar]

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

Diabliyo · 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 [Seleccionar]

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 [Seleccionar]

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

Nakp · 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

Código (javascript) [Seleccionar]

jQuery('.estrella')

el problema es el conflicto con prototype

Diabliyo · 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
Código (javascript) [Seleccionar] Expandir
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 (javascript) [Seleccionar]

<html>
<head>
<style type="text/css" rel="stylesheet">
<!--
.icono_votaciones {background:transparent url(template/catalogio/imagenes/iconos.png) no-repeat;float:left;height:16px;
width:81px;cursor:pointer;background-position:-1px -284px;}
.estrella {width:16px;height:16px;float:left;}
//-->
</style>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="js/myjquery.js"></script>
</head>

<body>
<?php
echo '					<div class="icono_votaciones" id="rating1result0">
						<div class="estrella"></div>
						<div class="estrella"></div>
						<div class="estrella"></div>
						<div class="estrella"></div>
						<div class="estrella"></div>
					</div>
					<div class="result">0</div>';
?>
</body>
</html>

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

...

Saludos !

RedZer · 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.