At what point does $(document).ready() fire for scripted dashboard panels?

Grafana Plugin Development
1

I’m trying to work on a custom HTML panel for a scripted dashboard, but having some issues with .ready() binding.

I’ve added the following panel to the scripted_async.js script:

{
  "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css\">\n    <style>\n      .input-field.col .dropdown-content [type=\"checkbox\"]+label {\n        top: -10px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"container\">\n      <div class='input-field col s3'>\n        <select class='multiselect' multiple>\n          <option value=\\\"\\\" disabled selected>Datacenter</option>\n          <option value=\\\"dub\\\">dub</option>\n          <option value=\\\"ams\\\">ams</option>\n          <option value=\\\"iad\\\">iad</option>\n          <option value=\\\"rs-iad\\\">rs-iad</option>\n          <option value=\\\"rs-lhr\\\">rs-lhr</option>\n          <option value=\\\"rs-ord\\\">rs-ord</option>\n          <option value=\\\"unknown\\\">unknown</option>\n        </select>\n      </div>\n    </div>\n    <!-- Latest compiled JavaScript -->\n      <script src=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js\"></script>\n      <script type=\"text/javascript\">\n        $(document).ready(function() {\n          $('.multiselect').material_select();\n        });\n      </script>\n  </body>\n</html>",
  "id": 1,
  "mode": "html",
  "span": 12,
  "title": "Panel Title",
  "type": "text",
  "links": []
}

An expanded version of the html bit is here:

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <style>
      .input-field.col .dropdown-content [type="checkbox"]+label {
        top: -10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class='input-field col s3'>
        <select class='multiselect' multiple>
          <option value=\"\" disabled selected>Datacenter</option>
          <option value=\"dub\">dub</option>
          <option value=\"ams\">ams</option>
          <option value=\"iad\">iad</option>
          <option value=\"rs-iad\">rs-iad</option>
          <option value=\"rs-lhr\">rs-lhr</option>
          <option value=\"rs-ord\">rs-ord</option>
          <option value=\"unknown\">unknown</option>
        </select>
      </div>
    </div>
    <!-- Latest compiled JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
          $('.multiselect').material_select();
        });
      </script>
  </body>
</html>

When I navigate to the dashboard, my dropdown doesn’t show up until I make some sort of action on the dashboard (manually edit the html through the edit menu or something other that I assume triggers the $(document).ready() again) – is there a better way to do this so that my panels fully generate when the page loads?

It seems similar issues happen without using $(document).ready() – if I try something like just $('.multiselect').material_select(); I get console errors about material_select() not being a recognized function; I don’t however get any errors about the jQuery selector $('.multiselect') so I assume this has something to do with my external styles / js not getting loaded when the page loads? I’m not really sure - I’ll keep playing around.

2

If you are going to be building a new panel - might be a better idea to create a plugin. It will give you much more control over the JavaScript and CSS.

http://docs.grafana.org/plugins/developing/development/