Why do my JS libraries not get loaded in HTML panels when the page loads, but do if I edit the panel manually?

Grafana
1

I asked a similar question over in Development, but it looks like this might be the more appropriate place since I’m really actually requesting some support :slight_smile:

I have the following HTML panel code:

<html lang="en">
  <head>
    <!-- Latest compiled and minified CSS -->
    <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;
      }
      .caret {
        border-color: transparent !important;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class='input-field col s6'>
          <select class='multiselect' multiple>
            <option value="" disabled selected>Datacenter</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>
    </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">
          $('.multiselect').material_select();
      </script>
  </body>
</html>

When I navigate to this scripted dashboard, I get exceptions at first:

TypeError: $(…).material_select is not a function

But if I click Edit and go to the HTML content, modify a single character, everything magically renders just fine. How can I get around this? I’m not super great at web development in general, so if I’m doing something completely wrong in my HTML content, apologies.

I’ve tried wrapping the material_select() in a $(document).ready(), but this produces the same result.

For ease of reproducing, here’s my entire paneled JSON:

  "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <!-- Latest compiled and minified CSS -->\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      .caret {\n        border-color: transparent !important;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"container\">\n      <div class=\"row\">\n        <div class='input-field col s6'>\n          <select class='multiselect' multiple>\n            <option value=\"\" disabled selected>Datacenter</option>\n            <option value=\"bio-dub\">bio-dub</option>\n            <option value=\"ea-ams\">ea-ams</option>\n            <option value=\"ea-iad\">ea-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    </div>\n  \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        $('.multiselect').material_select();\n      </script>\n  </body>\n</html>",
  "id": 1,
  "mode": "html",
  "span": 12,
  "title": "Panel Title",
  "type": "text",
  "links": []
}

Should note that I’ve tested regular scripted and async - both produce the same issue.

2

First, there is some invalid html here. Also, the css and javascript seem to break the Grafana jQuery modal. So this didn’t work for me at all when I tested it on Grafana 5.0 beta.

3

So, what will be the solution to this problem daniellee?

4

The problem of including lots of 3rd party javascript and css into Grafana? Not sure how we could ever solve this. The css in the example above overwrites Grafana’s css and the included JavaScript caused errors.

5

Thanks for quick response :slight_smile:

6

Are you also trying to use materialize or other css/js framewwork in the text panel?

7

I am trying to load Google Charts Script into my text panel, but i’m facing issues there. Its not showing up any chart … Sometimes ,it shows up … Not able to understand that

8

If you put the same code in a simple html page outside of Grafana does it work?

9

Yes. By the way, I solved that. I just downloaded the script that was on the link and gave the path to that script in my Grafana Text panel and it worked :blush:

10

but, it would be better if we get the script loading done via the link only.

11

You can probably get that to work. That was not problem with the original example - the link to the CDN worked. The problem was it included its own jQuery that conflicted with the Grafana jQuery. You can examine errors in the Chrome console - could be a cross-origin problem for example.

12

With me, the problem was the link to the CDN wasn’t working fine. It was unable to fetch the script correctly. i.e, it was taking time more than expected. But if i tried that same code in a simple html page outside of garafana, it was working fine