Dashing dashboard linking widgets

Question

I am having a hard time linking widgets on my dashing dashboard. I read another post and got some help from dashing community, but, just am not able to link widgets

I have my text.coffee modified to have this section (sample is my other dashboard)

click: (event) ->
  location.href = "sample"

When I click on my text widget nothing happens. I also tried doing this, but nothing.

click: (event) ->
  location.href = "www.stackoverflow.com"

However, when I just add below line to onData section of my meter.coffee it redirects to stackoverflow.com.

location.href = "www.stackoverflow.com"

What am I doing wrong? Do you have an example that I can try out?

EDIT1:

I also tried the below suggestion without any luck.

click: (e) ->
  e.preventDefault()
  location.href = "http://www.stackoverflow.com"

Answer 1

Got help from the dashing community. Here is how it works. Just modify your dashboard erb to link the page you want to see

<li data-row="2" data-col="2" data-sizex="2" data-sizey="1" onclick="location.href='http://www.stackoverflow.com';">
  <div data-id="test_text_widget" data-view="Text" data-title="Test"</div>
</li>

Answer 2

Option 1

The following will work when wanting to open the link in a new tab on click, and only want it on certain tiles on your dashboard:

onClick="javascript: window.open('http://url', '_blank');"

So for example in your dashboard.erb file you would have the following:

Note: that in this example I have Switcher setup (Need to have dashing-contrib installed), and being used to switch between 2 tiles that are using different widgets (Hotness, and the default List). This will work on any tile created. This is just where i happen to be using it.

<% content_for :title do %>Dashboard Name<% end %>
  <div class="gridster">
     <ul>

       <li data-switcher-interval="5000" data-row="1" data-col="1" data-sizex="1" data-sizey="1" onClick="javascript: window.open('http://www.stackoverflow.com', '_blank');">
         <div data-id="data-id-name from .rb job" data-view="Hotness" data-title="Title of Widget" data-moreinfo="more information text" data-cool="1" data-warm="30"></div>
         <div data-id="data-id-name from .rb job" data-view="List" data-unordered="true" data-title="Title of Widget" data-moreinfo="more information text"></div>
         <i class="fa fa-warning icon-background-small"></i>                 
       </li>

     </ul>
  </div>

Option 2

Another way to do this is to add a function at the top of your dashboard.erb.

Note: This example will make all tiles clickable and open a blank tab if no url link is provided for the tile so its not an ideal solution but does work*

$(function bringToTop() {
  $('li').live('click', function(e){
    var widget = $(this).find('.widget');
    if(widget.data('url')){
    var url = widget.data('link');
    var win = window.open(url, '_blank');
    win.focus();
    }
  });
});

So your entire dashboard.erb file should look something like this:

<script type='text/javascript'>
  $(function bringToTop() {
    $('li').live('click', function(e){
       var widget = $(this).find('.widget');
       if(widget.data('url')){
       var url = widget.data('link');
       var win = window.open(url, '_blank');
       win.focus();
       }
      });
     });
</script>
<% content_for :title do %>Dashboard Name<% end %>
  <div class="gridster">
   <ul>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
       <div data-id="mydata" data-view="Hotness" data-title="Data Title" data-cool="20" data-warm="1000" data-link='http:\\www.stackoverflow.com'></div>
    </li>
 </ul>

Note:

Something That I have not tested yet but I have found while searching online is that using either of the above options I provided might not work on iOS devices. The issue, which might be fixed already, and i'm not knocking Gridster by any means, is with Gridster. There is an Open issue for click events on iOS devices at over at Gridster.

Thanks to Phylor over at GitHub for providing a temporary fix/solution, which was confirmed working as of 2/21/2016 (not by me).

Just add the following to the top of your dashboard.erb file:

<script type='text/javascript'>
   function openUrl(obj) {
   var widget = $(obj).find('.widget');
   var url = widget.data('url');
   window.open(url, '_blank');
   }

  $(function() {
   $('li').live('click', function(e){
      openUrl(this);
     });
   $('li').live('touchend', function(e){
      openUrl(this);
     });
   });
</script>

This is my first post so I apologize for any formatting errors, but figured it was time to start giving back to the community that has helped me out so much. Hope this helps!