javascriptc#asp.netjustgage

JustGage using asp net

I try run justgage example using asp net, but i get error: "No element with id: gauge found ". ID is correct, so what is wrong.

<script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script>
         var g = new JustGage({
             id: "gauge",
             value: 67,
              min: 0,
              max: 100,
              title: "Visitors"
              });
</script>

</head>
<body>
     <form id="form1" runat="server">
     <div id="gauge" class="200x160px"></div>
     </form>
</body>
</html>
Solution

  • We ran into the same issue. The problem is that the script is being executed before the page is loaded. There are two possible solutions to that:

    1.) Put the script below the <div>

    ...
<body>
    <form id="form1" runat="server">
    <div id="gauge" class="200x160px"></div>
    </form>
    <script>
        var g = new JustGage({
            id: "gauge",
            value: 67,
            min: 0,
            max: 100,
            title: "Visitors"
         });
    </script>
</body>

    2.) Tell the script to load after the window finished loading using window.onload

    <script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script>
     window.onload= function(){
         var g = new JustGage({
             id: "gauge",
             value: 67,
              min: 0,
              max: 100,
              title: "Visitors"
              });
     };
</script>

</head>
...

    Either should do the trick.