Поделиться этой кнопкой не работает на страницах, загруженных через ajax

Question

Я пытаюсь использовать эту кнопку на странице, которая загружается через ajax. Кнопки не отображаются. Пожалуйста помоги.

С уважением, Панкадж

Answer 1

После добавления нового контента в дом, позвоните

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

Статья другая другая

Answer 2

Обновлено 09/2017 Ответ

Объект stButtons больше не существует, теперь вы можете использовать

window.__sharethis__.initialize()

Для повторной инициализации кнопок

Answer 3

Обновлено 03/2020 Ответ

Как указано в ответе The Ape выше: /questions/34286796/podelitsya-etoj-knopkoj-ne-rabotaet-na-stranitsah-zagruzhennyih-cherez-ajax/34286807#34286807

window.__sharethis__.initialize()

Это по-прежнему работает, однако есть уловка, если ваш URL-адрес изменяется в запросе AJAX, вам необходимо убедиться, что URL-адрес, который вы хотите поделиться, установлен как атрибут данных (data-url) на встроенном разделении div. Вы также можете обновить заголовок, используяdata-title атрибут.

<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>

Пример использования:

Я использую функцию WordPress/PHP для создания определенного контента на основе строки запроса. Если вы не установитеdata-url Атрибут ShareThis div, ShareThis будет содержать первый URL-адрес, по которому щелкнули для совместного использования, независимо от обновления URL-адреса в запросе AJAX.

Answer 4

Это решение также будет работать для основанных на NodeJS сред, таких как Meteor.

stButtons.locateElements();

необходим в отображаемом обратном вызове шаблона, чтобы кнопки shareThis появлялись при перенаправлении страницы.

Answer 5

Я столкнулся с той же проблемой, что и sharethis и Ajax-нумерация страниц. Кнопки не показывались после сообщений, загруженных Ajax, поэтому я искал и нашел это. Я только что добавил функцию stButtons.locateElements(); на Аяксе success:

что-то вроде success:stButtons.locateElements();

Надеюсь, это будет полезно для таких, как я.

Спасибо ибнул

Answer 6

Для нового API у меня сработало следующее решение

if (__sharethis__ && __sharethis__.config) {
    __sharethis__.init(__sharethis__.config);
}

Добавьте этот код после загрузки содержимого AJAX.

Answer 7

Если вы загружаете только скрипт вместо кнопки, сделайте это:

window.__sharethis__.load('inline-share-buttons', config);

Answer 8

Следующее должно работать с текущим javascript ShareThis. Если sharethis js не загружен, скрипт загружает его. Если он уже загружен, ShareThis повторно инициализируется с использованием текущего URL-адреса, чтобы он работал на страницах, загруженных через Ajax. У меня отлично работает при использовании с mounted в компоненте Vue.

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()
}

Убедитесь, что вы используете свой идентификатор свойства, предоставленный ShareThis, в URL-адресе скрипта src.

Answer 9

В Drupal вы можете добиться этого, добавив следующий код

(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();
}
};
});

Answer 10

На одном из форумов addThis я нашел следующее решение, и оно отлично сработало. Я вызвал функцию как обратный вызов к моему вызову ajax. Hoep это помогает

<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>