I have read threads on this topic on SO, but not able to get the required o/p. They said this problem arises because some js files are being included multiple times. But I tried removing the multiple files one-by-one, but still getting the TypeError: $(...).dialog is not a function Error. Where I'm including multiple js files? Can someone please point it out. Thanks.

<script src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript" src="{% static "js/bootstrap.js" %}" ></script>
<script type="text/javascript" src="{% static "dashboard/js/jquery-ui-personalized-1.6rc2.min.js" %}" ></script>
<script type="text/javascript" src="{% static "dashboard/js/inettuts.js" %}" ></script>    
<script type="text/javascript" src="{% static "dashboard/js/dashboard.js" %}" ></script>

The errors that I get are :-

Error: Syntax error, unrecognized expression: #intro,
    ...nction(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"...    
jquery.min.js (line 4)

TypeError: t.widget.extend is not a function
    ..."drag",e,s)===!1)return this._mouseUp({}),!1;this.position=s.position}return thi...
   jquery-ui.min.js (line 5) 

I have read threads on this topic on SO, but not able to get the required o/p. They said this problem arises because some js files are being included multiple times. But I tried removing the multiple files one-by-one, but still getting the TypeError: $(...).dialog is not a function Error. Where I'm including multiple js files? Can someone please point it out. Thanks.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript" src="{% static "js/bootstrap.js" %}" ></script>
<script type="text/javascript" src="{% static "dashboard/js/jquery-ui-personalized-1.6rc2.min.js" %}" ></script>
<script type="text/javascript" src="{% static "dashboard/js/inettuts.js" %}" ></script>    
<script type="text/javascript" src="{% static "dashboard/js/dashboard.js" %}" ></script>

The errors that I get are :-

Error: Syntax error, unrecognized expression: #intro,
    ...nction(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"...    
jquery.min.js (line 4)

TypeError: t.widget.extend is not a function
    ..."drag",e,s)===!1)return this._mouseUp({}),!1;this.position=s.position}return thi...
   jquery-ui.min.js (line 5) 

• javascript
• jquery
• jquery-ui

• 1 Why are you including so many jquery-libs? – u_mulder Commented Oct 18, 2013 at 6:25
• 1 Not a good practice..Multiple jquery libraries will lead to disaster.. – Joke_Sense10 Commented Oct 18, 2013 at 6:27
• I've removed the multiple js files, but still getting some new error. Please see the updated question. – Praful Bagai Commented Oct 18, 2013 at 6:39
• You still got a personalized one there. Not sure what that one means. – emerson.marini Commented Oct 18, 2013 at 6:40
• Note for MVC5 user: The error will occur when u try to insert more than 1 Jquery lib OR 1 version of jquery but more than 1 time, example first time from Bundle and another time from manual. – Chinh Phan Commented Aug 15, 2015 at 5:57

3 Answers 3

You have a couple of jQuery libraries being loaded on the same page (different versions of the same thing), which is wrong, unless you really need to keep old plugins working that depend on previous versions. In this specific case you would need to work out the conflicts.

That's all you need:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript" src="{% static "js/bootstrap.js" %}" ></script>
<!-- Not so sure what is this, but certainly it's another jQuery UI library being loaded on top of the other one -->
<!-- <script type="text/javascript" src="{% static "dashboard/js/jquery-ui-personalized-1.6rc2.min.js" %}" ></script>-->
<script type="text/javascript" src="{% static "dashboard/js/inettuts.js" %}" ></script>    
<script type="text/javascript" src="{% static "dashboard/js/dashboard.js" %}" ></script>

Look here for the CSS stylesheet (play with the theme): http://jqueryui.com/

The jQuery UI Dialog: http://jqueryui.com/dialog/

UPDATE

After our chat on the comments, I've found out that you're using a plugin called inettuts which is based on really old versions of jQuery and jQuery UI libraries (1.2.x). Also, it uses a customized version of the jQuery UI which doesn't includes the dialog widget, hence the first error message.

You can try to adapt the plugin to work with newer versions (following the comments on its own website) or work out the conflicts and use two libraries on the same page.

It's up to you now.

Look at in the generated source code, then find out all the references to jquery, then check out that there is only one reference to jquery and one to jquery UI.

Make sure you have the js libraries that you are referencing in jsp/html in corresponding folder. Mostly it would be WebContent folder or the path you specify in jsp. For me it was in /resources/scripts folder. Once I added the libraries there