asp.net mvc4 change jquery version

Question

I'm facing some cross browser problems with jquery, after some research i found my app is working with jquery 1.8.11 or at least i think so.

My project is an MVC4 asp.net app with c#.

Actually i'm trying to disable - enable some buttons, it works fine on IE but don't in chrome / firefox / safari.

<ul class="ui-grid-d">
<li class="ui-block-a"><a id="MostrarDetallePedido" class="ui-btn ui-btn-up-a" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="a" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Detalle</span></span></a></li>
<li class="ui-block-b"><a id="ItemCondiciones" class="ui-state-disabled ui-btn ui-btn-up-b" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="b" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Condiciones</span></span></a></li>
<li class="ui-block-c"><a id="ItemEliminar" class="ui-state-disabled ui-btn ui-btn-up-c" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="c" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Eliminar</span></span></a></li>
<li class="ui-block-d"><a id="ItemAdiciones" class="ui-state-disabled ui-btn ui-btn-up-d" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="d" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Adiciones</span></span></a></li>
<li class="ui-block-e"><a id="ItemComponentes" class="ui-state-disabled ui-btn ui-btn-up-e" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="e" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Componentes</span></span></a></li> 
</ul>​

I Tryed

$('#ItemEliminar').addClass('ui-disabled');​

This way to

$('#ItemEliminar').button({ disabled: false }).button('enable').button('refresh');

I made some tests with our own scripts on http://jsfiddle.net/9386M/1/ and it work fine with jquery 1.8.2.

Well, all I need to know is how to change my jquery library, I'm was looking at _Layout.cshtml but i can't find any references to my jquery lib.

At scripts folder i found jquery-ui-1.8.11.js jquery-ui-1.8.11.min.js jquery-1.6.4.js jquery-1.6.4.min.js

Solution 1

Two ways to do this:

1. Right click on your solution, select "Manage NuGet packages...", go to "Updates" in the opened dialog and update the jQuery.

2. Go to /App_Start/BundleConfig.cs and update jQuery reference from there. You will also need to put an appropriate version of jQuery library to the /Scripts/ folder.

And you can always search across all solution for "jQuery" string (Press Ctrl+Shift+F and select "Entire Solution" in the "Look in" combobox)

Solution 2

MVC4 uses bundling.

Go to the App_Start => Open BunlingConfig.cs

You will see stuff like below:

   // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

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

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

       // and bunch of other bundles

    }

The first line here creates a bundle for jQuery.

You can change it to below :

     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.8.2.min.js"));

make sure you have the library downloaded if you want to use the cdn do as below:

        bundles.UseCdn = true;  

        const string jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js";

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

You can also create bundles for your files. You can read more on that here http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4

In the layout file, they are consumed like below:

      @Scripts.Render("~/bundles/jquery")

Hope this helps.

Comments

[Yogiraj]

@JuanPabloGomez Np. Let me know if there is a problem.

[Sgraffite]

I'm using MVC4 and I only needed to accomplish Step 1 for this to work.

[eaglei22]

^^ that's because the bundle in BundleConfig.cs uses -{version} to map to a regex pattern to always get the latest version.