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.