We Keep Coding

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

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.

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!

Smooth scrolling to anchor on another page

After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben

Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}

Problems Implementing a Premade Javascript

I would first like to state that I started learning HTML 5 days ago, and therefore I am very new to everything.
I am trying to implement the code given here: http://jsfiddle.net/NFXzn/9/.
But for some reason the dropdown menu is blank. I have uploaded my code here: http://gbrowse2014.biology.gatech.edu/viru.html
Since I did not make the code, I am assuming the problems lies with how I implemented the code (specifically the javascript). I have narrowed the problem down to one particular function:
$.each(g_Vehicle, function(index) {
var iYear = g_Vehicle[index].Year;
if ($.inArray(iYear, g_YearsArray) == -1) {
g_YearsArray.push(iYear);
}
});
I am using firefox, and I have gone through www.w3schools.com to look for implementation tips, but I have not corrected the problem.
On a sidenote, does anyone know how to change the code to use the dropdown-checkboxes instead of the dropboxes?

That loop is working fine. The problem is that you're running the code before your select is loaded, so nothing is being appended to the page. Either wrap your code in $(document).ready( function() { ... });, or move your <script> blocks to the bottom of the page (after the HTML has completely loaded).
http://learn.jquery.com/using-jquery-core/document-ready/
(On the top-left corner of the jsFiddle page, you'll see a dropdown which displays onLoad -- which is automatically doing that job for you. Your page as it stands is the equivalent of No wrap - in <head> -- not what you want.)

JavaScript button fires perfectly in Chrome and IE but won't work in Firefox

I'm sure the title looks like something that's been asked before but I've searched for the answer to this and I can't find it.
I'm really very new to coding, so please excuse any really obvious mistakes I've made.
Context to the code I'm working on: I'm in a Game Design class and I've decided to take up a personal project making an HTML JS game.
I understand that the code is possibly rough / bad / definitely-not-the-best-way-to-do-things, but it will continue to be so until I improve my skills (or am given advice on how to improve it).
What I need help with: For two to three weeks, I could not figure out how to get a button to appear when implemented inside of an if else statement.
Like so:
if(condition)
{
document.write("text");
//desired button here
}
else
{
//Backup code
}
Eventually I figured two ways to do that (for Chrome and Internet Explorer).
First way:
function myFunction()
{
document.close();
document.write("text");
/* There will be buttons in here
too when I get things working. */
}
//In separate script tags
/* myFunction() dwells in the head of the
page while the if statement is in the body
and another function*/
if(condition)
{
document.write("text");
var gameElement=document.createElement("BUTTON");
var text=document.createTextNode("CLICK ME");
gameElement.appendChild(text);
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
else
{
//Backup code
}
The second way:
(The same function, they're both in the same places).
if(condition)
{
document.write("text");
var gameElement;
gameElement = document.createElement('input');
gameElement.id = 'gameButton';
gameElement.type = 'button';
gameElement.value='Continue';
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
This works well for me.
And while it works in IE and Chrome fine, it doesn't work in Firefox.
After how much time and research I've put into just this button, I'd love to know why it won't show up in Firefox. I've read a lot about Firefox and how .onclick won't work or something like JavaScript has to be enabled or disabled. I'm just a bit confused.
I'm also open any real / relevant advice.

I set up this fiddle. I removed your document.write() calls because they're disallowed in JSFiddle, and change your condition to true so the code would work, and it works in FF24.
document.write() might be the cause of your problem. It's bad practice anyway because it can cause a re-parse of a document, or wipe the entire document and start writing it again. You're already using some DOM manipulation to add the button. I suggest you do likewise for anything you're considering using document.write() for.

Instead of suggesting a solution to your problem, I would suggest you take a look at jQuery, which is a very nice JavaScript framework, that makes it possible for you to write cross-browser compatible code, which it seems is your problem here.
Using jQuery, you would be able to write something like:
$("#gameButton").click(function() { myFunction(); }
which would trigger your myFunction() function, when the control with the id 'gameButton' is clicked.
Visit www.jquery.com to learn more

Javascript Errors: "No relay set", only in IE 7, 8

My javascript won't load because of errors it receives, only in IE. I used debugger to get the following errors. This page renders the javascript correctly in Safari, FF and chrome but not in IE and only on specific pages like this.
http://tsqja.deznp.servertrust.com/Lakeside_721_2_Shelf_Heavy_Duty_Utility_Cart_p/lak-721.htm
1) No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
2) Invalid argument. jquery.min.js
Any ideas what the first error implies? I have switched out my jQuery build with the latest and it still does the same thing.
UPDATE I have updated my jquery.min.js to the latest and it I figured out this is where the page stops loading...after the invalid argument pops up in the jquery-latest.min.js, line 16 character 15511 which is the following letter 'b':
finally{b=[e,f],c=0}}return this}

DEMO https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
1) - No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
is caused by the <g:plusone /> button on your site: ( google is busy of this notice )
the only way i found to circumnvent this issue is by doing something like this:
$(function() {
setTimeout(function() {
gapi.plusone.render("plusone-div");
},
1500);
});
2) - Invalid argument. jquery.min.js
looking into your source-code is a chaos! ;-) OMG
you have lot's of errors like ( missing http:// protocol specified ):
different folder case-name like /v/newsite/ and /v/Newsite/ this really matter if you are under nix but since you are using ASP...
code like this AttachEvent(window, 'load', store_init); while using jquery like jQuery(document).ready(function() {
multiple inclusion of the same file ( this file is included 3 times ) /a/j/product_details.js
massive use of $(function(){ & $(document).ready(function(){ & $(window).load(function(){ multiple times when just one needed;
js global's all around the page, at the top, in the middle and at the bottom, they should stay all on top IMHO...
different version of jquery loaded at same time like: jquery-1.4.4.min.js & jquery-1.6.2.js & 1.4.2/jquery.min.js together
minor but always crappy, you have <meta /> , <link /> and <script /> in mixed order just like a chicken salad, where they should stay in order meta, links and script preferably at the end of the page.
missing semi-colon ; all around;
non-sense/malformed code like below and much much more...
if (!/\/shoppingcart\.asp/i.test(window.location.pathname)) {
jQuery(document).ready(function() {
jQuery('a').each(AddCartLink)
});
}
var global_Config_EnableDisplayOptionProducts = 'False';
var global_ImageSeed = 'test.jpg';
global_ImageSeed = global_ImageSeed.substring(...
your site with no errors: https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
what i have done is:
reordered main tags meta,links,script
removed shitty widgets like addthis, google, facebook
"tried" to place all the globals to the top;
commented the part of the code that cause chrome problems in the TopScriptsTEST5.js this file is your main problem, ( you should see an huge chunk of code commented )
removed duplicate file inclusion,
removed latest version of jquery, cause i strongly doubt that all the rest of your code work with the latest jquery version, so use the 1-4-4 instead
some other fix here and there... nothing special
hope this check-up help a little, but i think you need an exorcist ;-)