6 Replies Latest reply on Feb 17, 2014 6:13 PM by OnTheBallWebDesigns

    Hide web app field in detailed view

    OnTheBallWebDesigns Level 1

      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

        • 1. Re: Hide web app field in detailed view
          Alex Pavelescu Adobe Employee

          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

          • 2. Re: Hide web app field in detailed view
            OnTheBallWebDesigns Level 1

            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

            • 3. Re: Hide web app field in detailed view
              Alex Pavelescu Adobe Employee

              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

              • 4. Re: Hide web app field in detailed view
                OnTheBallWebDesigns Level 1

                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

                • 5. Re: Hide web app field in detailed view
                  OnTheBallWebDesigns Level 1

                  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

                  • 6. Re: Hide web app field in detailed view
                    OnTheBallWebDesigns Level 1

                    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.

                    1 person found this helpful