CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Praful Bagai
Praful Bagai

Reputation: 17382

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

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)

Upvotes: 8

Views: 58169

Answers (3)

sofs1
sofs1

Reputation: 4176

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

Upvotes: 0

TagFolks
TagFolks

Reputation: 254

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.

Upvotes: 0

emerson.marini
emerson.marini

Reputation: 9348

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.

Upvotes: 10

Related Questions