Как асинхронно загрузить данные в модальное окно?

Question

[German Jet]

Здравствуйте.
Есть два экшена контроллера: список компьютеров и информация из другой таблицы по id компьютера.
Вот кусок из вьюшки:

foreach ($comps as $comp) {
      echo "<tr><td><a href=\"#myModal\" data-toggle=\"modal\">".$comp->name."</a></td></tr>";
}

Модальное окно

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
        Содержимое модального окна...
      </div>
    </div>
  </div>
</div>

Подскажите, как при открытии модального окна, в содержимое окна загрузить информацию по каждому компу из другой таблицы.

Answer 1

[matperez]

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

Ссылку может сразу передать в свойства кнопки через data-атрибут. Например так:

Html::button($comp->name, ['data-url' => Url::to(['view', 'id' => $comp->id]), 'rel' => 'toggle-modal'])

Потом через js ловите клик по селектору '[rel=toggle-modal]', выдергиваете ссылку через $(this).data('url') и дальше по плану.

Как отловить клик, сделать get запрос на сервер, найти модальное окно по id и вызвать его отображение программно уж загуглите сами.

Comments

[German Jet]

Понял, еще скажите, во втором экшене нужно проверить Yii::$app->request->isAjax и рендерить методом renderAjax? С деталями реализации разберусь.

[matperez]

German Jet: на Yii::$app->request->isAjax нужно проверять, если в одном екшене вы ходите рендерить и ответ с учетом шаблона ($this->render) и ответ без учета шаблона ($this->renderPartial). Если в данном екшене вы только на ajax запросы отвечаете, то можете и не проверять.
renderAjax пользуйте, если будете возвращать контект со скриптами. Если просто тест, то можно через renderPartial.