Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

XF 2.0 Работа ajax в overlay

Статус
В этой теме нельзя размещать новые ответы.
xsacha

xsacha

Только чтение
Сообщения
1,262
Реакции
1,386
Баллы
11,350
Подскажите пожалуйста возможно кто то сталкивался с такой проблемой как выполнение скриптов во в сплывающем окне data-xf-click="overlay" не которые скрипты подгружаются, но не выполняются, могут кнопки не нажиматься например и т.д.
Размещаю скрипты так:
  • <style></style> - не работает
  • <xf:js></xf:js> - валит ошибки как правил встроенный js
 
Сортировка по дате Сортировка по голосам
Позитивный голос 0 Негативный голос
Позитивный голос 0 Негативный голос
BINGO_SHARK написал(а):
И вообще, подгружать всё нужно с файлов.
Нажмите для раскрытия...
ну и с шаблонов можно
Код: 
<xf:css src="style.less" />
<xf:js><xf:include template="script.js" /></xf:js>
но то что скрипт одно, а таблица стилей другое, однозначно :)
 
  • Мне нравится
Реакции: Hope
Позитивный голос 0 Негативный голос
Skaiman написал(а):
ну и с шаблонов можно
Нажмите для раскрытия...
Если три строки и шаблон специализированный - можно и нужно. Если кода больше и встречается чаще - лучше выносить в файл, так он кешируется в браузере, а рост запросов нивелируется http/2
 
Позитивный голос 0 Негативный голос
Да я просто ошибся <script></script>, когда писал.
BINGO_SHARK написал(а):
Значит там ошибка. Логично же. И вообще, подгружать всё нужно с файлов.
Нажмите для раскрытия...
Не логично без overlay все работает и подгружается все из шаблонов, пробовал все размещать в macros все равно не срабатывает скрипт, без overlay работает все отлично.

CrazyHackGUT написал(а):
А с хрена ли должен работать? style для CSS, вообще-то.
Нажмите для раскрытия...
Всю жизнь работал и сейчас работает, не поверишь, но не в этом суть.

Skaiman написал(а):
<xf:js><xf:include template="script.js" /></xf:js>
Нажмите для раскрытия...
Я подключаю шаблон так
Код: 
<xf:include template="hal_dino_js" />
а в нем скрипт
Код: 
<xf:js></xf:js>
все работает тоже нормально
 
Последнее редактирование модератором:
Позитивный голос 0 Негативный голос
xsacha написал(а):
Я подключаю шаблон так
<xf:include template="hal_dino_js" />
а в нем скрипт
<xf:js></xf:js> все работает тоже нормально
Нажмите для раскрытия...
ну это одно и тоже, просто мне так больше нравится :) не захламлять сам скрипт лишними тегами :)

Может скрипт на jquery, а в окне не поддтягивается она, попробуй открыть эту ссылку не в окне всплывающем, а в новой вкладке, просто страницу
 
Последнее редактирование модератором:
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Может скрипт на jquery, а в окне не поддтягивается она, попробуй открыть эту ссылку не в окне всплывающем, а в новой вкладке, просто страницу
Нажмите для раскрытия...
Пробовал он подтягивается но не срабатывает либо пишет ошибка jquery встроенная в XF или просто без ошибок но нечего не срабатывает, если открыть в обычном окне все работает отлично.
 
Позитивный голос 0 Негативный голос
xsacha написал(а):
Пробовал он подтягивается но не срабатывает либо пишет ошибка jquery встроенная в XF или просто без ошибок но нечего не срабатывает, если открыть в обычном окне все работает отлично.
Нажмите для раскрытия...
Может скрипт не работает на этой версии jquery, для более ранних версий
 
Позитивный голос 0 Негативный голос
Я не первый раз с таким сталкиваюсь на обычной странице все работает в оверлее нет, если скрипт старый почему тогда он везде не пишет ошибку, а только в оверлеи ? Я думаю это все связано с загрузкой ajax в оверлее.
 
Позитивный голос 0 Негативный голос
наверное нет, вот так делаю все
Код: 
<xf:form action="{{ link('games/save', $mill) }}" ajax="true" class="block" data-redirect="off" >
 /*тут данные*/
   <xf:submitrow icon="save" sticky="true" />
