Javascript null error when using external script in a Rails app - javascript

I am using a banner ad from an ad service provider, similar to google adsense.
Instruction from their site state clearly and simply that all we need to do is to copy the below code to the body of our webpage
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript"><!--
hsoub_adplace = [my account id];
hsoub_adplace_size = '728x90';
//--></script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
I have copied and pasted into my rails app, inside a body of a view file but the banner is not getting displayed and I can see javascript error (with browser inspect source)
TypeError: document.getElementById(...) is null
ps: On old browsers the banner is getting displayed but never on recent versions of browsers.
ps2: The support of hsoub confirmed multiple times, there is no problem from their side (their code is fine and working on thousands of websites, and my account is active with no issues). And it must be a problem from my code.. I am thinking the way Rails handles javascript...
Can you please help me solve this error and get the banner displayed.
ps3: I am using rails 6.0.1 and turbolinks 5.2.0
you can check the error/source code online at https://tafqit.com/

The problem is caused by Rocket Loader feature of CloudFlare cdn service
Rocket Loader improves paint times for pages that include Javascript.
Visitors will have a better experience by seeing content load faster
and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your
Javascripts, including third party scripts, so that they do not block
rendering the content of your pages.
I disabled it and banner is appearing now.

I am going to guess that this is a script positioning issue. It looks like the script is possibly looking for elements that are not rendered yet, i.e. the document and document body is not ready. Move the scripts to the end of the page i.e. after the body tags and see if that helps. Otherwise please add the exact error and perhaps show a condensed view of your page and the scripts relative to the other elements.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello world</h1>
</body>
<script type="text/javascript">
hsoub_adplace = 12345;
hsoub_adplace_size = '728x90';
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
</html>
I managed to get the iframe to load by moving the scripts
Scripts are (still) inside the body tags.

Related

AddThis Inline share buttons <javascript> not shown in webpage

I searched for other answers but mine seems the simplest!
My web builder lets me insert Javascript, HTML or CSS snippets into the <head> and <body> source code. It seems these snippets affect all website pages.
I inserted AddThis 'inline share buttons' within the <body>:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ebdd74910cfe8a0"></script>
For activating the buttons, I added the next code in a single web page (drag-and-drop html code tool):
<div class="addthis_inline_share_toolbox_xa65"></div>
But the share buttons are not shown on that page: http://builder.ferozo.com/reparando-todo/#!/-testing/
I've tried adding both code snippets together into the same web page but no results. It doesn't seem to be a problem related to browsers blocking an unsafe widget due to a lack of a SSL Certificate.
Any idea of what could be the problem?

moving js and css to the footer

Google page speed insights want me to fix "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fexam-paper.net%2Fqa&tab=desktop
When I moved js and css to the footer and checked with chrome inspect elements it shows a lot of function not defined error which I guess is happening because the js required for those function are loaded later.
So can I ignore those errors or they could affect my site functionality ?
My site http://exam-paper.net
It happens cause you have some scripts within body. For example:
<script type="text/javascript">
$("#quick_login input[name='url']").val($(location).attr('href'));
</script>
This code provokes error if jQuery not loaded yet. And it will affect your site functionality of course.

Leaflet map -- sometimes it shows, sometimes it doesn't, any idea why?

Firefox 24.0 and the most recent Chrome both seem to refuse to load my leaflet map...but low and below -- it loads on Safari on my Iphone (not useful, but interesting to note).
This is my first stab at Leaflet and Bootstrap...other then the .container working unpredictably when I called it from localhost...I haven't had any problems until I tried to load it onto a webpage...
I am mostly curious why this is, I haven't seen something like this before...
Thanks!
Site: Link to Leaflet Map
Any thoughts maybe?
Ok the issue is probably related to cdn and security. When I open your sample site in Chrome it gives me a warning that a script is being loaded from unauthoriced sources.
Since FF23 these scripts are also blocked directly in the browser, and you get error messages as such:
Blocked loading mixed active content "http://code.jquery.com/jquery-1.10.1.min.js"
When I allowed to load unauthorized scripts in chrome, (there is a little shield icon in the address bar) it worked without a problem!
So try to provide these scripts locally, it might have something to do with google drive, that it is more restrictive because of javascript threats as such.
I hope it helped, and if you think this is the solution please mark it as an answer.
Thanks
You are loading leaflet.js before jquery, I get 9 js errors on the page.
One of them says:
ReferenceError: jQuery is not defined
Is leaflet dependend on jquery? Then you should load it first...
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Google Tracking Script causing Website Layout issues

I have installed the Google code for Remarketing Tag on my website. I have placed it in the footer of my site. The tracking is working fine, however, I have discovered a piece of the code is causing extra whitespace at the footer of my site. The snippet of code causing this is:
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
I have tried applying different CSS properties to it, but nothing seems to work. How would I keep the script on the page but it not effect my design?
I have figured it out:
<div style="display:none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
</div>
Thanks to this posting: Google AdWords: remove iframe added by tracking conversion code

Delphi, EmbeddedWB/TWebbrowser - jQuery not executing

I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.

Categories