Uncaught Type Error: Object [object Object] has no method ''

Many developers have been caught up by this error message judging by the number of posts on StackOveflow! I had to spend a few hours with this exception until finding the solution. Now I know that writing code while tired is never a good thing!

The problem started when I tried to integrate the FileDrop jQuery plugin to my MVC 4 project. After adding all the files and JavaScript code, I was greeted by this perplexing error message:

Object [object Object] has no method..

This error, in most cases, means that jQuery is not working and no such function can be found or is supported.

At first I thought that it was the bundling of the jQuery files that wasn’t working as expected so I removed the bundles from the page and the _layout.cshtml (master layout page in MVC) and I hardcoded the references to the necessary .js and .css file on the page in question but the problem persisted.

I double and triple checked my Javascript code for typos and un-terminated statements but couldn’t find anything wrong. I moved the code from the js files into the page itself and still no luck.

After a quick break I returned to my desk with renewed energy to fight this problem! I loaded the page and looked at the code behind in Dev Tools. Lo and behold the error at the bottom of the page:

... previous page code omitted
<section>
	<div>
		<footer>
			<div class="content-wrapper">
				<div class="float-left">
					<p>&amp;copy; 2013 - My ASP.NET MVC Application<p>
				<div>
			<div>
		<footer>
		<script src="/Scripts/jquery-1.7.1.js"><script>
	</div>
<body>

In MVC 4, the _layout.cshtml page puts the jQuery reference in the footer! Since I didn't notice, I ended up adding it twice to my page and when this happens the browser just refuses to work with jQuery. So if you see this error message again and your issue doesn’t fall into the other categories mentioned above, check for duplicate references to your js files!

A quick Javascript troubleshooting guide:

Ensure you include all your javascript files in the page that is failing
Ensure that the order of your javascript files is correct. jQuery --> jQuery UI --> anything else
Ensure that there is no typos or syntax errors in your scripts
Ensure that the “<script>” tag is closed correctly using </script> and not the /> self-closing format
Ensure that only one copy of the required jQuery/javascript files is pulled on each page.

Happy coding…