php - 如何将php变量传递到模态窗口

Question

我正在制作一个简单的页面，我发现了这个小问题。我的模板中有这个:

<?php foreach ($this->vypis_serie as $value) : ?>

        <div class="serie">
          <div id="serie_header">
            <a href="cviceni/cislo/<?= $value['id_serie'] ?>"><?= $value['nazev_cviceni'] ?></a> 
          </div>

          <div id="serie_info">
            <p>Number of excercises: TODO</p> 
            <p>Sport type: <?= $value['typ'] ?></p>
            <p>KCal summary: <?= $value['kcal'] ?></p>
          </div>

            <div class="button_upravit"><a href="#openModal_edit">Edit</a></div>
            <div class="button_smazat"><a href="serie/smazat/<?= $value['id_serie'] ?>" onclick="return confirm('Are you sure you want to delete it?');">Delete</a></div>            
        </div>
      <?php endforeach; ?>

基本上，它是一个填充有关特定运动的信息的 block (它是一个运动应用程序)。所以如果我在数据库中有 3 个条目，它会打印此代码三次以及相应的信息。

我遇到的问题是编辑按钮，单击该按钮会打开模式窗口。它纯粹是用 CSS 制作的，所以没有 Javascript。

当我单击按钮时，它会跳转到以下代码:

<div id="openModal_edit" class="modalDialog">
          <div>
            <a href="#close" title="Zavřít" class="close">X</a>
            <div id="editace">

                <form id="platba" action="serie/edit/" method="post" enctype="multipart/form-data">   

              <fieldset>
                <legend>Edit serie</legend>
                <ol>
                    <li>
                      <label for="name">Name of the series</label>
                      <input id="name" name="nazev_cviceni" type="text" required autofocus>
                  </li>
                  <li>
                      <label for="typ">Sport type</label>
                      <select name="typ">
                          <option value="Kolo">Bike</option>
                          <option value="Běhání" selected="selected">Running</option>
                      </select>
                  </li>
              </ol>
              </fieldset>

              <fieldset>
                <button type="submit">Save</button>
              </fieldset>
              </form>
              </div>     
          </div>
        </div>

但是由于我跳转到 div id 并且我没有使用可以选择 Controller 并传递变量的新页面，所以我需要以某种方式将变量(练习的 id)传递到模式窗口，这样我就可以知道我点击了哪些可能的按钮。有什么方法可以做到这一点，而不需要重写我使用此模式窗口的所有其他页面？

我不能像第一部分那样使用另一个 foreach ，因为模式窗口始终是出现的单个对象，这与页面上出现多次的所有条目不同是数据库中的条目。

希望这是可以理解的，抱歉我的英语:)

Answer 1

使用单个模式窗口执行此操作的最简单方法是向页面添加一些 JavaScript 代码。

首先，将相关信息添加到编辑链接中，新建data-serie-<name>对于您要传递的每条数据:

<a href="#openModal_edit" data-serie-name="<?= $value['nazev_cviceni'] ?>" ...>

接下来，添加 onclick同一链接的事件处理程序。该处理程序将从<a>中提取嵌入的数据。元素并将其注入(inject)模式窗口中。 dataset元素提供对 data-* 的访问来自 JavaScript 的属性

// Example
onclick="serieName=this.dataset.serieName;document.querySelector('#openModal_edit input#name').value = serieName;return true;"