jQuery UI Widget has no method 'uniqueId'
https://stackoverflow.com/questions/11504289
-
21-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I am trying to make jQuery UI widget work in my web application
I got all the files from original demo, and basically did everything I could so the code and files were pretty much the same as in demo version.
And all the time get this error: Uncaught TypeError: Object [object Object] has no method 'uniqueId'
Here is js code:
$(function () {
var date = new Date();
date.setDate(date.getDate() + 1);
$(".calendar", ".add-item").datepicker({
showAnim: "drop",
dateFormat: "yy-dd-mm",
minDate: date
});
$("#bar1").menubar({
position: {
within: $("#demo-frame").add(window).first()
}
});
$(".menubar-icons").menubar({
autoExpand: true,
menuIcon: true,
buttons: true,
position: {
within: $("#demo-frame").add(window).first()
}
});
$("#bar3").menubar({
position: {
within: $("#demo-frame").add(window).first()
},
items: ".menubarItem",
menuElement: ".menuElement"
});
});
Here are included files:
<script src="@Url.Content("~/content/js/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery-ui-1.8.21.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.position.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.button.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.menu.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.menubar.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/main.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/content/js/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/content/css/main-admin.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/css/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
And here is plain html:
<div class="header">
<div class="demo">
<ul id="bar1" class="menubar">
<li><a href="#File">File</a>
<ul>
<li><a href="#Open...">Open...</a></li>
<li class="ui-state-disabled">Open recent...</li>
<li><a href="#Save">Save</a></li>
<li><a href="#Save%20as...">Save as...</a></li>
<li><a href="#Close">Close</a></li>
<li><a href="#Quit">Quit</a></li>
</ul>
</li>
<li><a href="#Edit">Edit</a>
<ul>
<li><a href="#Copy">Copy</a></li>
<li><a href="#Cut">Cut</a></li>
<li class="ui-state-disabled">Paste</li>
</ul>
</li>
<li><a href="#View">View</a>
<ul>
<li><a href="#Fullscreen">Fullscreen</a></li>
<li><a href="#Fit%20into%20view">Fit into view</a></li>
<li><a href="#Encoding">Encoding</a>
<ul>
<li><a href="#Auto-detect">Auto-detect</a></li>
<li><a href="#UTF-8">UTF-8</a></li>
<li><a href="#UTF-16">UTF-16</a>
<ul>
<li><a href="#Option%201">Option 1</a></li>
<li><a href="#Option%202">Option 2</a></li>
<li><a href="#Option%203">Option 3</a></li>
<li><a href="#Option%204">Option 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Customize...">Customize...</a></li>
</ul>
</li>
</ul>
<ul id="bar2" class="menubar-icons">
<li><a href="#File">File</a>
<ul>
<li><a href="#Open...">Open...</a></li>
<li class="ui-state-disabled">Open recent...</li>
<li><a href="#Save">Save</a></li>
<li><a href="#Save%20as...">Save as...</a></li>
<li><a href="#Close">Close</a></li>
<li><a href="#Quit">Quit</a></li>
</ul>
</li>
<li><a href="#Edit">Edit</a>
<ul>
<li><a href="#Copy">Copy</a></li>
<li><a href="#Cut">Cut</a></li>
<li class="ui-state-disabled">Paste</li>
</ul>
</li>
<li><a href="#View">View</a>
<ul>
<li><a href="#Fullscreen">Fullscreen</a></li>
<li><a href="#Fit%20into%20view">Fit into view</a></li>
<li><a href="#Encoding">Encoding</a>
<ul>
<li><a href="#Auto-detect">Auto-detect</a></li>
<li><a href="#UTF-8">UTF-8</a></li>
<li><a href="#UTF-16">UTF-16</a>
<ul>
<li><a href="#Option%201">Option 1</a></li>
<li><a href="#Option%202">Option 2</a></li>
<li><a href="#Option%203">Option 3</a></li>
<li><a href="#Option%204">Option 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Customize...">Customize...</a></li>
</ul>
</li>
</ul>
<div id="bar3" class="menubar">
<div class="menubarItem">
<a href="#File">File</a>
<div class="menuElement">
<div>
<a href="#Open...">Open...</a></div>
<div class="ui-state-disabled">
Open recent...</div>
<div>
<a href="#Save">Save</a></div>
<div>
<a href="#Save%20as...">Save as...</a></div>
<div>
<a href="#Close">Close</a></div>
<div>
<a href="#Quit">Quit</a></div>
</div>
</div>
<div class="menubarItem">
<a href="#Edit">Edit</a>
<div class="menuElement">
<div>
<a href="#Copy">Copy</a></div>
<div>
<a href="#Cut">Cut</a></div>
<div class="ui-state-disabled">
Paste</div>
</div>
</div>
<div class="menubarItem">
<a href="#View">View</a>
<div class="menuElement">
<div>
<a href="#Fullscreen">Fullscreen</a></div>
<div>
<a href="#Fit%20into%20view">Fit into view</a></div>
<div>
<a href="#Encoding">Encoding</a>
<div class="menuElement">
<div class="ui-state-disabled">
Auto-detect</div>
<div>
<a href="#UTF-8">UTF-8</a></div>
<div>
<a href="#UTF-16">UTF-16</a>
<div class="menuElement">
<div>
<a href="#Option%201">Option 1</a></div>
<div>
<a href="#Option%202">Option 2</a></div>
<div class="ui-state-disabled">
Option 3</div>
<div>
<a href="#Option%204">Option 4</a></div>
</div>
</div>
</div>
</div>
<div>
<a href="#Customize...">Customize...</a></div>
</div>
</div>
</div>
</div>
</div>
Solution
Remove inclusion of:
<script src="/content/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
OTHER TIPS
uniqueId is a new function introduced with jQuery 1.9.x. I assume youre using a dev Widget (aka out of the master branch at GitHub) with jQuery 1.8.x.
It seems to me that you have not included all required source (.js) files. Either that or your URL is wrong.
It may be easier to include just one UI bundle from this page: http://jqueryui.com/download/ That way you know that you have all required source?
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
