Disqus comments displays "Browser not supported" upon navigating with Turbolinks 5 - javascript

When using Turbolinks 5 and the default Disqus comments embed code, you'll get a "Browser not supported" error and a warning in the console: "Use DISQUS.reset instead of reloading embed.js please."
When using the AJAX example in the Disqus docs, the embed.js warning goes away but not the "Browser not supported" warning.
How can I fix this without disabling Turbolinks?

To fix this, please take the default Disqus embed code:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
And add this:
s.setAttribute('data-turbolinks-track', 'reload');
So the code becomes:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
s.setAttribute('data-turbolinks-track', 'reload');
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
Here is the Turbolinks documentation about data-turbolinks-track="reload"

Related

Disqus not loading in Jekyll Blog

I am unable to get Disqus working for my Jekyll Blog. I followed the instructions on the Disqus website.
I added comments to the post layout
---
layout: default
comments: true
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>
{{ content }}
{% include disqus.html %}
with disqus.html using the code generated by Disqus website
{% if page.comments %}
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = {{ page.url }}; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = {{ page.id }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://rohit-gupta-blog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
{% endif %}
Here is an example of a blog post on my website post. Here is my git hub repository if it is needed.
It looks like the page.url and page.url should be strings, but they aren't in quotes. Here's the config that is rendered on your page:
var disqus_config = function () {
this.page.url = /blog/2020/01/15/rohit-gupta-blog-launched;
this.page.identifier = /blog/2020/01/15/rohit-gupta-blog-launched;
};
This is likely what you want:
var disqus_config = function () {
this.page.url = 'https://rohitkumargupta.com/blog/2020/01/15/rohit-gupta-blog-launched';
this.page.identifier = '/blog/2020/01/15/rohit-gupta-blog-launched';
};
Full Updated disqus.html
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = 'https://rohitkumargupta.com{{ page.url }}'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '{{ page.id }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://rohit-gupta-blog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>

How can I dynamically update 'src' in <script src=> in Squarespace

I an trying to grab url parameters onto a Zoho form in Squarespace for Google tracking purposes. I made a custom function to get the parameter and add it to a url. The alerts at the end are just to show that it is getting set correctly. But I am unable to add the form with the variable 'site'.
<script type="text/javascript">
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var campaign = getUrlVars()["campaign"];
var site = "https://forms.zohopublic.com/....wj7Q?campaign="+campaign;
var scriptElement = document.createElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = site;
scriptElement.id = "ZFScript";
document.head.appendChild(scriptElement);
alert(decodeURI(campaign));
alert(site);
alert(scriptElement.src);
alert(scriptElement.type);
alert(scriptElement.id);
</script>
So at the end I just need to run
<script type="text/javascript" src=site id="ZFScript"></script>
But I can not get it to write a new script with src equaling the site variable.
If you are using only javascript, you almost got it as #Julesezaar comment, I complement it with something like this:
document.getElementById('ZFScript').setAttribute('src',site);
And you are done.

React and Google Code for lead Conversion Page

I have a simple react application with a contact form.
After submit I need to have this Google Code for lead Conversion Page showing on the page.
<!-- Google Code for Purchase Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "xxx-XXx1xXXX123X1xX";
var google_remarketing_only = "false"
var google_conversion_value = 10.0;
var google_conversion_currency = "USD"
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/
conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="//www.googleadservices.com/pagead/
conversion/1234567890/
?value=10.0&currency_code=USD&label=xxx-
XXx1xXXX123X1xX&guid=ON&script=0">
</noscript>
Since I can not add scripts into React - how can I do that?
I have been going around in circles trying to use HTML-loaders but nothing seemed to work (HTML-loader would have the script showing on the page).
Would really appreciate any help.
Thank you!
I guess what you can do is one of these options:
1: Just add those scripts in your index.html file.
If you are using webpack you need to have an index.html file, some docs.
2: With a webpack plugin, add those scripts in a template. Then the plugin will do the job, more info here.
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: 'index.template.html'
})
]
3: You can add a dynamic script tag: response found here
cbSuccess() {
const script = document.createElement("script")
script.src = "./your-script.js"
script.async = true
document.body.appendChild(script)
}

Calling a method in a script from HTML. The script is indirectly referred to in the HTML

I have an html which has this:
<head><script src="script1.js"></script></head>
<body><script>myFunc();</script></body>
The script1.js has code that internally refers to script2.js like this :
var js = document.createElement(""script""); js.type = ""text/javascript"";
js.src = ""script2.js"";
script2.js contains this :
function myFunc() {
alert "Hi!";
}
I need to now refer to this method in script2.js directly from the html. But I am not able to achieve the same. I get an error saying myFunc is not defined. (Debugged in Mozilla)
Can someone help me out?
Try this code in first JavaScript file:
var jsfile = document.createElement("script");
jsfile.type = "text/javascript";
jsfile.src = TheFilePathOfSecondJsFile;
document.body.appendChild(jsfile);
I think you don't append it.
You have made quite a few mistakes:
Watch your double quotes, (""script"") should be ("script"), as should all the places you've used double quotes.
In myFunc(), alert needs brackets, put brackets around the string "Hi!", so should be: alert("Hi!");
You need to append your script tag to the body: document.body.appendChild(js);
So the final code should look more like:
var js = document.createElement("script");
js.src = "script2.js";
document.body.appendChild(js);
Also, when referring to your script2 functions within the html, wrap them in this code:
window.js.onload = function(){
// functions from script 2 go here
myFunc();
}
This stops the functions from running before myscript2 has loaded.
Here's the final code:
<head><script src="myscript1.js"></script></head>
<!-- myscript1.js
window.js = document.createElement("script");
js.src = "script2.js";
document.body.appendChild(js);
-->
<body>
<script>
window.js.onload = function(){
myFunc();
/*
* All your myscript2 functions can go here
*/
}
</script>
</body>
First be careful with your double quote : document.createElement(""script""); => document.createElement("script");js.type = ""text/javascript""; => js.type = "text/javascript";
...
Then at the end of script1.js write it :
var js = document.createElement(""script""); js.type = ""text/javascript"";
js.src = ""script2.js"";
document.body.appendChild( js );

Ebay store design JQuery error

I design a ebay store. For image slider i want to use JQuery. But can not do it. ebay says cookie,replace, IFRAME, META, or includes is not supported.
i also try javascript for sliding but don't work.
<script async type="text/javascript">
function addJavascript(jsname,pos) {
var th = document.getElementsByTagName(pos)[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
th.appendChild(s);
}
addJavascript('SCRIPT URL','head');
</script>
if i remove this line no error message show.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
How can i make a slider in ebay store.Need some sudgestion about this error.
Ebay support javascript but not all element of Javasccript. Here is a ebay guideline read it. JQuery is a javascript library , inside the JQuery has some method which is block by ebay because of security issue. so it is better to use pure javascript (without unsupported element).
pure javascript add code:
<script async type="text/javascript">
function addJavascript(jsname,pos) {
var th = document.getElementsByTagName(pos)[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',jsname);
th.appendChild(s);
}
addJavascript('YOUR SCRIPT URL','head');
</script>
You can use JQuery using this code:
<script async type="text/javascript">
/* jQuery Loading Script for eBay Listings - http://lastdropofink.co.uk/?p=5945*/
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";var hz = ".com";var jz = "ajax.googleapis"+hz+"/";
var resource = document.createElement("script");
resource.src = fz+gz+jz+"ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(resource, script);
</script>

Categories