发表新帖
发表新帖

$(…).tabs is not a function

后端 未结
关注
8 1662
隐瞒了意图╮
隐瞒了意图╮ 2021-01-07 22:42

I have this code on two pages on my site, but at one page the function doesn\'t work. Firebug shows me \" $(...).tabs is not a function \". I don\'t understand why, can anyo

相关标签:
8条回答
  • 攒了一身酷
    2021-01-07 22:57

    The error Uncaught TypeError: $(...).tabs is not a function may also be produced when in a Django project on the Admin area and using django-tabbed-admin under the following setup:

    • Django = 1.10.5
    • django-tabbed-admin=1.0.4
    • DEFAULT_JQUERY_UI_JS = 'tabbed_admin/js/jquery-ui-1.11.4.min.js'

    The problem is that the code in jquery-ui-1.11.4.min.js for this Django lib is as follows:

        /*! jQuery UI - v1.11.4 - 2015-07-27
    (...)*/
    jQuery = jQuery || django.jQuery.noConflict(false);

    and the code on django-tabbed-admin uses it this way (change_form.html):

        <script type="text/javascript">
        (function($) {
            $(window).scrollTop()
            $('#tabs').tabs({
                {% if add %}
                // when adding, don't select a tab by default, we'll do it ourselves
                // by finding the first available tab.
                selected: -1
                {% endif %}
            });
        (....)
        })(django.jQuery);
    </script>
    <!-- end admin_tabs stuff -->

    To sort this out this should be what would be passed in to the IIFE instead of the (django.jQuery) as above:

    <script type="text/javascript">
        (function($) {
            (....)
        })((typeof window.jQuery == 'undefined' && typeof window.django != 'undefined')
  ? django.jQuery
  : jQuery)
    </script>
    <!-- end admin_tabs stuff -->

    I've reported this issue in the project and created a PR with a fix for it. Waiting on it to be approved, so in the meantime you can sort it following my simple fix.

    I hope this helps someone out there.

    0 讨论(0)
  • 忘掉有多难
    2021-01-07 23:00

    The issue is that the jQuery UI js and css is not loading.

    Try changing the path in you <script> tags to either the directory above ../javascript or the website root /javascript.

    <script src="/javascript/head.min.js"></script>
<script src="/javascript/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/stylesheets/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />
    0 讨论(0)
  • 攒了一身酷
    2021-01-07 23:02

    I had the same problem, I realized that I had jquery and bootstrap css imports that enter in conflict each other. Take a look to the ones you have imported and reduce those imports to the minimum to see which is the conflict.

    Here there is an example of how to implement it, I took that example and worked, then I adapted to my application:

    for jquery 1.9 (click on view source to see the code) http://jqueryui.com/tabs/

    for jquery 1.8 (check the example at the end of the page) http://api.jqueryui.com/1.8/tabs/

    Hope it helps!

    0 讨论(0)
  • 暗喜
    2021-01-07 23:05

    Check your page you might have loaded multiple versions of jQuery

    0 讨论(0)
  • 时光说笑
    2021-01-07 23:09

    Your first demo loads:

    http://www.invat-online.net/javascript/jquery-ui-1.9.2.custom.min.js

    Your second demo attempts to load:

    http://www.invat-online.net/variante-explicate-limba-romana/javascript/jquery-ui-1.9.2.custom.min.js

    The last one results in a 404. You should correct the path of the later, perhaps instructing it to find jQuery UI in one directory above the current: ../jquery-ui-1.9.2.custom.min.js.

    0 讨论(0)
  • 遇见更好的自我
    2021-01-07 23:10

    Try this:

    @section scripts{
$(document).ready(function() {
    $("#tabss").tabs();
});
}

    Put @Scripts.Render("~/bundles/jqueryui") in the <body></body> of your layout.cshtml

    0 讨论(0)
 看不清?
提交回复
热议问题