admin管理员组文章数量:1323730
I am trying to set AddThis plugin on my Rails site but currently have only partial success. The problem is it doesn't work as it should with turbo-links. AddThis share buttons appear only after page refreshes. If I click on some other part of site, AddThis toolbar disappears. If I would disable turbo-links, then it would work on each part of the site.
This is the code get when I generate smart layers:
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to to customize -->
<script type="text/javascript" src="//s7.addthis/js/300/addthis_widget.js#pubid=xxx"></script>
<script type="text/javascript">
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'left',
'numPreferredServices' : 5
}
});
</script>
<!-- AddThis Smart Layers END -->
That code of course doesn't work with turbo-links. I found this solution' how to make add this work with turbilinks rails 4, where author confirmed it works but I still have problems when I click on some other part of the site.
I tried to insert this code inside head
tag in my application.html.erb
file:
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to to customize -->
<script type="text/javascript">$(document).ready(function() {
var script="//s7.addthis/js/300/addthis_widget.js#pubid=xxx";
if (window.addthis){
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
$.getScript(script, function(){
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'left',
'numPreferredServices' : 5
}
});
});
});
</script>
<!-- AddThis Smart Layers END -->
AddThis again normally loads after I open my site but as soon I switch to other part of site, AddThis disappears.
How can I make that script to work on every part of my site with turbo-links enabled?
EDIT 1:
Also tried this but without success:
<script type="text/javascript">
$(document).on('page:change', function() {
// Remove all global properties set by addthis, otherwise it won't reinitialize
for (var i in window) {
if (/^addthis/.test(i) || /^_at/.test(i)) {
delete window[i];
}
}
window.addthis_share = null;
// Finally, load addthis
$.getScript("//s7.addthis/js/300/addthis_widget.js#pubid=ra-xxx");
});
</script>
I am trying to set AddThis plugin on my Rails site but currently have only partial success. The problem is it doesn't work as it should with turbo-links. AddThis share buttons appear only after page refreshes. If I click on some other part of site, AddThis toolbar disappears. If I would disable turbo-links, then it would work on each part of the site.
This is the code get when I generate smart layers:
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis./get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis./js/300/addthis_widget.js#pubid=xxx"></script>
<script type="text/javascript">
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'left',
'numPreferredServices' : 5
}
});
</script>
<!-- AddThis Smart Layers END -->
That code of course doesn't work with turbo-links. I found this solution' how to make add this work with turbilinks rails 4, where author confirmed it works but I still have problems when I click on some other part of the site.
I tried to insert this code inside head
tag in my application.html.erb
file:
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis./get/smart-layers to customize -->
<script type="text/javascript">$(document).ready(function() {
var script="//s7.addthis./js/300/addthis_widget.js#pubid=xxx";
if (window.addthis){
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
$.getScript(script, function(){
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'left',
'numPreferredServices' : 5
}
});
});
});
</script>
<!-- AddThis Smart Layers END -->
AddThis again normally loads after I open my site but as soon I switch to other part of site, AddThis disappears.
How can I make that script to work on every part of my site with turbo-links enabled?
EDIT 1:
Also tried this but without success:
<script type="text/javascript">
$(document).on('page:change', function() {
// Remove all global properties set by addthis, otherwise it won't reinitialize
for (var i in window) {
if (/^addthis/.test(i) || /^_at/.test(i)) {
delete window[i];
}
}
window.addthis_share = null;
// Finally, load addthis
$.getScript("//s7.addthis./js/300/addthis_widget.js#pubid=ra-xxx");
});
</script>
Share
Improve this question
edited May 23, 2017 at 12:16
CommunityBot
11 silver badge
asked Feb 13, 2014 at 20:39
user3304086user3304086
9111 gold badge9 silver badges20 bronze badges
4 Answers
Reset to default 5Have you tried this:
#app/assets/javascripts/application.js
addthis = function() {
// Remove all global properties set by addthis, otherwise it won't reinitialize
for (var i in window) {
if (/^addthis/.test(i) || /^_at/.test(i)) {
delete window[i];
}
}
window.addthis_share = null;
// Finally, load addthis
$.getScript("//s7.addthis./js/300/addthis_widget.js#pubid=ra-xxx");
}
$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);
This solution does not need event handlers.
First, I created a partial on app/views/layouts/_add_this.html.erb
:
<script type="text/javascript">
if (window.addthis) {
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
</script>
<script src="http://s7.addthis./js/300/addthis_widget.js#pubid=XXXXXXXXX" type="text/javascript"></script>
Then, whenever I need add this, I use:
<%= render 'layouts/add_this' %>
For some reason getScript
did not work for me.
This is the only thing that worked for me:
When calling addthis do this:
<script type="text/javascript" src="//s7.addthis./js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>"></script>
<!-- Go to www.addthis./dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
make sure to include this file after turbolinks and jQuery in your application.js file:
addthis.js
//fixes social addthis links
var addthis;
addthis = function() {
var script = 'http://s7.addthis./js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>#async=1';
// Remove all global properties set by addthis, otherwise it won't reinitialize
for (var i in window) {
if (/^addthis/.test(i) || /^_at/.test(i)) {
delete window[i];
}
}
window.addthis_share = null;
// Remove all global properties set by addthis, otherwise it won't reinitialize
if(window.addthis) {
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
// Finally, load addthis
$.getScript(script, function(){
addthis.toolbox('.addthis_toolbox');
});
}
$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);
Remove the turbolinks effect for addthis js. You can use jquery-turbolinks gem. You just have to follow the guide and install the gem then put in application.js jquery-turbolinks like this:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
After this Turbolinks will work perfect for pages loading but allows our js and jquery to load before turbolinks gets into effect.
You can see the details on usage of this gem by going on this blog post.
本文标签: javascriptHow to make AddThis to work with Rails 4 turbolinksStack Overflow
版权声明:本文标题:javascript - How to make AddThis to work with Rails 4 turbo-links? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742120497a2421671.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论