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

时间:2014-12-11 19:59:00

标签: php mysql html5 apache templates

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

<?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; ?>

基本上它是一个填充特定运动信息的块(它是一个运动应用程序)。 SO如果我在DB中有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并且我没有使用新页面我可以选择控制器并传递变量,我需要以某种方式将变量(练习的id)传递给模态窗口,所以我可以知道我点击了哪些可能的按钮。有没有办法做到这一点,而不需要重写我使用这个模态窗口的所有其他页面?

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

希望这是可以理解的,对不起我的英语:)

1 个答案:

答案 0 :(得分:1)

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

首先,将相关信息添加到修改链接,为要传递的每个数据添加一个新的data-serie-<name>

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

接下来,将onclick事件处理程序添加到同一链接。此处理程序将从<a>元素中提取嵌入数据,并将其注入模态窗口。 dataset元素可以从javascript

访问data-*属性
// Example
onclick="serieName=this.dataset.serieName;document.querySelector('#openModal_edit input#name').value = serieName;return true;"