I am trying to use the sharethis button on a page which is loaded via ajax.
The buttons do not show up. Please help.
Regards,
Pankaj
After adding the new content to the dom, call
stButtons.locateElements();
// or if you want to be a bit defensive about whether the lib has been
// loaded or not:
if (window.stButtons){stButtons.locateElements();} // Parse ShareThis markup
Article another another
Updated 09/2017 Answer
The stButtons object doesn't exist anymore, now you can use
window.__sharethis__.initialize()
To reinitialize the buttons
Updated 03/2020 Answer
As found in The Ape's answer above: https://stackoverflow.com/a/45958039/1172189
window.__sharethis__.initialize()
This still works, however there is a catch if your URL changes on the AJAX request, you need to make sure the URL you want shared is set as a data attribute (data-url) on the inline sharing div. You can also update the title using data-title attribute.
<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>
Use case:
I'm using a WordPress/PHP function to generate specific content based on a query string. If you don't set the data-url attribute on the ShareThis div, ShareThis will hold the first URL that was clicked to share, regardless of the URL update on AJAX request.
This solution will also work for NodeJS based frameworks, like Meteor.
stButtons.locateElements();
is needed in the rendered callback of a template, to ensure that the shareThis buttons will appear on a page redirect.
I was facing the same problem with sharethis and Ajax pagination.
The buttons was not showing after posts loaded by Ajax so I've searched and found this.
I've just added the function stButtons.locateElements(); on Ajax success:
something like success: stButtons.locateElements();
Hope this will be helpful for someone like me.
Thanks
Ibnul
For the new API following solution worked for me
if (__sharethis__ && __sharethis__.config) {
__sharethis__.init(__sharethis__.config);
}
Add this code after loading ajax content.
do this:
window.__sharethis__.load('inline-share-buttons', config);
and config your buttons with javascript.
The following should work with current ShareThis javascript. If sharethis js isn't loaded, the script loads it. If it is already loaded, ShareThis is re-initialized using the current URL so that it works on pages loaded via Ajax. Working fine for me when used with mounted method on Vue component.
const st = window.__sharethis__
if (!st) {
const script = document.createElement('script')
script.src =
'https://platform-api.sharethis.com/js/sharethis.js#property=<your_property_id>&product=sop'
document.body.appendChild(script)
} else if (typeof st.initialize === 'function') {
st.href = window.location.href
st.initialize()
}
Make sure you use your property id provided by ShareThis in the script src url.
In Drupal you can achieve this by adding following code:
(function($){
Drupal.behaviors.osShareThis = {
attach: function(context, settings) {
stLight.options({
publisher: settings.publisherId
});
// In case we're being attached after new content was placed via Ajax,
// force ShareThis to create the new buttons.
stButtons.locateElements();
}
};
});
I found the following solution on one of the addThis forums and it worked great for me.
I called the function as a callback to my ajax call. Hoep this helps
<script type="text/javascript">
function ReinitializeAddThis(){
if (window.addthis){
window.addthis.ost = 0;
window.addthis.ready();
}
}
...
$('#camps-slide .results').load(loc+suffix, function() {ReinitializeAddThis();});
</script>
Related
i'm trying to load my custom plugin on backend, e.g. datatables.js. But the JS is not working, i must refreshing the page once to make it works, there is also no error on the backend webbrowser console. How to solve this?
Any help would be much appreciated! thanks.
I don't think you should use document ready as this event is only fired once in the backend (unless you refresh the entire be). Instead you should use Neos.PageLoaded.
if (typeof document.addEventListener === 'function') {
document.addEventListener('Neos.PageLoaded', function(event) {
// Do stuff
}, false);
}
You can find documentation here:
http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/InteractionWithTheNeosBackend.html
May be your database.js is loaded before the dom a totaly loaded.
So i suggest to add a event onload to your body to load the Constructor or init function.
//jquery
$(document).ready(function(){
//INIT CONSTRUCTOR FUNCTION
});
//JS
document.body.onload = function(){
//INIT CONSTRUCTOR FUNCTION
};
I´ve noticed that Fancybox cant handle Pagelime autogenerated href links...
Here it works > http://miaumiauestudio.com/artistas/colmegna/
But here, after some user uploads some content and publishes it href turns in something like "cms-assets/images/820798.ale-seeber---st--oil-on-canvas---116-x"
and prevents Fancybox from working right!
http://miaumiauestudio.com/artistas/seeber/
Is there any solution?
I´m calling fancybox from "rel" attribute to avoid other errors,
but dont know how to make this href link address!
$(document).ready(function() {
$("a[rel=gallery]").fancybox();
});
Thanks in advance!
I have GWT application which is integrating with lightbox on AdaptivePayment API.
I am having trouble closing the cancel/return pages using the code provided:
dgFlow = top.dgFlow || top.opener.top.dgFlow;
dgFlow.closeFlow();
top.close();
I tried calling above code from inside/outside of the Iframe containing cancel/return pages however
failed to dismiss the flow. Could someone give me an example of the use case?
Thank!
I was calling:
var dgFlow = new $wnd.PAYPAL.apps.DGFlow({ trigger: 'invokeOverlay' });
JSNI methods are decalred inside an IFrame, so dgFlow was never a global variable.
$wnd.dgFlow = new $wnd.PAYPAL.apps.DGFlow({ trigger: 'invokeOverlay' });
Add the variable to the document Window to make it explicitly global.
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};
I am using FBML for rendering certain elements on the page such as the name of the user, profil pic, etc. However when there are many FBML elements on page, there is a slight delay which occurs before they are rendered - that's fine since AJAX calls are made to the server to fetch the data by the JS FB library. However, I want to hide the container DIV holding these element till the elements have finished loading, so is there any way to specify a JS callback function which gets fired when the FBML data has finished loading?
Try FB.Event.subscribe
FB.Event.subscribe('xfbml.render', function(response) {
//xfbml.render is fired when a call to FB.XFBML.parse() completes
});
There is another option for this. First, make sure you have the xfbml=0 parameter set on all embeds. Next, you can use this small bit of jQuery:
window.fbAsyncInit = function(){
FB.XFBML.parse(null,function(){
// all FB embeds are rendered as of this point
});
};