Javascript not detecting if div is empty correctly

Question

I'm using Americommerce and they use widgets for everything, I have a widget that shows a users recently viewed products, but when they haven't yet viewed anything the spot is just empty.

I'd like to display a message. The problem I'm having is detecting if the widget is empty. I tried wrapping the widget with a div(#cond) but that didn't help, I tried using JavaScript to check to see if the class ul.side_carousel existed and also if there were any contents in div#cond. No matter what I do, I can't get it to work right.

The script below is the closest I've gotten. Upon a fresh visit to the site the div displays the 'No Items to Display' message from the script but then if I click on a product and then go back to the homepage the div is no longer empty, it is showing the recently viewed product (this is good!), but its also showing the 'No Items to Display' message (this is bad), I'm not sure why that's even showing up since the div is no longer null.

<div class="col-sm-2 side hidden-xs hidden-sm">      
    <h3>Recently Viewed:</h3>
    <div id="cond">
      <ac:widget id="CAROUSEL23626" type="Carousel" scrollby="4" displayorientation="Vertical" enablemergecode="True" categoryid="293" repeatabletype="RecentlyViewedItems" rotatorstartdate="10/23/2019" productlistid="9" displaycount="8">
        <ac:visibilityarea id="dvControl">
          ##INCLUDESTYLESHEET[/store/inc/bxslider/jquery.bxslider.css]##

          <ac:layoutarea id="Layout">              
            <ul class="side-carousel">$$GROUP$$</ul>             
          </ac:layoutarea>

          <ac:layoutarea id="Group">
            $$ITEM$$
          </ac:layoutarea>

          <ac:layoutarea id="Item">
            <li>
              <!--$$PRODUCTNAME$$-->

              $$PHOTOWITHLINK$$
              <div class="FeaturedItemsRating">$$OVERALLRATING$$</div>
              <div class="saleprice">$$PRICE$$</div>
            </li>
          </ac:layoutarea>


          <ac:layoutarea id="Script">
            <script>
              $(function () {
                $("$$SELECTOR$$ ul").bxSlider({
                  minSlides: 4,
                  maxSlides: $$VISIBLESLIDES$$,
                  moveSlides: $$SCROLLBY$$,
                  mode: '$$ORIENTATION$$',
                  slideWidth: $$WIDTH$$,
                  slideMargin: 10
                });
              });
            </script>

          </ac:layoutarea>

          ##INCLUDESCRIPTBOTTOM[/store/inc/bxslider/jquery.bxslider.js]##
        </ac:visibilityarea>
      </ac:widget>


    </div>
     <script>
      var bond_div = document.getElementById("CAROUSEL23626");
      var cond_div = document.getElementById("cond");
      if (bond_div === null) {
        cond_div.innerHTML = "<H3>No Items to Display</H3>";
      }  
    </script>
    $$CAROUSEL23626$$
  </div>

score 0 · Answer 1 · answered Nov 07 '19 at 00:34

0

bond_div will only be null if the div doesn't exist at all. If you want to check if it's empty you need to test its innerText.

if (bond_div.innerText.trim() == "") {
  cond_div.innerHTML = "<h3>No Items to Display</h3>";
}

I used innerText rather than innerHTML because it looks like it has lots of HTML tags in it.

.trim() removes any whitespace surrounding the value, which be there because of all the spaces and newlines around the HTML tags.

answered Nov 07 '19 at 00:34

Barmar

596,455
48
393
495

Well I tried that, but now on a fresh visit, that div is empty with no message displayed. Does location of the script on the page effect this at all? I dont know what else to check – robothead Nov 07 '19 at 00:48
The script has to be after the element, or you need to run it in the `window.onload` function. – Barmar Nov 07 '19 at 00:52
Are you seeing any errors in the JavaScript console? – Barmar Nov 07 '19 at 00:52
yes, I just checked for errors there is one UnCaught Syntax Error: Cannot read property 'innerText' of null – robothead Nov 07 '19 at 01:00
See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Barmar Nov 07 '19 at 01:01
I looked at the post you linked to and I think when no products have been viewed the widget doesn't even load. I checked the dev tools and that ID it uses(CAROUSEL23626) isnt there so I guess I need a way to look to see if a element with that id exists and if it doesnt write a message and if it does dont. – robothead Nov 07 '19 at 02:30
But you need to put the JavaScript at the end, after the place where it's supposed to load when it does. – Barmar Nov 07 '19 at 02:32

Javascript not detecting if div is empty correctly

1 Answers1