TypeError: $(...).dialog is not a function Error

Question

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) 

Answer 1

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.