jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by cziz 12 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Not working demos for knockout.js integration Posts

March 19, 2013 at 3:41 pm Not working demos for knockout.js integration #17481

cziz

Member

Hi guys,

I just tried to check and play with your widgets and knockout.js.

my source code:

…

jqxCheckBox

$(document).ready(function () {
var viewModel = function (value) {
this.count = 0;
this.checked = ko.observable(value);
this.disabled = ko.observable(false);
// display checked state.
this.getState = function () {
alert(“Checked: ” + this.checked());
}
// check checkbox.
this.check = function () {
this.checked(true);
}
// toggle disabled state.
this.toggle = function () {
this.count++;
this.disabled(this.count % 2);
}
};
ko.applyBindings(new viewModel(true));
});

It is coppied directly from your site. Buttons works fine but checkbox is not rendering at all. I can see only jqxCheckBox text.

I’m guessing that it might be related to newer jquery and knockout than you used in examples. I have the newest version of jqwidgets.

There is no error in js. Any ideas?

March 19, 2013 at 4:11 pm Not working demos for knockout.js integration #17484

Peter Stoev

Keymaster

Hi cziz,

Please, check whether you have included jqxcheckbox.js in your project. The jQuery version required for jQWidgets is jQuery 1.7+.

Here is the working CheckBox with Knockout integration demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/checkbox.htm?classic

Best Regards,
Peter SToev

jQWidgets Team
http://www.jqwidgets.com

March 20, 2013 at 8:02 am Not working demos for knockout.js integration #17528

cziz

Member

Hi Peter,

Yup, i included all needed stuff. I checked even if paths are ok, and they are.

March 20, 2013 at 8:03 am Not working demos for knockout.js integration #17529

cziz

Member

<link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Scripts/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<link href="/Scripts/jqwidgets/styles/jqx.classic.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.9.1.js"></script>
    <script src="/Scripts/jqwidgets/jqxcore.js"></script>
<script src="/Scripts/jqwidgets/jqxdata.js"></script>
<script src="/Scripts/jqwidgets/jqxbuttons.js"></script>
<script src="/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script src="/Scripts/jqwidgets/jqxmenu.js"></script>
<script src="/Scripts/jqwidgets/jqxlistbox.js"></script>
<script src="/Scripts/jqwidgets/jqxgrid.js"></script>
<script src="/Scripts/jqwidgets/jqxgrid.selection.js"></script>
<script src="/Scripts/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="/Scripts/jqwidgets/jqxgrid.edit.js"></script>
<script src="/Scripts/jqwidgets/jqxknockout.js"></script>
<script src="/Scripts/jqwidgets/jqxcheckbox.js"></script>
<script src="/Scripts/json2.js"></script>
<script src="/Scripts/knockout-2.2.1.debug.js"></script>

March 20, 2013 at 8:24 am Not working demos for knockout.js integration #17531

Peter Stoev

Keymaster

Hi cziz,

The Knockout plug-in should be included before jqxknockout.js, because jqxknockout.js uses that plugin. In addition, make sure that all paths are correct and you run the code in the jQuery’s document.ready function.

Here’s a working code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Integration of jqxCheckBox with Knockout</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {   
            var viewModel = function (value) {
                this.count = 0;
                this.checked = ko.observable(value);
                this.disabled = ko.observable(false);
                // display checked state.
                this.getState = function () {
                    alert("Checked: " + this.checked());
                }
                // check checkbox.
                this.check = function () {
                    this.checked(true);
                }
                // toggle disabled state.
                this.toggle = function () {
                    this.count++;
                    this.disabled(this.count % 2);
                }
            };
            ko.applyBindings(new viewModel(true));
        });
    </script>
</head>
<body class='default'>
        <div data-bind="jqxCheckBox: {checked: checked, disabled: disabled, width: '120px', theme: getDemoTheme()}" style='margin-bottom: 10px;'>jqxCheckBox</div>
        <input data-bind="click: getState, jqxButton: {theme: getDemoTheme()}" type="button" value="Get Value" />
        <input data-bind="click: check, jqxButton: {theme: getDemoTheme()}" type="button" value="Set Value" />
        <input data-bind="click: toggle, jqxButton: {theme: getDemoTheme()}" type="button" value="Toggle Disabled" />
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 20, 2013 at 10:41 am Not working demos for knockout.js integration #17535

cziz

Member

ashamed…
thanks for help

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.