Question

What I’m trying to do:
Installing the jquery.gantt plugin and running the basic example given in docs.

How it fails:
The javascript doesn’t do anything, the target DOM is left unchanged.

What I did:
I checked that the css file style.css, and the js jquery.fn.gantt.js were installed.
I checked the images were installed.
I looked at the source of the docs.

Some code: I took it from the docs as an example, yet never managed to make it work.

    <script type="text/javascript">
<!--
        $(".ganttdiv").gantt({
            source:  [{
                name: "Example",
                desc: "Lorem ipsum dolor sit amet.",
                values: [ {
                    to: "/Date(1328832000000)/",
                    from: "/Date(1333411200000)/",
                    desc: "Something",
                    label: "Example Value",
                    customClass: "ganttRed",
                    dataObj: foo.bar[i]
                }]
            }],
            scale: "weeks",
            minScale: "weeks",
            maxScale: "months",
            onItemClick: function(data) {
                alert("Item clicked - show some details");
            },
            onAddClick: function(dt, rowId) {
                alert("Empty space clicked - add an item!");
            }
        });


//-->
</script>
<div class="ganttdiv"></div>

My question:

I would like to understand what I did wrong, or just to see the code of a working example of Jquery.gantt. Any advice on how to debug this problem would be gladly appreciated too.

Answer 1

Ok I managed to make it work.

The default css forces you to put class=’gantt’ on the target DOM, and not ‘ganttdiv’ as I did.

Here is a working exemple, I hope it be will useful to someone.

<script type="text/javascript">
<!--
    $(  function(){$(".gantt").gantt({
            source:  [{
                name: "Example",
                desc: "Lorem ipsum dolor sit amet.",
                values: [ {
                    to: "/Date(1376954000000)/",
                    from: "/Date(1375854000000)/",
                    desc: "Something",
                    label: "Example Value",
                    customClass: "ganttRed",
                }]
            }],scale: "weeks",
            minScale: "weeks",
            maxScale: "months",
            navigate:"scroll",

            onItemClick: function(data) {
                alert("Item clicked - show some details");
            },
            onAddClick: function(dt, rowId) {
                alert("Empty space clicked - add an item!");
            }
        });
});

//-->
</script>
<div class="gantt"></div>