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

Question

[Виктор Таран]

1. Выибраю данные из бд
2. Строю табличку
3. Поскольку картинок несколько а мне нужна конкретная то foreach по картинкам.
Соответственно по клику в таблице мне нужна модалка, и сейчас она у меня получается кучу раз копируется с a href="#myModal'.($row[id])...
А вынести я ее за цикл не могу поскольку потеряется $row[id]
Собственно как это по нормальному делается в двух словах, для особо тугих.

Comments

[Павел Корнилов]

Делать таблицу, вешать на неё единый обработчик, а каждой ячейке присваивать айди или дата. В обработчике делегированно получать этот айди и выводить по нему модалку.

Рекомендация дана в стиле вопроса.

[0ffff0]

Виктор Таран, код покажете?

[Виктор Таран]

0ffff0, Покажу но без матюгов плиз ;) и да кстати PHP 5.6!

php

<?php
                                    
                                   $link = mysqli_connect("localhost", "4444", "88888", "nk_xml_import");
                                   /* проверка соединения */
                                   if (mysqli_connect_errno()) {  printf("Что-то пошло не так: %s\n", mysqli_connect_error());  exit();  }
                                   $query = "SELECT * FROM `kvartiri` WHERE `yaid` = 1924875 ORDER BY `building-name` ASC ";

                                   if ($result = mysqli_query($link, $query)) {
                                    $data=array();

                                    /* извлечение ассоциативного массива */
                                    while ($row = mysqli_fetch_assoc($result))   {
                                      $data[] = unserialize($row['ara']);

                                        // echo '<pre>',print_r($row).'</pre>';
                                


                                   $arr = unserialize($row["images"]);
                                    foreach($arr as $item){
                                      if ( array_key_exists("tag", $item) && $item["tag"] == "plan" ){

                                                                $path_parts = pathinfo($item["url"]);
                                                                 //  Если ссылка есть 
                                                                  // if (@fopen($item["url"], "r")) { 

                                                                  // Если файл есть   
                                                                    if(file_exists('upload/small/'.$path_parts["filename"].'.jpg')) {

                                       echo '<tr >
                                              <td style="vertical-align: middle;"> <a href="#myModal'.($row[id]).'" class="btns"> <img src="upload/small/'.$path_parts["filename"].'.jpg" width="60"   height="60" border="0" alt="нет изображения"></a></td>
                                              <td style="vertical-align: middle;">'.($row[rooms]).'</td>
                                              <td style="vertical-align: middle;">'.($row[area]).'</td>
                                              <td style="vertical-align: middle;">'.($row[floor]).' из '.($row[totalfloor]).'</td>
                                              <td style="vertical-align: middle;">'.number_format($row[price], 0, ',', ' ').' Руб.</td>
                                              <td style="vertical-align: middle;">'.number_format($row[pricemetr], 0, ',', ' ').' Руб.</td>


                                                        <!-- Модальное окно -->
                                                            <div class="modal fade " id="myModal'.($row[id]).'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                            <div class="modal-dialog modal-lg" role="document">
                                                                <div class="modal-content">
                                                                  <div class="modal-header">
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                      <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    <h4 class="modal-title">Квартира ID:'.($row[id]).' </h4>
                                                                  </div>
                                                                  <div class="modal-body pb--30 bt--30">
                                                                  <div>
                                                                      <div class="col-xs-7 col-xxs-12">
                                                                        <img src="upload/small/'.$path_parts["filename"].'.jpg" >
                                                                      </div>
                                                                        <div class="col-xs-5 col-xxs-12 ">
                                                                              <p> Жилищный комплекс : '.($row['building-name']).'</p>
                                                                              <p> Уникальный ID: '.($row[id]).'</p>
                                                                              <p> Количество комнат: '.($row[rooms]).'</p>
                                                                              <p> Площадь квартиры: '.($row[area]).'</p>
                                                                              <p> Этаж: '.($row[floor]).' из '.($row[totalfloor]).'</p>
                                                                              <p> Цена квартиры: '.number_format($row[price], 0, ',', ' ').' Руб.</p>
                                                                              <p> Цена метр: '.number_format($row[pricemetr], 0, ',', ' ').' Руб.</p>
                                                                              <p> Дата обновления: '.($row['last-update-date']).'</p>
                                                                              <p> Телефон: <a href="tel:Телефон: [phone]"> [phone]</a></p>
                                                                              <p >Почта для связи: <a href="mailto:'.($row[email]).'">'.($row[email]).'</a></p>
                                                                        </div>
                                                                  </div>
                                                                  </div>
                                                                  <div class="modal-footer" style="border-top: 0px solid #fbfbfb;" >
                                                                  </div>
                                                                </div><!-- /.модальное окно-Содержание -->
                                                              </div><!-- /.модальное окно-диалог -->
                                                            </div>
                                                        <!-- Модальное окно -->

                                           </tr>';
                                            }

                                        }
                                      } 
                                    }

                                    /* удаление выборки */
                                    mysqli_free_result($result);
                                  }
                                  /* закрытие соединения */
                                  mysqli_close($link);

                                  ?>

и кусок с футера

<script>

jQuery(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
  
  
  jQuery('.btns[href^=#]').click(function(e){
    e.preventDefault();
    var href = jQuery(this).attr('href');
    jQuery(href).modal('toggle');
  });

});  
</script>

[0ffff0]

Виктор Таран, эта штука у вас на боевом сервере выложена, или на тестовом?

[0ffff0]

Виктор Таран, логическая ошибка вот в этом месте

// Если файл есть   
      if(file_exists('upload/small/'.$path_parts["filename"].'.jpg')) {
      echo '<tr >и т.д.

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

[Виктор Таран]

0ffff0, это мой 4 пхп файл который я делаю ;)
с этим местом то как раз все именно так. табличка в бд сама приходит по АПИ
А вот картинки там хранятся только хрефами, так что приходится их дополнительно проверять уже тут пропускать всю

[0ffff0]

Виктор Таран, это место внутри форыча вложено, верно? Значит логично, что выводиться будет в цикле много-много-много раз,не?

[Виктор Таран]

0ffff0, да как-то это криво смотрится всяко же оно должно делаться не так через ... насколько я понимаю модалка должна лежать где-то в жопе негра и в 1 экземпляре. Как-то можно будет передать ей данные из цикла который закрылся выше ?
А если в модалке я сделаю еще и листалку это же вообще удавиться
так то оно работает

[0ffff0]

Виктор Таран, начинаю терять интерес, но все еще верю что все у вас выйдет, откуда бы ни было

Answer 1

[Артур Ш]

Внутри foreach добавьте условие по которому будете находить нужную картинку и внутри выводите модалку и потом можно прерывать цикл.