Как исправить конфликт скриптов в модальном окне и на сайте?

Question

[vladimirr89]

Ситуация такая. Есть сайт, в котором необходимо подгружать модальные окна при нажатии на кнопку "подробнее". Внутри этого окна должна быть возможность подписки на сайт с выбором опций, за которые отвечают скриптовые файлы. Так вот при подключении скриптов напрямую в модальное окно на самой странице скрипт перестает работать, а также после закрытия модального окна при последующей попытке его вызвать возникает ошибка "TokenMismatchException in VerifyCsrfToken.php line 68:" (в Network - файрбага). Если код убрать из модального окна, тогда они загружаются корректно, главная страница также, но внутри модального окна невозможно управлять некоторыми элементами из-за отсутствия скрипта.

Часть кода, отвечающая за подгрузку модалки:

this.getExternalData = function(href, toOpen, method, options) {
		var toOpen = toOpen,
			data = options ? options : {};

		$.ajax({
			url: href,
			type: method ? method : 'post',
			data: data,
			dataType: 'json',
			beforeSend: function() {
				self.showPreloader();
			},
			success: function(data) {
				$('#' + toOpen + ' .modalContent').html(data.content);
				if(data.header)
					$('#' + toOpen + ' .modalHeader').html(data.header);
				setTimeout(function() {
					self.openModal(toOpen);
					$.event.trigger('ajaxModalLoaded', toOpen);
				}, 300);
			},
			complete: function() {
				self.closePreloader();
			}
		});
	}

Полный код тут: test.dekoracio.by/public/js/script.js

Код, вызывающий модалку:

<a href="{{ route('ajax.logic', ['method' => 'getVebinar', 'param' => $vebinar->id]) }}" data-modal="lecturerModal" class="elem openModal vebinat-about_popup__link vebinat-about_popup__detail-link">подробнее</a>

Код модалки:

<p class="modalClose"  style="position:  absolute;right: 34px;font-size: 40px;cursor: pointer;">X</p>
<div class="container">
    <div class="row">
        <h1>вебинар</h1>
        <div class="vebinat-about-inner">
            @include('partials.bottomOrderFormAdditional')
            <div class="vebinat-about-info">
                <div class="teacher-info">
                    <img class="teacher-info_photo" src="/img/{{$model->lecturer_ws->image}}" alt="">
                    <div class="teacher-info-inner">
                        <p class="teacher-info_name">{{$model->lecturer_ws->name}}</p>
                        <p class="teacher-info_spec">Специализация: <span>{{$model->lecturer_ws->specialisation}} Преподавательский стаж: {{$model->lecturer_ws->experience}}</span></p>
                        <ul class="teacher-info_titul">
                          @if(!empty($model->lecturer_ws->description))
                            <li><span>•</span>{{$model->lecturer_ws->description}}</li>
                          @endif
                          @if(!empty($model->lecturer_ws->description2))
                            <li><span>•</span>{{$model->lecturer_ws->description2}}</li>
                          @endif
                          @if(!empty($model->lecturer_ws->description3))
                            <li><span>•</span>{{$model->lecturer_ws->description3}}</li>
                          @endif
                        </ul>
                    </div>
                </div>
                <div class="vebinar_detail-info">
                    <div class="vebinar_detail-info_head-block">
                        <div class="date">23 января 2018</div>
                        <div class="price">ВРЕМЯ: <span>{{$model->duration}}, {{$model->hours}} <i class="far fa-clock"></i></span></div>
                    </div>
                    <div class="vebinar_detail-info-inner">
                        <h3>Программа мероприятия</h3>
                        <h4 class="vebinar_detail-info_head">{{$model->title}}</h4>
                        <p class="vebinar_detail-info_text">{{$model->description}}</p>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Сам сайт находится тут test.dekoracio.by (блок Вебинары).

Answer 1

[Владислав Нагорный]

Почитай тут про csrf

<meta name="csrf-token" content="{{ csrf_token() }}">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

и тогда POST - запросы будут без ошибки

Answer 2

[iljaGolubev]

1.

скрипт перестает работать

- это не диагноз. это магия.
2.

выбором опций, за которые отвечают скриптовые файлы

- что за файлы? когда они подгружаются? может там события на элементах которые появляются на странице только после загрузки модального окна?
3. Используйте POST запросы только для изменения данных. Для отображения содержимого - GET.
4. TokenMismatchException - c POST запросом нужно передавать csrf-token

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})

6. Сделайте страницу, которая отображает содержимое модального окна и отправляет данные без аджакс. Убедитесь что работает.
7. Забудьте про jquery - используйте vuejs.

Comments

[Yan-s]

7. почему?

[iljaGolubev]

Yan-s, хотя бы ради изолированности компонентов, из-за отсутствия которой у вас проблемы.
Сравните код: https://laravel-news.com/jquery-vue

[Yan-s]

iljaGolubev, да не, у меня то всё ок. Просто если уже используется jquery, применяются готовые решения и никаких проблем нет, то и vue не нужен.