Trying to use jQuery Columnizr plugin: "Object doesn't support property > or method 'columnize'"

Question

Trying to use jQuery Columnizr plugin: "Object doesn't support property > or method 'columnize'"

I'm trying to use jQuery Columnizr plugin. Here is my code (simplified, full version is in screenshot)

<html lang="en" class="no-js">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title><%: Page.Title %></title>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="App_Themes/MetroTouchCountries/TabStrip.MetroTouchCountries.css" rel="stylesheet" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/jquery.columnizer.js" type="text/javascript"></script>

    <!-- Use this script to support CSS3 multi column feature in IE 7, 8, 9 -->
    <script src="Scripts/modernizr.custom.61385.js"></script> 

    <script type="text/javascript">
        $(document).ready(function () {

            $('.sutunlar').columnize({ columns: 3 });

        });
    </script>

</head>
<body>

This is the error I get:

Unhandled exception at line 29, column 13 in http:/xx/

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'columnize'

enter image description here

jquery

internet-explorer-9

multiple-columns

asked on Stack Overflow Oct 31, 2014 by

Ned • edited Apr 20, 2015 by

user369450

1 Answer

The reason is ScriptManager in <body> (Sorry that I didn't include <body> in my question). jquery and bootstrap definitions were conflicting with my script references in <head>. I commented out two lines in ScriptManager and the problem went away.

    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <%-- <asp:ScriptReference Name="jquery" /> --%>
            <%-- <asp:ScriptReference Name="bootstrap" /> --%>
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

answered on Stack Overflow Oct 31, 2014 by

Ned • edited Nov 2, 2014 by

Ned

User contributions licensed under CC BY-SA 3.0