Use JavaScript to hide/show views if text found on page

API & Customization Show & Tell
1

Thought I would share this with the community since it took me a bit of time to learn this couldn't be done through the Knack interface. My use for this was a staff member would choose options when building a new agreement. Based upon the options previously selected options I needed to hide or show a editable table for the end user to update. 

In the example below the view_1 is where my selections were displayed in text via a field. 'keyword' is the option text the JS is looking for. view_2 is the view it will show if that text is found in view_1. I used CSS to hide all tables on the page and the JS below to show them if the text was found. 

$(document).on('knack-view-render.view_1', function(event, page) {

  $('span').each(function(){

    var text = $(this).text().toLowerCase();

    if (text == 'keyword') {

        $('#view_2').show();

    }

  });

  

});

I am sure some one has an easier or smarter way to to this, but it was the only option I had in my bag of tricks. I hope this helps someone else. 

2

Hi Taylor,

Great find! I've actually found a good solution for hiding entire views based on if there's no data in a table, and it can easily be manipulated to work with other non-table views, I believe. Thought I'd share.

 

/*Hide Empty Tables*/

$(document).on(‘knack-view-render.table’, function (event, view, data) {

$(’.kn-td-nodata’).parents(’.kn-view’).hide();

});

Thanks,

Jared

2 Likes