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

Question

[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

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

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

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

Вот здесь мне не понятно сколько методов у меня должно быть и как передовать события (я думал надо передовать также и старые события для того чтобы можно было отследить с ко кого див элемента была вызвана форма)

Answer 1

[Alex]

Есть методы 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' ) // ссылка внутри активного дива

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

Comments

[Alex]

Если я конечно правильно понял ваш вопрос ... ваш ❔

[symnoob]

1. да но ведь загруку модала у меня отдельнай метод, а на монипуляцию дива другой, да и события для отправки формуляра динамичное. Тобиш регестрируется каждый раз новое событие для каждой подгруженной форы. Так как формуляр подгружается асинхронно