Xandr24
@Xandr24
учиться и еще раз учиться

Как динамически получать данные из бд и подтягивать в модальные окна?

Добрый день, подскажите пожалуйста данную проблему!
У меня на страинце идет отрисовка данных из БД по дивам, тобишь есть 10 строк данных (divов) которые отображают с помощью цикла инфу из БД. Также есть кнопка в каждом dive, это кнопка вызывает модальное окно, то есть также как и div модальных окон в итоге 10, и каждое модальное содержит некоторую инфу также из БД. Инфа в дивы рендерится замечатльно, то есть взял из бд 10 строк данных и они подтянулись циклом каждое в свой див, но вот когда вызываю модальное окно, там почему та инфа всегда одна, а именно из верхнего дива, а должна быть в каждом модальном окне своя инфа как и в каждом диве. Открываю f12 захожу в эти дивы и раскрываю DOM, и вижу что в каждом модальном окне инфа своя, то есть циклом все таки норм прошлось и везде свои данные присвоились, но при фактическом вызове модальных окон повторюсь везде одна и таже инфа О_о
Что с этим поделать? Мысли есть но сути не пойму до конца как убрать данную ошибку в коде, получается так что какую кнопку не нажми то инфа везде одна и таже, тобишь кнопка воспринимается как одна и таже в каждом Диве, добавил кнопкам id который берется рендерингом, все норм, все присваивается рандомно.
Вот упрощенный код
<% for(var i = 0; i < result.length; i++) {%>     <-----------цикл для рендеринга ejs
    <div class="profile">         <-----------------  выводится циклом на каждую страницу по 10
        <div class="details">
              <h3 class="username"><%=result[i].dataValues.username%></h3>
        </div>
        <div class="btn">    
          <span>
              <button class="button" id="<%=result[i].dataValues.username%>" onclick="show('block')">View Usernames</button>   <------------ кнопка вызова модального окна
          </span>
        </div>

//////Модальное окно\\\\\\
        <div id="modal-filter" onclick="show('none')"></div>
        <div id="modal-window">
          <div id="view-usernames">
            <h3 id="view">View Usernames <%=result[i].dataValues.username%></h3> <------ вот эта инфа не рендерится правильно а всегда одна и та же, на кнопку какого дива не нажать
            <hr>
          </div>
          <div id="get-usernames">
            <div class="get" id="get">
              <span class="us-name">Username</span>
              <input type="text" value="<%=result[i].dataValues.username%>" class="input-usernames" id="input">
            </div>
          </div>
////Закрытие модального окна\\\\\
          <div class="close">
            <button id="modal-close" onclick="show('none')">Close</button>
          </div>
        </div>
</div>
   <%}%>


вот как вызывается модальное окно
<script>
      var show = function(state){
        document.getElementById('modal-window').style.display = state;
        document.getElementById('modal-filter').style.display = state;

      }
  </script>
  • Вопрос задан
  • 947 просмотров
Решения вопроса 2
lepard
@lepard
function selfDevelopment() { selfDevelopment() }
Ну так, а где вы связывали кнопки с модальными окнами?
Ответ написан
@vaajnur
битриксоид
Пригласить эксперта
Ответы на вопрос 1
Xandr24
@Xandr24 Автор вопроса
учиться и еще раз учиться
Мытарства помогли, повесил обработчик на button (их не один на сайте, там есть разные кнопки, но это без разнице так как рендеринг идет на модальное окно а оно открывается только с одной кнопки). Далее присваиваем переменную id из атрибута id (id идет с помощью ejs в html) и записываем в нужное место в данном случае в div с id view полученный результат, и он всегда тот который нужен так как разные кнопки получили свой уникальный id
$(document).ready(function(){
$("button").on("click", function(){
var id = $(this).attr("id");
//alert(id);
$("#view").html(id);
})
});
Всем спасибо кто поомгал
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы