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

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=\"\">\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=\"\"></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">
    <link rel="stylesheet" href="">
      .input-field.col .dropdown-content [type="checkbox"]+label {
        top: -10px;
    <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>
    <!-- Latest compiled JavaScript -->
      <script src=""></script>
      <script type="text/javascript">
        $(document).ready(function() {

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.

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.