我正在制作一个简单的页面,我发现了这个小问题。我在我的模板中有这个:
<?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
,因为模态窗口始终是一个出现的单个对象,不像页面上的所有条目那样多次出现数据库中的条目。
希望这是可以理解的,对不起我的英语:)
答案 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;"