Как получить модальное окно с айди?

Question

[Night386]

Подскажите, имеется таблица

<tbody class="tbody-id">
							{% for row in rows %}
								{% set lindex = loop.index %}
								
								<tr class="{{row.__auto_set}}">
									{% for k,v in orders %}
										<td {% if in_array(k, ['id', '_deal_name']) %} %}width="1"{% endif %} style="position:relative">
											{% if k == 'num' %}

												<span class="num">{{ ((page-1) * pagelimit) + lindex }}</span>
											{% elseif k == 'id' %}
<a class="btn btn-primary" data-id="{{row.id}}" role="button" data-toggle="modal" href="#modal-example">
        узнать айди
    </a>
												<div class="edit"><a href="{{url}}?edit={{row.id}}">{{row[k]}}</a></div>

Пытаюсь сделать модальное окно чтобы при нажатии на кнопку появляется окно с айди данного обьекта(появляется 55) - но вот при нажатии на вторую третью кнопку в таблице везде показывает только один айди(55) , подскажите почему он передает только первый айди? а остальные нет

<a class="btn btn-primary" data-id="{{row.id}}" role="button" data-toggle="modal" href="#modal-example">
        узнать айди
    </a>

<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- заголовок -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">TEST</h4>
            </div>
      
            <div class="modal-body">
                <p>
              {{row.id}}
                </p>
            </div>
         
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить</button>
            </div>
        </div>
    </div>
</div>

Comments

[Rst0]

endif и endfor отменили или это не весь код?

<tbody class="tbody-id">
 {% for row in rows %}
     {% set lindex = loop.index %}
        <tr class="{{row.__auto_set}}">
                  {% for k,v in orders %}
                    <td {% if in_array(k, ['id', '_deal_name']) %} %}width="1"{% endif %} style="position:relative">
                      {% if k == 'num' %}
                            <span class="num">{{ ((page-1) * pagelimit) + lindex }}</span>
                      {% elseif k == 'id' %}
                             <a class="btn btn-primary" data-id="{{row.id}}" role="button" data-toggle="modal" href="#modal-example">узнать айди</a>
                             <div class="edit"><a href="{{url}}?edit={{row.id}}">{{row[k]}}</a></div>
                      {% endif %}
                  </td>
               {% endfor %}
         </tr>
{% endfor %}
</tbody>

[Night386]

Rst0, чет вообще не работает :( почему то модальное окно не принимает row.id только первый

[Rst0]

Night386,
потому что вы передаете последний row.id

<div class="modal-body">
                <p>
              {{row.id}} 
                </p>
            </div>

он не имеет никакого отношения к тому id, что содержится в кнопке.

[Rst0]

у вас twig прописывает в модальное окно еще на сервере этот id и это не правильно.
его нужно на клиенте получить в момент открытия окна и прописать

Answer 1

[Rst0]

Различное содержимое модального окна в Bootstrap 5
пример передачи разных параметров в одно и то же окно:

Comments

[Night386]

стоит bs 3.3.7 но все равно не получается row id выводить

[Rst0]

var exampleModal = document.getElementById('exampleModal');   // получаем окно
exampleModal.addEventListener('show.bs.modal', function (event) { //слушаем событие открытия
  var button = event.relatedTarget;                          // получаем нажатую кнопку
  var recipient = button.getAttribute('data-id');            //получаем атрибут, в котором записан id
  var modalTitle = exampleModal.querySelector('.modal-title');        // хочу вставить в title - нахожу title
  var modalBodyInput = exampleModal.querySelector('.modal-body input'); // еще хочу чтоб в input был id
  modalTitle.textContent = 'Запрос цены ' + recipient;  // вставляю в title текст + найденный id
  modalBodyInput.value = 'Интересует ' +recipient;   // вставляю в input текст + найденный id
})

[Night386]

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

<a class="btn btn-primary" href="#modal-example" data-id="{{row.id}}"  data-row="{{row.id}}" id="buttonModal" role="button" data-toggle="modal" >
        узнать айди {{ row.id }}
    </a>

то айди выводится правильно сбоку просто "возле узнать айди"

может чтото с модальным окном? или моей кнопкой?

еще пробовал так , но все рано такой же эффект

<a data-id="{{row.id}}"><button type="button" data-id="{{row.id}}" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Заметка
</button></a>

[Rst0]

странно

ничего странного, twig работает на сервере, а повлиять на вывод пытаемся на клиенте

[Night386]

Rst0, это я понимаю, но что-то никак вообще. все перепробовал

[Rst0]

это я понимаю,

Отлично! Значит пол дела сделано. Переходим в контрнаступление.
поэтапно:
1)

<div class="modal-body">
                <p>
              {{row.id}}  //  это нужно удалить - мы это заполним при помощи JS в момент вызова окна
                </p>
            </div>

вот так:
<div class="modal-body"> </div>

[Night386]

Rst0, сделал :)))

[Rst0]

чтоб не зависеть от bootstrap пишем свою маленькую функцию для заполнения модального окна:

window.onload = () =>{ 
const modalBody = document.querySelector('#modal-example >  .modal-body');
const insertModal = (id) => {
      modalBody.innerHTML = '<p>'+id+'</p>';
} 
}

и добавляем в конец шаблона, сразу после кода модального окна

