JQuery plugin as protoUI

Webix JS
1

I am trying to create a protoUI of a JQuery plugin named gridster (http://gridster.net/demos/multiple-grids.html). In the snippet http://webix.com/snippet/d9845e1c the HTML code will create the gridster component (when libraries are referenced). I am trying to take the HTML code in the snippet and convert it to a protoUI, as can be seen in the JSCode of the Snippet. I have reviewed several guides and am not getting this part, anyone able to provide direction?

2

Hi Nar,

Check the following snippet, please http://webix.com/snippet/185ac678

3

Thanks! I see that you used _on_ready instead of putting the function in $ready.push, I assume that was the fix? Can you help me understand why that worked?

4

Update: This isn’t working when trying to integrate it into my app. I am using the MVC app framework as defined by the webix examples (http://webix.com/demos/material/admin-app/#!/app/forms) When loading the view that contains the views for gridster it doesn’t enable the plugin, instead I get a bulleted list using the css defined by gridster.

**I have verified all the required css and .js files are loading
http://webix.com/snippet/8b6857b1

5

Please try another variant: http://webix.com/snippet/54445617

The ._on_ready handler was just for convenience’s sake, but it did not perform the trick. Actually, on the standard HTML page your code worked well as you have seen it in the snippet: http://webix.com/snippet/185ac678

But for some reason gridster requires that the file should be included into the same part of the application where it is used. So you can modify the code of the custom view to:

 webix.require("http://gridster.net/dist/jquery.gridster.js", function(){
     	this.$view.innerHTML = html;
     	this._on_ready();
     }, this);

It also works within Webix Jet (that is how the MVC framework is called).

6

Still not working in the MVC application, code for the individual files posted in http://webix.com/snippet/9a1be5ca

7

You need to include gridster.js file into the view.js. Check the updated snippet: http://webix.com/snippet/50163efb

And - you’ll probably need to include the gridster lib file into into the index file alongside with jquery.