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>
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>
-
Why are you referencing the same files multiple times? Also what is included in your
jquery-ui-1.8.21.custom.min.jsfile? – Tim B James Commented Jul 16, 2012 at 12:33
3 Answers
Reset to default 3Remove inclusion of:
<script src="/content/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
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./download/ That way you know that you have all required source?