Виджет пользовательского интерфейса jQuery не имеет метода uniqueId
Я пытаюсь заставить работать виджет jQuery UI в моем веб-приложении.
Я получил все файлы из оригинальной демо-версии и в основном сделал все, что мог, поэтому код и файлы были почти такими же, как в демо-версии.
И все время получаю эту ошибку: Uncaught TypeError: Object [object Object] не имеет метода "uniqueId"
Вот код JS:
$(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"
});
});
Здесь включены файлы:
<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" />
А вот простой 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>
3 ответа
Решение
Удалить включение:
<script src="/content/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
uniqueId - это новая функция, представленная в jQuery 1.9.x. Я предполагаю, что вы используете dev Widget (он же из основной ветки на GitHub) с jQuery 1.8.x.
Мне кажется, что вы не включили все необходимые исходные файлы (.js). Либо это, либо ваш URL неверен.
Может быть проще включить только один комплект пользовательского интерфейса с этой страницы: http://jqueryui.com/download/ Таким образом, вы знаете, что у вас есть все необходимые источники?