</xf:form>
Может конечно чего и не хватает.
 
Позитивный голос 0 Негативный голос
JavaScript: 
<script>
let dinoOriginal = document.querySelector('.dino--original');
let fieldEl = document.querySelector('.field');
let scoreEl = document.querySelector('.score');
let startEl = document.querySelector('.start');
let timeEl = document.querySelector('.time');
let dinosFrag = document.createDocumentFragment();
let max = 7;
let dinos = [];
let score = 0;
let isTouch = true;
let isRunning = false;
let time = 60;
let timer = null;
    
function shake() {
    fieldEl.classList.add('shake');

    fieldEl.addEventListener('animationend', () => {
        fieldEl.classList.remove('shake');
    });
}

function setTimer() {
    time = 60;
    timeEl.innerText = time;

    timer = setInterval(function () {
        time = time - 1;
        timeEl.innerText = time;

        if (time <= 0) {
            gameOver();
        }
    }, 1000);
}

function start() {
    for (let i = 0; i < dinos.length; i++) {
        let dinoSVG = dinos[i].querySelector('#Dino');
        dinoSVG.style.transform = 'translateY(80%)';
        dinoSVG.style.animation = 'peeking 5s infinite';
        dinoSVG.querySelector('#DeadEyes').style.display = 'none';
        dinoSVG.querySelector('#Tongue').style.display = 'none';
        dinoSVG.querySelector('#AngryEyebrows').style.display = 'none';
        dinoSVG.style.animationDelay = (1000 + (i * 700)) + Math.floor((Math.random() * 4000)) + 'ms'
    }

    if (!isRunning) {
        setTimer();
        startEl.classList.add('hide');
        score = 0;
        scoreEl.innerText = score;
        isRunning = true;
    }
}

function gameOver() {
    clearInterval(timer);
    isRunning = false;
    startEl.classList.remove('hide');

    for (let i = 0; i < dinos.length; i++) {
        let dinoSVG = dinos[i].querySelector('#Dino');
        dinoSVG.style.transform = 'translateY(80%)';
        dinoSVG.style.animation = 'slowly-peeking 10s infinite';
        dinoSVG.style.animationDelay = (Math.random() * 5000) + 'ms';
    }
}

function init() {
    for (let i = 0; i < max; i++) {
        let dino = dinoOriginal.cloneNode(true);
        let dinoSVG = dino.querySelector('#Dino');
        let dir = [1, -1][Math.floor(Math.random() * 2)];
        let showHorn = (Math.random() * 10) > 5;
        let isGentleman = (Math.random() * 10) > 9;

        dino.querySelector('svg').style.transform = `scaleX(${dir})`;

        dinoSVG.style.animation = 'slowly-peeking 8s infinite';
        dinoSVG.style.animationDelay = (Math.random() * 5000) + 'ms';

        dinoSVG.querySelector('#DeadEyes').style.display = 'none';
        dinoSVG.querySelector('#Tongue').style.display = 'none';
        dinoSVG.querySelector('#AngryEyebrows').style.display = 'none';
        dinoSVG.querySelector('#TopHat').style.display = 'none';
        dinoSVG.querySelector('#Monocle').style.display = 'none';

        if (showHorn) {
            dinoSVG.querySelector('#Horn').style.display = 'block';
        } else {
            dinoSVG.querySelector('#Horn').style.display = 'none';
        }

        if (isGentleman) {
            dinoSVG.querySelector('#TopHat').style.display = 'block';
            dinoSVG.querySelector('#Monocle').style.display = 'block';
            dinoSVG.querySelector('#Horn').style.display = 'none';
        }

        dino.addEventListener('animationiteration', function (ev) {
            let dir = [1, -1][Math.floor(Math.random() * 2)];
            let showHorn = (Math.random() * 10) > 5;
            let isGentleman = (Math.random() * 10) > 9;

            dino.querySelector('svg').style.transform = `scaleX(${dir})`;

            dinoSVG.querySelector('#DeadEyes').style.display = 'none';
            dinoSVG.querySelector('#Tongue').style.display = 'none';
            dinoSVG.querySelector('#AngryEyebrows').style.display = 'none';
            dinoSVG.querySelector('#Eyes').style.display = 'block';
            dinoSVG.querySelector('#TopHat').style.display = 'none';
            dinoSVG.querySelector('#Monocle').style.display = 'none';

            if (showHorn) {
                dinoSVG.querySelector('#Horn').style.display = 'block';
            } else {
                dinoSVG.querySelector('#Horn').style.display = 'none';
            }

            if (isGentleman) {
                dinoSVG.querySelector('#TopHat').style.display = 'block';
                dinoSVG.querySelector('#Monocle').style.display = 'block';
                dinoSVG.querySelector('#Horn').style.display = 'none';
            }
        });

        function whack(ev) {
            if (isRunning) {
                let pointsEl = dino.querySelector('.points');

                if (dinoSVG.querySelector('#Horn').style.display === 'none') {
                    score = score + 60;
                    dinoSVG.querySelector('#DeadEyes').style.display = 'block';
                    dinoSVG.querySelector('#Tongue').style.display = 'block';
                    dinoSVG.querySelector('#Eyes').style.display = 'none';

                    pointsEl.innerText = '60';
                } else {
                    score = score - 20;
                    score = Math.max(0, score);
                    dinoSVG.querySelector('#AngryEyebrows').style.display = 'block';

                    pointsEl.innerText = '-20';
                    pointsEl.classList.add('points--red');

                    shake();
                }

                pointsEl.classList.add('fadeUp');
                pointsEl.addEventListener('animationend', () => {
                    pointsEl.classList.remove('fadeUp');
                    pointsEl.classList.remove('points--red');
                });

                scoreEl.innerText = score;
            }
        }

        if (isTouch) {
            dinoSVG.addEventListener('touchend', whack);
        } else {
            dinoSVG.addEventListener('click', whack);
        }

        dinosFrag.appendChild(dino);
        dinos.push(dino);
    }

    fieldEl.appendChild(dinosFrag);
    dinoOriginal.remove();

    startEl.addEventListener('click', start);
}

