如何将php变量传递给模态窗口 [英] How to pass php variable to modal window

问题描述

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

I am making a simple page and I have found this little problem. I have this in my template:

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

基本上它是一个填充特定运动信息的块（它是一个运动应用程序）。如果我在DB中有3个条目，它将使用相应的信息打印此代码三次。

basically it is a block that fills in information about particular exercise (it is a sport app). SO If I have 3 entries in DB, it will print this code three times with corresponding info.

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

The problem I have is with the edit button, which upon clicking opens modal window. It is made purely with CSS, so no Javascript.

当我点击按钮时，它跳转到这个代码：

When I click the button, it jumps to this code:

<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）传递给模态窗口，这样我就可以知道我点击了哪些可能的按钮。有没有办法做到这一点，而不需要重写我使用这个模态窗口的所有其他页面？

But since I jump to div id and I am not using a new page where I could choose a controller and pass a variable, I need somehow to pass the variable (id of the exercise) to the modal window, so I can know which of the possible buttons I have clicked. Is there any way to do it, without the need to rewrite all other pages where I have used this modal window?

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

I can't use another foreach like in the first part, because the modal window is always a single object that appears, unlike all the entries on the page that are there as many times as there are entries in the DB.

希望这是可以理解的，对不起我的英语：）

Hope that it is understandable, sorry for my English :)

推荐答案

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

The simplest way to do this using a single modal window involves adding some javascript code to your page.

首先，将相关信息添加到编辑链接，并使用新的 data-serie-< name> 为您要传递的每一条数据：

First, add the relevant information to the edit link, with a new data-serie-<name> for each piece of data you want to pass:

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

接下来，添加一个 onclick 事件处理程序到同样的链接。此处理程序将从< a> 元素中提取嵌入数据，并将其注入模态窗口。 数据集元素提供对<$ c $的访问权限c> data - * 来自javascript的属性

Next, add an onclick event handler to that same link. This handler will extract the embedded data from the <a> element and inject it in the modal window. The dataset element provides access to the data-* attributes from javascript

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

这篇关于如何将php变量传递给模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！