Откройте всплывающее окно leanmodal, нажав на динамически сгенерированные ссылки. - PullRequest
Новая
       21

Откройте всплывающее окно leanmodal, нажав на динамически сгенерированные ссылки.

0 голосов
/ 22 ноября 2018

Я использую плагин jquery leanmodal (http://leanmodal.finelysliced.com.au/)

У меня есть страница php, где есть ссылки для обновления данных с помощью всплывающего окна leanmodal:

Следующие ссылки с различными параметрамипереданные функции генерируются на главной странице, чтобы показать всплывающее окно leanmodal. 

<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42690');">Edit</a>
<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42691');">Edit</a>
<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42692');">Edit</a>
<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42693');">Edit</a>

......

Эта же страница также получает некоторую ссылку, созданную с помощью вызова ajax (добавленов документ с помощью jquery), которая также похожа на ту же ссылку, что и упомянутая выше, но всплывающее окно leanmodal и функция не выполняется: 

<a id="42694" rel="leanModal" name="editdetails" href="#" onclick="showDataDetails('42694');">Edit</a>
<a id="42695" rel="leanModal" name="editdetails" href="#" onclick="showDataDetails('42695');">Edit</a>
<a id="42696" rel="leanModal" name="editdetails" href="#" onclick="showDataDetails('42696');">Edit</a>

......

isэто связано с привязкой события onclick к динамически создаваемым элементам якорных ссылок в jQuery.

Я хочу открыть всплывающее окно leanmodal, нажимая на динамически генерируемые ссылки 

function showDataDetails(id) { 
....
....
}

Пожалуйста, сообщите ...

1 Ответ

0 голосов
/ 22 ноября 2018

Я думаю, вы должны установить уникальный атрибут REL для каждой группы ссылок на один и тот же модал.Если вы установите два одинаковых идентификатора для двух узлов, то селектор не будет работать правильно. 

function showDataDetails(id) {
  ...
   $("[rel*="+id+"]").leanModal({...});
  ...
}

Но я думаю ...
Код должен выглядеть следующим образом:

например, таблица данных 

 <table>
 <tbody>
    <tr id='42694'><td data-name="Ron">Ron <a href="#editdetails" onclick="showDataDetails('42694');">Edit</a></td></tr>
    <tr id='42695'><td data-name="Harry">Harry <a href="#editdetails" onclick="showDataDetails('42695');">Edit</a></td></tr>
    <tr id='42696'><td data-name="Hermiona">Hermiona <a href="#editdetails" onclick="showDataDetails('42696');">Edit</a></td></tr>
 </tbody>
 </table>

, тогда вы можете динамически добавить тот же код привязки 

<a href="#editdetails" onclick="showDataDetails('42695');">Edit</a>

ваше модальное окно 

<div rel="leanModal" id="editdetails" class="modal">
   <form>
      This is EDIT modal content
      <input id="idInput" type="hidden" name="id" />
      <input id="nameInput" type="text" name="name" />
      <button type="submit">Save</button>
   </form>
</div>

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

function showDataDetails(id) {
   // get the value of field
   let nameValue = $('#'+id+' td[data-name]').data('name');

   // put the value to form input in modal window
   $('#nameInput').val(nameValue);
   // put the id in hidden input for backend purpose
   $('#idInput').val(id);

   // show one modal for all fields
   $('#'+id+' a').leanModal();
}

https://jsfiddle.net/pretordh/j28r6vko/

...