Friday, September 7, 2012

jQuery UI Tabs issue in MVC 4

I was trying to set up the jQuery UI Tabs sample in an ASP.Net MVC 4 application and got the following error in the console:

Uncaught TypeError: Object #<Object> has no method 'tabs'

It turned out that jQuery was not yet loaded at the time the .tabs() method was being called.  Scripts must be loaded in the correct order or the code they're referencing may not be available.  I had the bit in the document ready block but was still having a problem. The problem in the MVC case seemed to be the mix of using both MVC bundles and script tags. There is likely a proper way to do it if I were to read more about bundles and when they're loaded, etc. 

I decided to put all the script resources into bundles and loaded them that way and I left the bit of code calling $('#tabs').tabs() in a script tag. Still no luck. So I deleted that script tag, loaded my page, made sure all scripts were available and then in the chrome javascript console I entered $('#tabs').tabs() and BAM, the tabs appeared.  This proved that the script fragments were not being run in the order I had expected so I put the code in a separate js file and loaded it in a bundle as well and everything worked.

So if you're using Bundles, it appears your best bet is to use them across the board and not mix and match with inline script tags.

No comments:

Post a Comment