TypeError Dialog Box: $ (...). Not a function of Error

Question

I read topics on this topic on SO, but could not get the required o / p. They said that this problem occurs because some js files are included several times. But I tried to delete several files one by one, but still get a TypeError error TypeError: $(...).dialog is not a function . Where do I include multiple js files? Can someone please indicate this. 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> 

I get the following errors: -

 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 loaded on the same page (different versions of the same thing), which is wrong if you really do not need to support the work of old plugins that depend on previous versions. In this particular case, you will need to resolve the conflicts.

What 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 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> 

Check out the CSS stylesheet (play with the theme): http://jqueryui.com/

JQuery UI Dialog: http://jqueryui.com/dialog/

UPDATE

After our chat in the comments, I found out that you are using a plugin called inettuts , which is based on really old versions of jQuery and jQuery UI libraries (1.2.x). In addition, it uses a custom version of the jQuery user interface, which does not include a dialog widget, hence the first error message.

You can try to adapt the plugin to work with newer versions (after comments on your own website) or to resolve conflicts and use two libraries on one page.

This is for you now.

Answer 2

Look in the generated source code, then find all the links to jquery, and then check that there is only one link to jquery and one to jQuery UI.

Answer 3

Make sure you have js libraries that you specify in jsp / html in the appropriate folder. Basically it will be the WebContent folder or the path you specified in jsp. For me it was in the / resources / scripts folder. As soon as I added the libraries there