Error: TypeError: this.$container.on is not a function

[firefallvaruna]

I'm trying to integrate Gridster into the dashboard for my company's project written in ZK 6.5.2. ZK is a Java framework that allows us to use web development scripting and markup for the user interface. I have Gridster working out of the box, but I'm having an issue with the dragging functions.

It's working in my test HTML file, but it looks like something in ZK is conflicting. I know this is a long-shot, but I was hoping someone might have suggestions for things I could try.

Thank you in advance :-) I appreciate any thoughts or feedback anyone might have

Timestamp: 5/15/2013 2:34:46 PM Error: TypeError: this.$container.on is not a function Source File: http://localhost:8080/core/web/js/gridster.js Line: 434

Here's what I'm using to call Gridster:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="~./js/gridster.js"></script>
    <script>
        window.onload = function(){
            jq.noConflict();
            jq(function(){ 
                var gridster = jq(".gridster > ul").gridster({
                widget_margins: [5, 5], // Default Margins
                widget_base_dimensions: [100, 100] // Base dimensions; the data-sizex="1" are data-sizey="1" multipliers to increase the size.
                }).data('gridster');
                gridster.enable();
            });
        };
    </script>

And here's the markup: (Please excuse the syntax, ZK is a little strange. grid = table; row = tr; cell = td, etc.)

<div class="gridster">
    <h:ul>
        <h:li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="widgetBox">
            <grid sclass="widgetGrid">
                <rows>
                    <row>
                        <cell align="center" valign="middle" sclass="widgetContents">
                            <image src="~./test/img/zul/icons/tiles/gear-icon.png" />
                        </cell>
                    </row>
                    <row>
                        <cell align="center" valign="middle" height="25px">
                            <label value="Administration" />
                        </cell>
                    </row>
                </rows>
            </grid>
        </h:li>
        <h:li data-row="1" data-col="2" data-sizex="1" data-sizey="1" class="widgetBox">
            <grid sclass="widgetGrid">
                <rows>
                    <row>
                        <cell align="center" valign="middle" sclass="widgetContents">
                            <image src="~./test/img/zul/icons/tiles/batch-icon.png" />
                        </cell>
                    </row>
                    <row>
                        <cell align="center" valign="middle" height="25px">
                            <label value="Batch" />
                        </cell>
                    </row>
                </rows>
            </grid>
        </h:li>
        <h:li data-row="1" data-col="3" data-sizex="1" data-sizey="1" class="widgetBox indigo">
            <grid sclass="widgetGrid">
                <rows>
                    <row>
                        <cell align="center" valign="middle" sclass="widgetContents">
                            <image src="~./test/img/zul/icons/tiles/help-icon.png" />
                        </cell>
                    </row>
                    <row>
                        <cell align="center" valign="middle" height="25px">
                            <label value="Help" />
                        </cell>
                    </row>
                </rows>
            </grid>
        </h:li>
    </h:ul>
</div>

[dustmoo]

You shouldn't have to explicitly enable gridster when you initialize it. Have you tried removing the line gridster.enable();?

On Wed, May 15, 2013 at 12:54 PM, Sally Anderson notifications@github.comwrote:

I'm trying to integrate Gridster into the dashboard for my company's project written in ZK 6.5.2. ZK is a Java framework that allows us to use web development scripting and markup for the user interface. I have Gridster working out of the box, but I'm having an issue with the dragging functions.

It's working in my test HTML file, but it looks like something in ZK is conflicting. I know this is a long-shot, but I was hoping someone might have suggestions for things I could try. Thoughts?

Timestamp: 5/15/2013 2:34:46 PM Error: TypeError: this.$container.on is not a function Source File: http://localhost:8080/core/web/js/gridster.js Line: 434

Here's what I'm using to call Gridster:

<script>
    window.onload = function(){
        jq.noConflict();
        jq(function(){
            var gridster = jq(".gridster > ul").gridster({
            widget_margins: [5, 5], // Default Margins
            widget_base_dimensions: [100, 100] // Base dimensions; the data-sizex="1" are data-sizey="1" multipliers to increase the size.
            }).data('gridster');
            gridster.enable();
        });
    };
</script>

And here's the markup: (Please excuse the syntax, ZK is a little strange. grid = table; row = tr; cell = td, etc.)

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/174 .

[firefallvaruna]

Yes, I have. It was just something I was trying for that attempt.

[dustmoo]

Hmm.. it might be a problem between gridster and jQuery 2.0.

It looks like the .on method is not being bound to your widgets in the drag function. I haven't tested jQuery 2.0 yet, but that may be your issue.

Thanks,

Dustin

On Thu, May 16, 2013 at 8:51 AM, Sally Anderson notifications@github.comwrote:

Yes, I have. It was just something I was trying for that attempt.

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/174#issuecomment-18010039 .

[firefallvaruna]

That did it! I went with jQuery 1.9.1 plus the migration script and then had to make a few minor changes to make it fully functional.

Thank you so much!