Выполнение Ajax при скроллинге до определённого места

Есть код, который показывает кнопки с социальных сетей для публикации заметки.
Сейчас код срабатывает при нажатии на ссылку Опубликовать у себя в социальной сети
При нажатии делается запрос и в определённое место (Ajax ) вставляется необходимый javascript блок для отображения кнопок без перезагрузки страницы.
Но нужно ОБЯЗАТЕЛЬНО нажать кнопку!

Можно ли запустить «автонажатие» (либо сразу выполнить необходимый код) на эту ссылку при скроллинге до ссылки?

javascript
<script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	// Вешаем обработчик события "клик" на все ссылки с классом ajax_link
	$('a.ajax_link').click(function() {
	// Берем действие из атрибута data-action ссылки
	var action = $(this).data('action');
	// Ajax запрос к текущей страницы (а на ней наш сниппет) методом post
	$.post(document.location.href, {action: action}, function(data) {
		// Выдаем ответ
		$('#result').html(data);
	})
	// Не даем ссылке кликнуться 
	return false;
  })
})
</script>


размещение на странице
<div id="result">
<a href="#" data-action="helloWorld" class="ajax_link">Опубликовать у себя в социальной сети</a>    
</div>
сниппет
<?php
// Откликаться будет ТОЛЬКО на ajax запросы
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}

// Сниппет будет обрабатывать не один вид запросов, поэтому работать будем по запрашиваемому действию
// Если в массиве POST нет действия - выход
if (empty($_POST['action'])) {return;}

// А если есть - работаем
$res = '';
switch ($_POST['action']) {

	case 'helloWorld':
$id = 3330;
$res = $modx->getObject('modResource', $id);
$res = $res->get('content');
		break;
}

// Если у нас есть, что отдать на запрос - отдаем и прерываем работу парсера MODX
if (!empty($res)) {
  die($res);
}
код ресурса id 3330
<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js" async="async"></script>
<script src="https://yastatic.net/share2/share.js" async="async"></script>
<div class="ya-share2" data-services="vkontakte,facebook*,odnoklassniki,moimir,twitter,viber,whatsapp,telegram" async="async"></div>
Пример, как это сейчас работает — тут (сейчас всё работает только при клике на ссылку Опубликовать у себя в социальной сети).
Игорь
Игорь
07 декабря 2019, 11:44
modx.pro
1 575

Комментарии: 11

srs
srs
08 декабря 2019, 11:15
А в чем проблема? Что-то типо:
window.addEventListener('scroll', () => {
      const eventLine = document.getElementById('result');
        if (eventLine[0].top < document.documentElement.clientHeight) {
          // действия
        }
    })
Это не точный код, пишу без проверки синтаксиса. Тут главное, что общая суть ясна. Просто слушаем скрол и проверяем находится ли наш блок в видимой части окна браузера (там толи top элемента, толи bottom, поэкспериментируй сам).
    Игорь
    Игорь
    08 декабря 2019, 17:05
    Ладно, скажу честно, мне нужно было не только показать кнопки социальных сетей, но вывести комментарии от Facebook (загрузка комментариев сразу ведёт к определённым тормозам при открытии страницы) — в интернете ПОЛНО информации о том, как правильно сделать это для Wordpress — и ни одного — для MODx!
    Неужели никто не размещал у себя комментарии facebook или того же вконтакте на MODx?
    Решил проблему с выводом картинок и видео youtobe (загрузка только при попадании в фокус), но как решить проблему с Facebook — ума не приложу.
      srs
      srs
      08 декабря 2019, 21:58
      Ну ладно, если быть до конца честным, то (внезапно) указный выше подход все ровно будет работать. Нужно только в месте где написано «действия», написать свою логику и не важно, что она должна делать, эмулировать нажатие кнопки, вызывать загрузку комментариев, перезагружать страницу, заказывать пиццу, свой вариант.
      и ни одного — для MODx
      Может потому что это не особо сложно делать, а писать инструкцию к каждому чиху глупо.
        Игорь
        Игорь
        09 декабря 2019, 00:15
        Меня бесят «ограничения» Wordpress и нравится возможность вытворять в Modx всё, что душе угодно, но… как же сложно сделать то, что в wordpress делается обычной установкой плагина.
        Возвращаясь к теме скрипта.
        Мне необходимо однократное выполнение кода. Следовательно, надо как-то проконтролировать одноразовое выполнение. Но так как тут же используется lazy load — предвижу некоторые проблемы (т.е. просто убрать событие scroll не получится).
          srs
          srs
          09 декабря 2019, 00:33
          А что если взять и чуть выше создать отдельную переменную (пусть будет check). Она будет проверять, происходило нужное действе или нет и если действие происходило, то не выполнять больше ничего.
          Ну например:
          if (eventLine[0].top < document.documentElement.clientHeight && check == false) {
    // действия
   // и установка check = true, чтоб этот участок не срабатывал больше
   check = true;
}
    Баха Волков
    Баха Волков
    09 декабря 2019, 18:46
    Вопрос про js но виноват MODX, гениально
      Игорь
      Игорь
      09 декабря 2019, 22:03
      Я про недоступность многого, что снижает интерес к MODx
      Сам код javascript достаточно нетривиален

      Как сделал я (по совету выше)

        Pavel Zarubin
        Pavel Zarubin
        10 декабря 2019, 03:32
        Я про недоступность многого, что снижает интерес к MODx
        Обожаю эту фразу, особенно обожаю когда ко мне приходят клиенты от таких вот разработчиков, которые сказали им «В modx этого сделать нельзя»

        Открою секрет, modx написан на PHP, JS, HTML и CSS и все, что доступно в них, доступно и в modx
        Игорь
        Игорь
        09 декабря 2019, 22:21
        Я про недоступность многого, что снижает интерес к MODx
        Сам код javascript достаточно НЕтривиален (это не ошибка) (не вписал код)

        Не на всех устройствах срабатывает javascript.

        Как сделал я (по совету выше)

        <script>
window.addEventListener('scroll', function()  
{
if(!check)
{
// divMain - предыдущий div
var el = document.getElementById('divMain');

// большая точность не нужна ~ 1000 px

if (el.clientHeight-window.pageYOffset<1000)
{
// чтобы не запускалось больше
    check=true;

// "клик" по ссылке
document.getElementById("moiassilka").click();

}
}
   })
</script>
        Всё остальное — как в коде выше в самом начале поста (ссылку доделал). 

        <a href="#" data-action="helloWorld" class="ajax_link" id="moiassilka">Опубликовать у себя в социальной сети</a>


        Осталась проблема срабатывания javascript не на всех устройствах (разные браузеры?)
          Фарит
          Фарит
          10 декабря 2019, 06:16
          Я про недоступность многого, что снижает интерес к MODx
          Сам код javascript достаточно НЕтривиален (это не ошибка) (не вписал код)
          Не на всех устройствах срабатывает javascript.
          Какой нибудь новичок увидит это сообщение и сделает для себя вывод что javascript не работает на MODx и снизит свой интерес к MODxy.
            Игорь
            Игорь
            10 декабря 2019, 09:56
            Общаясь, в своё время, на форуме одной очень известной игры по танкам, я первое время удивлялся излишней прямолинейности, списывая всё на быстроту инстинктов (увидел врага — стреляй не раздумывая)…
            В чём может быть проблема с кодом (я так понял — такая версия браузера)? Может есть другой вариант реализации?
            if (el.clientHeight-window.pageYOffset<1000)
{
// чтобы не запускалось больше
    check=true;
// "клик" по ссылке
document.getElementById("moiassilka").click();
}
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        11