Copy link to clipboard
Copied
Hello
Is there a way to hide empty we app fields in detailed view. Working on a boat listing site with quite a few fields and want to exclude the field if the customer doesn't add any info.
http://uguru-autodealer-au21.businesscatalyst.com/boat-listings/43-custom-timber-trawler
I understand that java can do this however I am not fluent with this.
Thank You
Hi Valentino,
Just 2 issues to cover:
- Make sure you reference jquery
- Make sure you change the respective webapp's detail layout so it actually contains table elements, as you're currently using a list: http://screencasteu.worldsecuresystems.com/AP/2013-12-02_1257.png
Here's a working example:
http://screencasteu.worldsecuresystems.com/AP/2013-12-02_1251.swf
Kind Regards,
Alex
Copy link to clipboard
Copied
Hi,
BC doesn't offer this as an out-of-the-box feature. You'll have to use a little scripting to hide those fields. I see you're using a list in your detail template for the respective webapp. If you were to use a table instead, you'd have this easy workaround: http://jsfiddle.net/A4Wgk/1/. This is just one suggestion though, there are many variations/approaches depending on what html elements you're using to display the data in the first place.
Kind REgards,
Alex Pavelescu
Copy link to clipboard
Copied
Hello Alex
Thank you for your reply.
I have tried to add your script to my template but still showing the empty rows.
http://uguru-autodealer-au21.businesscatalyst.com/boat-listings/Buzzcat
I put the javaScript up in the head section, not sure if this is the problem. Have added code below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport" />
<title>{tag_name}</title>
<link href="/favicon.png" rel="shortcut icon" />
<link href="/home_badge_64.png" rel="apple-touch-icon" />
<link href="/home_badge_64.png" rel="apple-touch-icon-precomposed" />
<link href="/_assets/css/normalize.css" rel="stylesheet" />
<link href="/_assets/css/foundation.css" rel="stylesheet" />
<link href="/_assets/css/styles.css" rel="stylesheet" />
<script src="/_assets/js/custom.modernizr.js"></script>
<script>
$('td:last-child:empty').parent().hide();
</script>
</head>
<body>
<script type="text/javascript">
// Will retun 1 or 0 based on if user is logged in(1) or not logged in(0)
var _isLoggedIn = !!parseInt("{module_isloggedin}");
</script>
<header>
<section>
<div class="row alpha">
<div class="large-12 columns">
{module_menu, version="2", menuId="625382", moduleTemplateGroup="UtilityNav"}
</div>
<!-- end .columns.large-12 -->
</div>
<!-- end .row -->
</section>
<div class="row">
<div class="large-12 columns contain-to-grid">
{module_menu, version="2", menuId="625379", moduleTemplateGroup="Primary"}
</div>
<!-- end .columns.large-12 -->
</div>
<!-- end .row -->
</header>
<!-- end header -->
<div class="wrapper">
<div class="unhero"></div>
<div class="row pagetitle">
<div class="column large-12">
<h1 class="left">{tag_name}</h1>
</div>
<!-- end .column.large-12 -->
</div>
<!-- end .row.pagetitle -->
<div class="row supersize">
<div class="large-12 columns">
<div class="row">
<div class="columns large-6">
<div id="inner-slider">
<ul data-orbit="data-orbit">
{tag_image 1}{tag_image 2}{tag_image 3}{tag_image 4}{tag_image 5}{tag_image 6}{tag_image 7}{tag_image 8}</ul>
<div class="mpgs panel">
<span class="mpg">MDBS: {tag_office}</span><span class="mpg"></span>
</div>
<h3>Boat Information</h3>
<p><strong>Description:</strong><br />
{tag_description}</p>
<p><strong>Dealer Info:</strong><br />
</p>
<br />
</div>
</div>
<!-- end .columns large-6 -->
<div class="columns large-6">
<h2 class="alt"><small><del></del></small> {tag_currency} $<span class="tprice">{tag_price} <br />
</span></h2>
<table cellpadding="10" style="border-bottom: 1px dotted #b7b9b1; width: 470px; border-top: 1px dotted #b7b9b1;">
<tbody>
<tr>
<td class="TableFields">Who Should Enroll?:</td>
<td>EveryOne</td>
</tr>
<tr>
<td class="TableFields">Location:</td>
<td>Los Angeles</td>
</tr>
<tr>
<td class="TableFields">Location Notes:</td>
<td> </td>
</tr>
<tr>
<td class="TableFields">Public Transportation:</td>
<td>Yes</td>
</tr>
<tr>
<td class="TableFields">Handicapped Access:</td>
<td>N/A</td>
</tr>
<tr>
<td class="TableFields">Parking Notes:</td>
<td> </td>
</tr>
<tr>
<td class="TableFields">Instructor:</td>
<td>Jim Lafford</td>
</tr>
</tbody>
</table>
<hr />
<h3>More Info</h3>
<p><strong>Downloadable Details: </strong>{tag_downloadable details} </p>
<hr />
<h3>Loan Calculator</h3>
{module_contentholder, name="_Template - Loan Calculator"}
</div>
<!-- end .columns large-6 -->
</div>
<!-- end .row -->
</div>
<!-- end .columns.large-12 -->
</div>
<!-- end .row.supersize -->
</div>
<!-- end .wrapper -->
<footer>
<div class="row collapse">
<div class="columns large-4">
{module_contentholder, name="_Template - Help Center"}
</div>
<!-- end .columns.large-4 -->
<div class="columns large-4">
<div class="columns small-6">
{module_contentholder, name="_Template - My Account"}
</div>
<!-- end .columns.small-6 -->
<div class="columns small-6">
{module_contentholder, name="_Template - Privacy"}
</div>
<!-- end .columns.small-6 -->
</div>
<!-- end .columns.large-4 -->
<div class="columns large-4">
{module_contentholder, name="_Template - About Us"}
</div>
<!-- end .search -->
</div>
<!-- end .columns.large-4 -->
<!-- end .row.collapse -->
<div class="row collapse omega">
<div class="columns large-6">
<p>{module_webapps,0,i,6651 template="/_settings/copyright"} - {module_webapps,0,i,6651 template="/_settings/company-name"}</p>
</div>
<!-- end .columns.large-6 -->
<div class="columns large-6">
{module_menu, version="2", menuId="625381", moduleTemplateGroup="Social"}
</div>
<!-- end .columns.large-6 -->
</div>
<!-- end .row.collapse -->
</footer>
<!-- end footer -->
{module_contentholder, name="_Template - Scripts"}
</body>
</html>
Thank you in advance.
Regards
Valentino
Copy link to clipboard
Copied
Hi Valentino,
Just 2 issues to cover:
- Make sure you reference jquery
- Make sure you change the respective webapp's detail layout so it actually contains table elements, as you're currently using a list: http://screencasteu.worldsecuresystems.com/AP/2013-12-02_1257.png
Here's a working example:
http://screencasteu.worldsecuresystems.com/AP/2013-12-02_1251.swf
Kind Regards,
Alex
Copy link to clipboard
Copied
Alex you are a champ!
Thank you for your time to guide me through this, was very helpful and has been implemented on the site perfectly.
Regards
Valentino
Copy link to clipboard
Copied
Hello Alex
Thank you for your help so far, I have run in a little trouble with the hide features script.
Site is now live:
www.mdbs.com.au
</script>
<script>
$('td:last-child:empty').parent().hide();
</script>
When I add the Recaptcha V2 it hides the fields because its a table.
Recaptcha V1 has been getting heaps of spam unfortunatley.
Was thinking there could be a way to just div up the table I want to use the script for and not the whole page.
I had to take out the contact form with the captcha 1 as too much spam was sent through.
Any advise would be appreciated.
Regards
Valentino
Copy link to clipboard
Copied
Worked this one out..
Wrapped the table I wanted to target in a <div> tablez and used the following script:
<script>
$('#tablez table td:last-child:empty').parent().hide();
</script>
Now works.