Rails 6 Bootstrap v3.4.1, jQuery 1.12.4 popover function is showing the Title but not the Body?

Question

I am re-writing an application called FILTERtrak and it has been going great so far. I have added a subscription model to it, enhanced it in all kinds of ways and have really started to like Ruby and Rails a LOT. It was originally written with Ruby 2.2.2 and Rails 4.2. I have upgraded it to Ruby 2.7.2 and Rails 6.1.5 (recently). Both versions of the APP I have running on Bootstrap v3.4.1 and jQuery 1.12.4

Of all of the issues I have run into and have SOLVED that are way more complicated it just seems so silly I can't seem to figure out WHY it is happening.

The old version of FILTERtrak is still up and running on Heroku. I haven't switched the APP to my new version as of yet because I am still upgrading it.

This Filter Condition Guide button when you hover over it on the old version of the APP shows the popover just fine. The VERY SAME CODE for some reason on the NEw version of this APP is popping up JUST the title but not the BODY?!? Which is really confusing to me???!?.

That tells me Rails is working, JavaScript is working, jQuery is working and bootstrap is working otherwise the popover title wouldn't come up. So why would it work for the title and NOT the Body when the code hasn't changed?!?

I have been trying everything I can think of today and searched about 1000 times. Seems silly I can't seem to resolve this small issue but I need to get this figured out as I need to use more popovers in the app in other places.

I tried writing another popover in another area of the APP and it worked fine?!? So I don't know if it is something due to the newer version of Ruby on Rails that is preventing the body part from not coming up or what it is.

I am NOT very good yet with the frontend stuff. I am just kind of starting to get used to HAML. The HAML line that deals with the toggling seems very complicated to me (starts with .btn.btn-xs). I tried using some online convertors to change that one line from HAML to HTML so I could better see what is going on but no convertor was able to successfully convert it. So out of luck that way. I re-wrote the line in HTML myself and it did the very same thing so I am not sure if it has anything to do with the HAML line that starts with .btn.btn-xs or not. Since it is still working with that haml line the way it is written I assume it isn't the issue but I have long run out of things to try.

Here is the HAML View that has the Button on it. (I am just including the relevant part of the view and other code, if anyone needs to see more to help let me know).

.text-center
  .btn.btn-xs.btn-block.btn-primary{data: { popover: { content: "#condition-popover" }, placement: "top", toggle: "popover", trigger: "hover click"}, tabindex: "0" } Filter Condition Guide
        #condition-popover.hidden
          .popover-heading
            What do the conditions mean?
          .popover-content
            %dl
              %dt Operational
              %dd
                %ul
                  %li No soot on outlet/bypass
                  %li No cracks
                  %li Wire test passes
              %dt Potentially Compromised
              %dd
                %ul
                  %li 0-20% soot on outlet/bypass
                  %li No cracks
                  %li Dents or impact damage
              %dt Compromised
              %dd
                %ul
                  %li 20%+ soot on outlet/bypass
                  %li Any cracks observed
                  %li Wire test fails

Here is the JavaScript/jQuery file

(function() {
  var ready;

  ready = function() {
    $('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function() {
        var content;
        content = $(this).attr('data-popover-content');
        return $(content).children('.popover-content').html();
      },
      title: function() {
        var title;
        title = $(this).attr('data-popover-content');
        return $(title).children('.popover-heading').html();
      }
    });
    return $('#service_filter_condition').on('change', function() {
      var selection;
      selection = $(this).val();
      switch (selection) {
        case 'operational':
          $('#customer_notified_container').fadeOut();
          break;
        case 'potentially_compromised':
          $('#customer_notified_container').fadeIn();
          break;
        case 'compromised':
          $('#customer_notified_container').fadeIn();
          break;
        default:
          $('#customer_notified_container').fadeOut();
      }
    });
  };

  $(document).ready(ready);

  $(document).on('turbolinks:load', ready);

}).call(this);

Here is a pic of what is currently coming up. You can see the heading and it even has it's correct styling for the title section.

Here is a picture of the very same code WORKING on the older version of the APP:

What it even more strange to me is if I inspect the html page, the data is all there! It is just not toggling the body section and I just am at a loss to understand WHY?!? I tried adding in container: 'body' in various places as I saw that can solve the body not coming up sometimes. All of the other examples I was able to find were not even similar to my own.

If anyone wants to see anything else please let me know. I appreciate ANY input as to what could be causing this minor irritant from occurring. It took me less time to re-write some DB queries that getting this tiny issue fixed, driving me crazy.

Thank You, Scott

UPDATE: Here is the now working code:

JS

(function() {
  var ready;

  ready = function() {
    $('[data-toggle=popover]').popover({
      html: true,
      trigger: 'hover click',
      placement: 'top',
      title: 'What do the conditions mean?',
      content: function() {
        return $('#popover-body').html();
        }
    });
    return $('#service_filter_condition').on('change', function() {
      var selection;
      selection = $(this).val();
      switch (selection) {
        case 'operational':
          $('#customer_notified_container').fadeOut();
          break;
        case 'potentially_compromised':
          $('#customer_notified_container').fadeIn();
          break;
        case 'compromised':
          $('#customer_notified_container').fadeIn();
          break;
        default:
          $('#customer_notified_container').fadeOut();
      }
    });
  };

HAML:

 .btn.btn-xs.btn-block.btn-primary{"data-toggle": "popover", "tabindex": "0", "html": "true" } Filter Condition Guide
          #popover-body.hidden{"data-toggle": "popover", "html": "true"}
            = render 'filter_conditions_popover'

It now works properly. I ended up keeping the render line as I like having the information in a partial, much cleaner. I also kept the re-written Javascript as I think it is much simpler to read.

Answer 1

Ok I will have to file this one under What the Heck?!? The issue was the popover would NOT display anything with the < dl > if HTML tag or %dl tag if HAML.

If you put the < dl > tag if HTML or the %dl if HAML the popover will IGNORE everything from that point forward. I proved this about 20 times over because I simply couldn't believe it. I can't make ANY sense of it but that it was it was. I even changed having the haml code under the #condition-popover.hidden line to use = render 'filter_condition_popover' and I tried using HTML instead of HAML thinking maybe it was some strange bug with HAML. Nope, HTML or HAML it will simply not allow the < dl > tag.

I figured this out by being frustrated. I put in To heck with you (I think I put something stronger than that actually) under the line where the body portion wasn't showing up and refreshed and to my complete surprise the line I put in under the #popover-content line showed up?!?

I then realized the code would return plain text?!? So I then tried using HTML instead of HAML and got the same results. So I started from plain text and then tried adding the tags back in and as soon as I put in the dl on HTML or HAML it stopped working. I did some Google/Bing searching and I can't find anyplace where that is a known issue. Even more bizarre as I said in my initial post the same code with the same tags are working on an older version of Ruby on Rails on the very same APP. Go figure that one out, I can't.. I don't know if it is one of the gems that has some bizarre conflict or WHAT the issue could be.

So I ended up using < h6 > in place of the < dl > and I added a bold in there as well and it looks almost identical. I also moved some of the HTML elements into the JavaScript side to simply the HAML portion. Lastly I ended up putting the pop over body data into a partial.

So if anyone runs into this I hope this information will help you. I will update my post with the new code I used. I even simplified the original JavaScript some hoping that would fix it but it didn't; that darn dl tag!