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

javascript - Uncaught TypeError: $(...).tabs is not a function - Stack Overflow

programmeradmin0浏览0评论

I think there is a strange problem with jquery I got this exception when page load here is my markup :

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../Layouts/en-us/css/custom.css" rel="stylesheet" />

<link href="../Layouts/en-us/css/jquery-ui.css" rel="stylesheet" />



<script src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="../ckeditor/ckeditor.js"></script>
<script src="../ckeditor/adapters/jquery.js"></script>
<script src="/Layouts/en-us/js/jquery-ui.min.js"></script>
</asp:Content>

here is the function that causes error

$(function () {
    $("#tabs").tabs();

    if ($("#ListBoxPages").val() == null) {
        $("#tabs").css("display", "none");
    }

    $("#ListBoxPages").change(function () {
        $("#tabs").css("display", "block");
    });

});

All relative paths to Layouts and jquery were copied from another markup which works pretty fine with no error

I think there is a strange problem with jquery I got this exception when page load here is my markup :

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../Layouts/en-us/css/custom.css" rel="stylesheet" />

<link href="../Layouts/en-us/css/jquery-ui.css" rel="stylesheet" />



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="../ckeditor/ckeditor.js"></script>
<script src="../ckeditor/adapters/jquery.js"></script>
<script src="/Layouts/en-us/js/jquery-ui.min.js"></script>
</asp:Content>

here is the function that causes error

$(function () {
    $("#tabs").tabs();

    if ($("#ListBoxPages").val() == null) {
        $("#tabs").css("display", "none");
    }

    $("#ListBoxPages").change(function () {
        $("#tabs").css("display", "block");
    });

});

All relative paths to Layouts and jquery were copied from another markup which works pretty fine with no error

Share Improve this question edited Mar 6, 2018 at 9:13 ADreNaLiNe-DJ 4,9193 gold badges27 silver badges35 bronze badges asked Jul 2, 2015 at 8:46 Ibrahim AmerIbrahim Amer 1,2184 gold badges20 silver badges48 bronze badges 4
  • 2 Make sure jquery-ui.min.js is loaded – Tushar Commented Jul 2, 2015 at 8:47
  • Your script order can be the source of the problem : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./Layouts/en-us/js/jquery-ui.min.js"></script> <script src="../ckeditor/adapters/jquery.js"></script> <script src="../ckeditor/ckeditor.js"></script> – Sacreyoule Commented Jul 2, 2015 at 8:50
  • @Ibrahim Amer Check my answer and try that solution.. – Shirish Commented Jul 2, 2015 at 10:11
  • so what solution did you opt for? cause I'm getting the same error – s_user Commented Jun 30, 2016 at 9:51
Add a comment  | 

2 Answers 2

Reset to default 6

I can see that you are loading jquery twice so try to remove that

<script src="/Layouts/en-us/js/jquery-ui.min.js" />

and keep only -

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

then use below code in place of your function (First check by changes in this function then try with removing that jquery-ui.min.js)

$( document ).ready(function() {
        $("#tabs").tabs();
        if ($("#ListBoxPages").val() == null) {
            $("#tabs").css("display", "none");
        }
        $("#ListBoxPages").change(function () {
            $("#tabs").css("display", "block");
        });
});

$("#tabs").tabs(); requires Jquery.UI just include

<script src="/Layouts/en-us/js/jquery-ui.min.js" />

or use CDN

<scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
发布评论

评论列表(0)

  1. 暂无评论