最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery UI Widget has no method 'uniqueId' - Stack Overflow

programmeradmin0浏览0评论

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>
Share Improve this question edited Apr 1, 2013 at 21:32 skmasq asked Jul 16, 2012 at 12:25 skmasqskmasq 4,5217 gold badges44 silver badges77 bronze badges 1
  • Why are you referencing the same files multiple times? Also what is included in your jquery-ui-1.8.21.custom.min.js file? – Tim B James Commented Jul 16, 2012 at 12:33
Add a ment  | 

3 Answers 3

Reset to default 3

Remove 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?

发布评论

评论列表(0)

  1. 暂无评论