Hi,
Is there a way of hiding / not displaying panels that returns no results? maybe using css or application.js ??
I have a view containing several panels that in some cases, a few searches will not return any result, so i want to be able to hide those panels at that time.
Thank you.
Yeah.
Put this in application.js :
$(document).ajaxComplete( function() {
$('p.empty_results').closest('.dashboardCell').css('display', 'none');
});
You need to use ajaxComplete because the p.empty_results doesn't exist until the search completes, long after the $(document).ready
This works provided you have 1 search per dashboard cell, and works best if there's 1 cell per row.
If there's more then 1 cell per row, and you like nice looking pages, you'd need to alter the width of the other cells in the row to accomodate any missing cells (i.e 3 cells in a row, you hide one because there's no results, so you need to increase the width from 33% to 50% for the remainder)
Update
Just because you felt fit to throw the extra rep ... This deals with resizing the remaining cells
$(document).ajaxComplete( function() {
$('p.empty_results').closest('.layoutCell').each(function(){
var that = this;
var parent=$(this).parent();
var classList =$(parent).attr('class').split(/\s+/);
$.each( classList, function(index, item){
switch (item) {
case 'oneColRow':
$(parent).remove();
break;
case 'twoColRow':
$(that).remove();
$(parent).removeClass('twoColRow').addClass('oneColRow');
break;
case 'threeColRow':
$(that).remove();
$(parent).removeClass('threeColRow').addClass('twoColRow');
break;
}
});
});
});
PS - marking answers as accepted, is the usual way to assign rep : )
Yeah.
Put this in application.js :
$(document).ajaxComplete( function() {
$('p.empty_results').closest('.dashboardCell').css('display', 'none');
});
You need to use ajaxComplete because the p.empty_results doesn't exist until the search completes, long after the $(document).ready
This works provided you have 1 search per dashboard cell, and works best if there's 1 cell per row.
If there's more then 1 cell per row, and you like nice looking pages, you'd need to alter the width of the other cells in the row to accomodate any missing cells (i.e 3 cells in a row, you hide one because there's no results, so you need to increase the width from 33% to 50% for the remainder)
Update
Just because you felt fit to throw the extra rep ... This deals with resizing the remaining cells
$(document).ajaxComplete( function() {
$('p.empty_results').closest('.layoutCell').each(function(){
var that = this;
var parent=$(this).parent();
var classList =$(parent).attr('class').split(/\s+/);
$.each( classList, function(index, item){
switch (item) {
case 'oneColRow':
$(parent).remove();
break;
case 'twoColRow':
$(that).remove();
$(parent).removeClass('twoColRow').addClass('oneColRow');
break;
case 'threeColRow':
$(that).remove();
$(parent).removeClass('threeColRow').addClass('twoColRow');
break;
}
});
});
});
PS - marking answers as accepted, is the usual way to assign rep : )
works like a charm!!
Again, thank you so much for your great help.
Thanks!!, that did the trick.
As you mentioned, i do need to increase the width of my other cell.
my page has two cells (panels) per row and has several rows.
Is there a way of increasing the width of a cell in case its "companion" cell is not there any more?