jQuery no funciona en ASP.NET MVC

Este es uno de esos errores que me ha tocado la moral unas cuantas veces, y que he encontrado una solución buena, breve y rápida para que no me vuelva a ocurrir.

Para meternos en contexto, lo que estoy haciendo es añadiendo un Tooltip de Bootstrap en una web que estoy haciendo para mi nueva aventura empresarial (FinderCar), y me encuentro que aquello no tira ni pa’ tras.

Me muestra el tooltip normal de HTML, que es más feo que pegarle a una madre, y no puedo controlar ni el color, ni el tamaño, ni la posición…

¿Qué pasa?

Tirando de las herramientas de desarrollo me encuentro con que me salta un error en el script que arranca la función de jQuery

$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});

Uncaught ReferenceError: $ is not defined
at (index):24
(anonymous) @ (index):24

Demonios, no encuentra jQuery!! Será que no está dado de alta en el Bundle¿?

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

Pues si que está dado de alta…

Y entonces, buscando en Stack Overflow me encuentro con una solución (funciona) que me hace revisarme el fichero _layout.cshtml, que es la página maestra del sitio. Y darme cuenta que en la importación de los bundle – efectívamente – no está la de jQuery.

@ViewBag.Title - FinderCar
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

Mi primera opción fue añadir una nueva línea, tal que la siguiente, y todo funciona correctamente y a la primera.

@ViewBag.Title - FinderCar
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

Pero, cuidadín, esto no es correcto… y en este artículo explica bastante bien el porqué.

Si sigo mirando más abajo de la página, al final del todo justo antes del , veo que tengo más Render de bundles, y donde veo que tengo corréctamente invocado el de jQuery y el de Bootstrap.

¿Entonces qué está pasando?

Pues fácil. Para que me funcione el tooltip, lo debo de inicializar con:

$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});

Y este lo tengo que poner después de que se haya escrito el bundle que incluye jQuery… o peta.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});

Ahora sí, todo correcto y funcionando. Y el JavaScript cargándose al final de la página, como es lo más óptimo.

Este mismo problema me lo voy a encontrar al invocar una vista parcial con código jQuery en su interior. Pero en el artículo que he enlazado explica muy bien como solucionarlo y, seguramente, yo también lo escriba por aquí.

Ay, si lo hubiera sabido!!

Anuncios