window.addEventListener('load', function () {
    isTouch = document.querySelector('html').classList.contains('touch');
    init();
});
</script>
 
Позитивный голос 0 Негативный голос
Если в таком виде как сейчас ее нет, просто разваливается форма в оверлеи, если с тегами <xf:js>
JavaScript: 
Uncaught SyntaxError: Identifier 'dinoOriginal' has already been declared
    at <anonymous>:1:1
    at m (jquery-3.3.1.min.js?_v=c670d278:2)
    at Function.globalEval (jquery-3.3.1.min.js?_v=c670d278:2)
    at k (core-compiled.js?_v=c670d278:48)
    at core-compiled.js?_v=c670d278:114
    at core-compiled.js?_v=c670d278:48
    at Object.c [as load] (core-compiled.js?_v=c670d278:85)
    at Object.setupHtmlInsert (core-compiled.js?_v=c670d278:46)
    at f (core-compiled.js?_v=c670d278:114)
    at core-compiled.js?_v=c670d278:115
Форма так же развалиная, но еще вылазиет эта ошибка. Если без оверлея будет все отлично работать.
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
xsacha написал(а):
Identifier 'dinoOriginal' has already been declared
Нажмите для раскрытия...
У вас уже объявлен индетификатор
let dinoOriginal = document.querySelector('.dino--original');
Попробуйте заменить на var изначально, вам тут не ES-2015. Откуда вы вообще взяли данный js
 
Позитивный голос 0 Негативный голос
Да ошибка пропала но форма так и осталось развалиная, там таймер при нажатии на кнопку должен работать, но все в оверлее на работает. Думаю врятли запустится, хотя странно почему на обычной странице все работает и ошибок нет...
Да в интернете, есть много ресурсов начиная от свободного кода до git, что мало мест где найти, свинья всегда грязи найдет (а то будут тут обливания) я не профи, а любитель капитан
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
Позитивный голос 0 Негативный голос
Captain написал(а):
я разве обливал грязью кого то хоть раз просто так и без повода?
Нажмите для раскрытия...
Прошу извинения просто слилось все в одно, к тебе относилось это "я не профи, а любитель капитан" остальное для троллей )))
 
Позитивный голос 0 Негативный голос
Статус
В этой теме нельзя размещать новые ответы.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4
Назад
Сверху Снизу