<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- заголовок -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">TEST</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить</button>
            </div>
        </div>
    </div>
</div>
<script>
window.onload = () =>{ 
const modalBody = document.querySelector('#modal-example >  .modal-body');
const insertModal = (id) => {
      modalBody.innerHTML = '<p>'+id+'</p>';
} 
}
</script>

[Night386]

Rst0, все сделал точно по инструкции - просто пустое окошко , ну точнее только - заголовок окна и две кнопки ( закрыть , сохранить)

[Rst0]

По задумке кнопки в таблице содержат в атрибуте data-id разные номера
примерно так упрощенно:

<a class="btn btn-primary" data-id="1" role="button" data-toggle="modal" href="#modal-example">узнать айди</a>
<a class="btn btn-primary" data-id="2" role="button" data-toggle="modal" href="#modal-example">узнать айди</a>
<a class="btn btn-primary" data-id="2" role="button" data-toggle="modal" href="#modal-example">узнать айди</a>
<a class="btn btn-primary" data-id="3" role="button" data-toggle="modal" href="#modal-example">узнать айди</a>

чтоб при нажатии на кнопку кроме bootstrap сработала наша функция добавим на все нужные кнопки атрибут события
onclick
вот так:

<a onclick="insertModal( this.dataset.id )" class="btn btn-primary" data-id="1" role="button" data-toggle="modal" href="#modal-example">узнать айди</a>

что это значит?

insertModal( this.dataset.id ) 
// вызвать при клике функцию insertModal и предать ей собственный атрибут data-id

[Night386]

Rst0, сделал - все равно блин пустое

[Night386]

Rst0, в консоле

Uncaught ReferenceError: insertModal is not defined
    at HTMLAnchorElement.onclick

[Rst0]

Да, забыл что там onload раньше срабатывает.
код внутри script такой:

const modalBody = document.querySelector('div.modal-body');
function insertModal(id){
      modalBody.innerHTML = '<p>'+id+'</p>';
}

[Rst0]

Собственно вот:

[Night386]

Rst0, в консоле стали отображаться ID корректно!!! только в модальном все пусто

[Rst0]

Я же пример сделал все выводится - можно посмотреть на codepen

[Night386]

Rst0, Да я видел, в консоле все четко отображается а вот в модальном почему-то нет параграфа с айда, буду разбираться!!!! в любом случае тебе огромное спасибо!!!!! даже незнаю сам в чем проблема тут

[Rst0]

так через data можно полностью заполнить модальное окно:
data-title, data-body, data-action и т.д.

[Night386]

Rst0, это через jquery?

[Night386]

Rst0, даааааааааа получилось!!!! огромное тебе спасибо!!!!!!!!!!!!!!!! прям отдуши!!!! а еще вопрос такой, а можно ли таким же методом вывести данные из бд ? например если прописать row.name или такое не работает?

[Rst0]

нет наша функция не зависит от jquery

const modalTitle = document.querySelector('div.modal-title');  
const modalBody = document.querySelector('div.modal-body');
const modalAction = document.querySelector('.modal-footer .button-primary');
function insertModal(el){  //добавим аргументов
     modalTitle.innerHTML = el.dataset.title;  
     modalBody.innerHTML = '<p>'+el.dataset.body+el.dataset.id+'</p>';
     modalAction.innerHTML = el.dataset.action;
}

тогда в кнопке передаем параметры

<a 
onclick="insertModal( this )" 
class="btn btn-primary" 
data-id="2" 
data-title="Заявка на участие"
data-body="Участник №"
data-action="Принять"
role="button" 
data-toggle="modal" href="#modal-example">узнать айди</a>

[Night386]

Rst0, спасибо большое тебе!!! еще раз!!! если можешь оставь тг, отблагодарю как смогу тебя!

[Rst0]

Спасибо достаточно) телега в профиле есть

[Night386]

Rst0, спасибо еще раз!! напишу обязательно!

Answer 2

[Night386]

Подскажите айди я вывел обьекта, у него в таблице есть див abs 4

{% if row.sysinfo %}<div class="my-abs4" id="my-abs4" data-id="{{row.id}}">{{row.sysinfo}}</div>{% endif %}

он тоже цепляется с первым айди, ему как то можно присвоить data-id?(по аналогии выше) чтобы отображалась информация c diva в textarea по нему в модалке??

<script>
const modalBody = document.querySelector('div.modal-body');
console.log(modalBody);
function insertModal(id){
      console.log(id);
      modalBody.innerHTML = '<p>'+id+'</p>';
 $("#exampleFormControlTextarea1").html($('div .my-abs4').html());
      $(".modal-header").text('Внутренняя/служебная информация' + '\n' + '#' + '\n' + id);
}
</script>

<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">	
            <!-- заголовок -->
            <div class="modal-header" style="text-align:center;font-size:24px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
            
            </div>
            <!-- содержимое -->

            <div class="modal-body">
             
<textarea class="form-control" style="overflow:auto;resize: vertical;height:300px;" id="exampleFormControlTextarea1" rows="2" placeholder=""></textarea>
            
              
            </div>
             
            <!-- подвал -->
            <div class="modal-footer">
            
                
                <button type="submit" class="btn btn-primary w-100" style="width:100%;" name="actualize">Сохранить</button>
            </div>
        </div>
    </div>
</div>