Bootstrap Modal: отображается неверный контент - PullRequest
Новая
       3

Bootstrap Modal: отображается неверный контент

0 голосов
/ 08 мая 2019

У меня есть цикл for в цикле for. Первый цикл for проходит через каждое здание, а второй проходит через каждое здание с предварительным условием (требуется отображать только здания с предварительными условиями). Как только это будет сделано, я получу 4 здания, каждое со своим именем, идентификатором, описанием и опцией сборки. Моя проблема в том, что когда я щелкаю по сборке, мой модал всплывает, но показывает только содержимое для первого здания, независимо от того, какую кнопку сборки здания я нажимаю. Все, что я пытаюсь отобразить в модале, это название здания, необходимые ресурсы и подтверждение для строительства, но я получаю данные только из первого здания 

 <div class="buildingsWithPrerequisite">
        <% for(var i = 0; i < newBuildingInfo.length; i++){ %>
            <% for(var j = 0; j < buildings_with_pre.length; j++){ %>
                <% if(newBuildingInfo[i][0] == buildings_with_pre[j][0]){ %>
                    <li>

                        <%= newBuildingInfo[j][0] %> <br>    <!-- Building Id -->
                        <%= newBuildingInfo[j][1] %> <br>    <!-- Building Name -->
                        <%= newBuildingInfo[j][2] %> <br>    <!-- Building Description -->

                        <!-- If requiremnt is met, color green, if not then red-->
                        <% if(buildings_with_pre[j][3] == false) { %>
                            <p style="color:red;">Requirement:
                            <%= buildings_with_pre[j][1] %>
                            Level <%= buildings_with_pre[j][2] %> </p>
                            <button class="btn btn-secondary" disabled>Build</button>
                        <% } else {%>
                            <p style="color:green;">Requirement: 
                            <%= buildings_with_pre[j][1] %>
                            Level <%= buildings_with_pre[j][2] %> </p>

                                <!-- Build Button with Popup-->
                                <form method="POST" action="/building-construct">
                                    <button type = "button" id="buildButton" class = "btn btn-success" data-toggle="modal" data-target="#constructWithPreBuilding" onclick="myfunc()"> Build </button>
                                    <div class="modal fade" id="constructWithPreBuilding" role="dialog" aria-labelledby= "exampleModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel"> <%= newBuildingInfo[j][1] %> </h5> <!-- Building Name-->
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                </div>
                                                <div class="modal-body">
                                                    <%= newBuildingInfo[j][2] %> <br>    <!-- Building Description -->
                                                    Time: <br>
                                                    Cost: <br>
                                                </div>

                                                <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal"><!--Close--> <%= newBuildingInfo[j][0] %></button>
                                                <% if(can_build_with_pre[j] == true){ %>
                                                    <input type="hidden" name="buildingId" value = <%= buildings_with_pre[j][0] %>>
                                                    <input type="hidden" name="locationId" value = <%= location %>>
                                                    <input type = "Submit" class = "btn btn-success constructsBuilding" value = "Construct" > 
                                                <% } else { %>
                                                    <button type = "button" class="btn btn-secondary" disabled> Not Enough Resources</button>
                                                <% } %> 
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </form>
                        <% } %>
                    </li>
                <% } %>
            <% } %>
        <% } %>
        </div>

1 Ответ

0 голосов
/ 08 мая 2019

Из того, что я вижу, есть проблема с идентификаторами.В каждом цикле for ваш код ejs генерирует модальное значение для каждого здания.В результате у вас есть много модалов, содержащих разные данные, но с одинаковым Id constructWithPreBuilding.Кроме того, эти модалы запускаются кнопками с одинаковыми id="buildButton" и data-target="#constructWithPreBuilding".
Каждый модал и кнопка должны иметь уникальный идентификатор.
Первое, что я бы изменил, - это присвоить каждому модалу идентификатор, такой как Building Id 

<div class="modal fade" id="<%= newBuildingInfo[j][0] %>" role="dialog" aria-labelledby= "exampleModalLabel">

, и сделайте те же изменения для кнопок 

<button type = "button" id="bB<%= newBuildingInfo[j][0] %>" class = "btn btn-success" data-toggle="modal" data-target="#<%= newBuildingInfo[j][0] %>" onclick="myfunc()"> Build </button>

Надеюсь, что это поможет вам или даст вам аналогичную идею.

...