Why aren't my HTML controls responding?

Question

I'm trying to get a sigma.js prototype working. Basically when you click the dragnode button it should execute the javascript to add all the sigma functionality.

Currently, this page loads, but none of the controls respond (click click cursor inside the text box, can't press the buttons).

Debbuging in the console reveals no errors.

Is it perhaps simple that the importing of the sigma.js modules disables controls?

<!-- START SIGMA IMPORTS -->
<script src="js/sigma/src/sigma.core.js"></script>
<script src="js/sigma/src/conrad.js"></script>
<script src="js/sigma/src/utils/sigma.utils.js"></script>
<script src="js/sigma/src/utils/sigma.polyfills.js"></script>
<script src="js/sigma/src/sigma.settings.js"></script>
<script src="js/sigma/src/classes/sigma.classes.dispatcher.js"></script>
<script src="js/sigma/src/classes/sigma.classes.configurable.js"></script>
<script src="js/sigma/src/classes/sigma.classes.graph.js"></script>
<script src="js/sigma/src/classes/sigma.classes.camera.js"></script>
<script src="js/sigma/src/classes/sigma.classes.quad.js"></script>
<script src="js/sigma/src/classes/sigma.classes.edgequad.js"></script>
<script src="js/sigma/src/captors/sigma.captors.mouse.js"></script>
<script src="js/sigma/src/captors/sigma.captors.touch.js"></script>
<script src="js/sigma/src/renderers/sigma.renderers.canvas.js"></script>
<script src="js/sigma/src/renderers/sigma.renderers.webgl.js"></script>
<script src="js/sigma/src/renderers/sigma.renderers.svg.js"></script>
<script src="js/sigma/src/renderers/sigma.renderers.def.js"></script>
<script src="js/sigma/src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="js/sigma/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="js/sigma/src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="js/sigma/src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="js/sigma/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="js/sigma/src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="js/sigma/src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="js/sigma/src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="js/sigma/src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="js/sigma/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="js/sigma/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script
    src="js/sigma/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script
    src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script
    src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script
    src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script
    src="js/sigma/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script
    src="js/sigma/src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="js/sigma/src/renderers/svg/sigma.svg.utils.js"></script>
<script src="js/sigma/src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="js/sigma/src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="js/sigma/src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="js/sigma/src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="js/sigma/src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="js/sigma/src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="js/sigma/src/middlewares/sigma.middlewares.copy.js"></script>
<script src="js/sigma/src/misc/sigma.misc.animation.js"></script>
<script src="js/sigma/src/misc/sigma.misc.bindEvents.js"></script>
<script src="js/sigma/src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="js/sigma/src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script
    src="js/sigma/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>



<script src="js/jquery.js"></script>
<script src="js/sigma-drag-node.js"></script>
<script>
    function onLoad() {
        alert("On load start");
        var frm = $('#myForm');
        frm.submit(function(ev) {

            myData = frm.serialize();

            $.ajax({
                type : frm.attr('method'),
                url : frm.attr('action'),
                data : myData,
                success : function(data) {
                    afterQueryIsRun(data);

                },
                error : function(data) {

                    setError("error");

                },
                timeout : function(data) {
                    setError("timeout");
                }
            });

            ev.preventDefault();
        });

        alert("On load end");
    }

    function afterQueryIsRun(data) {
        $('#pDisplay').text(data);
    }

    function setError(msg) {
        $('#pDisplay').text(msg);
    }

    function asubmit() {
        $('#pDisplay').text("hello world");
    }

    function bsubmit() {

    }
</script>


</head>

<body onload="onLoad()">
    <form id="myForm" name="myForm" method="post" action="servejson">
        <input id="textText" name="textText"> <input type="submit"
            value="Submit" />

    </form>

    <input type="button" value="drag node" onclick="dragNode()" />

    <p>
    <p id="pDisplay">aaaaa</p>


    <div id="container">
        <style>
#graph-container {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

#sidebar {
    bottom: 0;
    right: 0;
    width: 200px;
    height: 150px;
    position: absolute;
    background-color: #999;
    padding: 10px;
}
</style>
        <div id="graph-container"></div>
        <div id="sidebar">This area is not a drop target.</div>
    </div>
</body>
</html>

Answer 1

The graph-container div is overlapping your controls.

Change the positioning of your div in the style sheet to fix. \

<style>
#graph-container {
    top: 100px;
    bottom: 200px;
    left: 0;
    right: 100px;
    background-color: #d3d3d3;
    position: absolute;
}

#sidebar {
    bottom: 0;
    right: 0;
    width: 200px;
    height: 150px;
    position: absolute;
    background-color: #999;
    padding: 10px;
}
</style>

(Switched to light grey for clarity).