@symnoob

Как можно реализовать асинхронную под грузку с дальнейшими событиями и логикой на яваскрипте?

Всем Привет,

У меня есть очень больной вопрос по поводу событий, ооп и асинхронности в ява скрипте.

Ситуацию мне будет очень сложно объяснить поэтому попытаюсь, но если что кому не понятно, пожалуйста оставьте комментарий, попытаюсь более подробно описать

В общем есть у меня несколько див элементов, в этих элементах находятся некоторые данные и линк для открытия модального окна, примерно выглядит так:
<div class="myDiv" data-link="/url/to/myForm/1"> <a>open modal></a></div>
<div class="myDiv" data-link="/url/to/myForm/2"> <a>open modal></a></div>
<div class="myDiv" data-link="/url/to/myForm/3"> <a>open modal></a></div>
<div class="myDiv" data-link="/url/to/myForm/4"> <a>open modal></a></div>

для подгузки формы используется линк, который присвоен каждому див элементу через атрибут: data-link

когда я кликаю на этот линк открывается модальное окно и туда подгружается форма через аякс.
теперь это форма должна отправится опять через аякс на сервер для валидации.

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

Если нет то тогда форма должна вернутся в то же самое модальное окно ну и шема повторяется пока всё не будет успешно с валедировано ну а после успешно валидации должен тоже манипулироваться дом элемент с которого была вызвана эта форма.

Вот здесь мне не понятно сколько методов у меня должно быть и как передовать события (я думал надо передовать также и старые события для того чтобы можно было отследить с ко кого див элемента была вызвана форма)
  • Вопрос задан
  • 46 просмотров
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Есть методы querySelector и querySelectorAll. Обычно используются так:
document.querySelector('div.myDiv') // поиск элемента по всей странице

Но поиск можно ограничить:
const context = document.querySelector('div.myDiv')
context.querySelector( ... ) // Поиск чего-то в пределах заранее выбранного элемента.

Таким образом, вы можете завести где-либо переменную, в которую положить активный див и отталкивать от него
const context = document.querySelector('div.myDiv')
context.querySelector( 'form' ) // форма внутри активного дива
context.querySelector( 'a' ) // ссылка внутри активного дива


Заводите, контекст, а дальше выводите/прячете форму/модалки делаете что угодно, но отталкиваетесь исключительно от этой переменной.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы