How can I use a jquery plugin in a dashboard?

csimonnet · ‎04-25-2018

Hello,
how can I use a jquery plugin in a dashboard? I would like to have a panel with the weather like here: https://codepen.io/fleeting/pen/xklfq
I downloaded the files and wrote the html code in the dashboard but nothing happened.

<dashboard script="jquery.simpleWeather.min.js, weather.js" stylesheet="weather.css">
<row>
</panel>
    <panel>
      <html>
        <div id="weather"/>
      </html>
    </panel>
  </row>
</dashboard>

javascript file:

require([
       "splunkjs/ready!",
       "splunkjs/mvc/simplexml/ready!",
    "jquery"
     ], function($) {
$(document).ready(function() {
  $.simpleWeather({
    location: 'Lyon',
    woeid: '',
    unit: 'C',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});
});

elliotproebstel · ‎04-25-2018

I believe you should be loading your required jquery libraries all into the weather.js script. I would recommend closely following some of the guides here:
http://dev.splunk.com/view/SP-CAAAE4A
http://dev.splunk.com/view/SP-CAAAESY

For example, I believe this:

 require([
        "splunkjs/ready!",
        "splunkjs/mvc/simplexml/ready!",
     "jquery"
      ], function($) {

needs to be this:

 require([
     "jquery",
        "splunkjs/ready!",
        "splunkjs/mvc/simplexml/ready!"
      ], function($) {

Based on this excerpt from the second guide:

Then, add variables for the returned objects as function arguments in the same order as they are declared in requirements.
Because the ready! loader script does not return a value, you can add this statement at the end of the requirements, 
and omit it from the function arguments.

How can I use a jquery plugin in a dashboard?

Can’t make it to .conf25? Join us online!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Are you a member of the Splunk Community?

How can I use a jquery plugin in a dashboard?

Can’t make it to .conf25? Join us online!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions