On a site we run a basic Twitter button, which works fine 90% of the time. Occasionaly the initialization fails with the error: Uncaught TypeError: Cannot call method 'load' of undefined.
This is the script that does the Twitter initialization:
<script type="text/javascript">
//<![CDATA[
(function() {
var twitterScriptTag = document.createElement('script');
twitterScriptTag.type = 'text/javascript';
twitterScriptTag.async = true;
twitterScriptTag.src = document.location.protocol + '//platform.twitter.com/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(twitterScriptTag, s);
})();
//]]>
</script>
Can anybody give a hint why this happens?
UPDATE: After setting async = false I get the following error:
'twttr.widgets' is Null or no object
SOLUTION: I load some stuff via AJAX on $(document).ready(). Problem is, when the AJAX content loads faster than the Twitter initialization is done it fails.
Related
I am adding ZohosalesIQ to the CookieBot Prior Consent widget on w WP install.
This script given by zoho is
<script type="text/javascript" data-cookieconsent="statistics">
var $zoho = [];
var $zoho = $zoho || {};
$zoho.salesiq = $zoho.salesiq || {
widgetcode: "1c636a8a8d8e3410b7e579760898b7768f3cb213adb21970788a3891735df801800b6e4a1385c37b0f792b9ee54ce",
values: {},
ready: function() {}
};
var d = document;
s = d.createElement("script");
s.type = "text/javascript";
s.id = "zsiqscript";
s.defer = true;
s.src = "https://salesiq.zoho.eu/widget";
t = d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s, t);
d.write("<div id='zsiqwidget'></div>");
</script>
I am supposed to be adding <script type="text/plain" data-cookieconsent="statistics">
to the script tag to enable prior consent on cookies created by this script however, when I add this it breaks and fails to load.
Console is empty but the page renders as a white page after pre-load. When I add the code with the jaavscript type tag, it works fine.
I've tried popping itto a call back function but no joy :(
Any pointers would be great.
If the script tag is using the deprecated JavaScript function “document.write” it might cause the problem you have described above because using this function the script is loaded synchronously and it will then clear the window content (generates blank page).
To prevent this issue please make sure that the script is loaded asynchronously since the Cookiebot triggers all scripts asynchronously (i.e. to wait for the visitor’s consent) in order to work properly.
You need rewrite it to use a different approach e.g. “document.write = function(node) {document.body.insertAdjacentHTML(‘beforeend’, node);}”
We have a custom searchbar on our website and I noticed that sometimes (9/10 times) the JS will throw this error, which forces the content that you searched for to not render
www.googleapis.com/customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu…oogle.com&callback=google.search.Search.apiary####&nocache=1446053383742:2
Uncaught TypeError: google.search.Search.apiary#### is not a function
Search page when error is thrown:
Search page with error truncated/resolved
But if I were to refresh, or research, this error is trumped and will render all of my searches. After looking through the file, I found out the google.search.Search.apiary#### that they are referring to is only mentioned once. So I believe that this error is truncating the entire file when it does show up. What could be causing this, what would be some options for fixing it?
Alright, I stumbled upon an answer:-
After doing some more research, I found that this user on Google Forums also has the same issue.
To put it simply, the way it works is you use a <script> to generate your searchbar.
You have this function + html element for your search bar
<script>
(function() {
var cx = '###';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only resultsUrl="/search-results"></gcse:searchbox-only>
So we generated the bar in our <div class="header"> which is a HAML element, as a part of a template. So it was always loaded within every header. Since we have 10 pages, this same script was generated 1 time per page.
Our Google CSE is made to search and then redirect to the url /search-results where it generates the results.
To generate the results, you needed this function and HTML
<script>
(function() {
var cx = '###';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
Which is the same as the one being loaded in our Header.
With this set up, the results page would call that <script> twice when loading in, and cause the JS to break. So after removing the <script> loading the results, it stopped throwing the error.
To put it brief, just make sure you aren't calling the same function twice on your results page, and it should clear up the Uncaught TypeError.
Don't. Repeat. Yourself
--ether
In my case I accidentally had the form and script for the Google Custom Search repeated twice on the same page. Once the second lot was removed it stopped giving the error.
I have this JS:
<script type="text/javascript">
var aaascript = document.createElement('script'); aaascript.type = 'text/javascript';
aaascript.src = ('https:' == document.location.protocol ? 'https://xxx' : 'http://xxx') + '/aaa.js';
var aaas = document.getElementsByTagName('script')[0]; aaas.parentNode.insertBefore(aaascript,aaas);
callthis('somevalue');
</script>
this code generates a script tag and inserts it to the page. in the script aaa.js is the function callthis. but when I call the function there is this error:
Uncaught ReferenceError: callthis is not defined (anonymous function)
what goes wrong here?
The script tag is being created but the script is then loaded from the server. callthis() is being called in between these two events; that is, before the script is fully loaded, and so the method doesn't exist.
Use the .onload event of the script tag to delay calling callthis() until the script is fully loaded, as documented here.
I am trying to make a plugging using JS.
I have the following code :
var fileref = document.createElement('script');
fileref.src = "js/index.js";
document.documentElement.appendChild(fileref);
I can verify that the code loads across domain however it doesn't always execute. Even if I set it before </head>
Sometimes it does but sometimes it just doesn't. Any ideas on what I could be doing wrong?
The JavaScript is sometimes running before the document.documentElement exists. So when it goes to append the new script element, it fails. The inconsistency ("sometimes it does but sometimes it just doesn't") is due to the page rendering at ever-so-slightly different speeds.
Update:
Put this in your <head>:
<script type="text/javascript">
(function () {
var scrpt = document.createElement('script');
scrpt.type = 'text/javascript';
scrpt.async = true;
scrpt.src = 'js/index.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scrpt, s);
})();
</script>
I'm retrieving content via a jQuery get Ajax call and add it to an element afterwards. The HTML code is added without any problem, just the JS code gets lost. What am I doing wrong? When I look at the response in Firebug it is still there, it's just not added to the HTML element.
My Ajax request:
function get_overlay_content(path)
{
$.get(path, function(data) {
$("#overlay_content").html(data).fadeIn(500);
$(function()
{
// do something
});
});
}
The response in Firebug:
<div id="imprint" class="overlay_box">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div id="overlay_close" onclick="close_overlay();"><img src="/2012/images/overlay_close.png" id=""></div>
# ETC
The HTML after update:
<div id="overlay_content">
<div id="imprint" class="overlay_box">
<div id="overlay_close" onclick="close_overlay();"><img src="/2012/images/overlay_close.png" id=""></div>
<div class="overlay_heading"><img src="/2012/images/heading_download.png" height="65"></div>
# etc.
My guess is that it has something to do with encoding. What do you think?
Thanks!
Olaf
SOLVED:
Thanks to Uzi, the solution was quite simple, following the Google guide Asynchronous Tracking Usage Guide
But for everyone to understand: If you have one main file (index.html) from where you retrieve partials (lets call it /partials/_download_pdfs.html) via an AJAX GET request (e.g. jQuery.get()) all you have to do to track every AJAX request with Google Analytics is the following:
Add the tracking code for Analytics ABOVE the rest of your Javascript
and your AJAX GET request, put the following code in a callback function (if you don't put it in a callback it might slow down your actual request)
$.get(path_to_track, function(data) {
// Fade in effect:
$("#container").html(data).fadeIn(500);
// this part is interesting:
_gaq.push(['_setAccount', 'UA-XXX-1']);
_gaq.push(['_trackPageview', path_to_track]);
// Do other stuff in the callback
});
That's it. If you want to track PDF downloads on a page you retrieved with an AJAX GET request with jQuery (as I did), just add the following code to the partial (eg /partials/_download_pdfs.html)
<script type="text/javascript">
$(document).ready(function() {
$(".pdf_link").click(function(){
_gaq.push(['_setAccount', 'UA-XXX-1']);
_gaq.push(['_trackPageview', '/pdf/' + $(this).attr("id")]);
});
});
</script>
If I understand correctly, you are fetching HTML code using AJAX.
That block of code contains a script tag, and you expect the script to run one the request is complete.
Unfortunately it doesn't work this way, since as far as the DOM concerned, this is just an element.
I'm not sure why you need an AJAX code for google analytics to run, but in case it contains dynamic data, just make the AJAX call return the parameter you need and have a function running this code locally.