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!