eisenbraun / columns

A jQuery plugin that converts JSON data into searchable, sortable, HTML tables
http://eisenbraun.github.io/columns
MIT License
105 stars 47 forks source link

TypeError: $(...).columns is not a function #24

Closed malhayek2014 closed 5 years ago

malhayek2014 commented 8 years ago

I am trying to use it with jQuery 1.12.1 but it isn't working

Here is my code

<script>

$(function(e) {

    $('#CampaignMenu').change(function(e) {

        if (  $(this).val() != '0') {
            $('#DisplayReport').attr('disabled', false);
        } else {
            $('#DisplayReport').attr('disabled', true);
        }

    });

    $('#DisplayReport').click(function (e) {

        $.ajax({
            type: 'GET',
            url: '/get/data',
            data: {'campaign_id': $('#CampaignMenu').val() },
            dataType: 'json',
            success: function (json) {
                console.log(json);  //this reports the data
                $('#report').columns({
                    data: json,
                });
            }
        });

    });

});

</script>

<div class="wrapper">

<form class="form-inline">

    <div class="form-group">

        <select name="campaigns" id="CampaignMenu" class="form-control">

                <option value="0" selected>Please Select A Campaign</option>
                <option value="1">Name 1</option>
                <option value="2">Name 2</option>

        </select>

    </div>

        <button type="button" class="btn btn-primary" id="DisplayReport" disabled="disabled">Display Report</button>

</form>

</div>

<div id="report"></div>

This is the error that I get

TypeError: $(...).columns is not a function

.success() AccountQuotaDashboard:66 x.Callbacks/c() jquery-1.10.2.min.js:21 x.Callbacks/p.fireWith() jquery-1.10.2.min.js:21 k() jquery-1.10.2.min.js:23 .send/r() jquery-1.10.2.min.js:23

I am sure I am included the jquery.column.min.js file as I was able to open it using browser's code source

Here is my head tags

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/resources/css/generic.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/modernizr-2.6.2.js"></script>

<script src="~/resources/plugins/bundles/jQuery/jquery.min.js"></script>

<script src="~/resources/plugins/bundles/columns/jquery.columns.min.js"></script>
<link href="~/resources/plugins/bundles/columns/classic.css" rel="stylesheet" type="text/css" />
malhayek2014 commented 8 years ago

Never mind this was an issue with my code. I was loading jQuery twice!