За последние 24 часа нас посетил 23731 программист и 1714 роботов. Сейчас ищет 1941 программист ...

Предать переменную в модальное окно

Тема в разделе "PHP для новичков", создана пользователем avaya, 28 сен 2018.

  1. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    Привет!
    Из базы вывожу на страницу в таблицу и у каждой записи есть кнопка Del.
    При нажатии на Del всплывает сообщение в модальном окне "Вы уверены?" и кнопки Да/Нет.

    Вызов окна
    PHP:
    1. <a href="#del" data-toggle="modal"> <img src="assets/img/del.png"></a>
    само окно
    PHP:
    1. <div class="modal fade" id="del" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    2.   <div class="modal-dialog" role="document">
    3.   <div class="modal-content">
    4.   <div class="modal-header">
    5.   <h4 class="modal-title" id="exampleModalLabel">Внимание!</h4>
    6.   </div>
    7.   <div class="modal-body">
    8.   <br>Вы уверены?
    9.      </br>
    10. '.$row['id'].' //просто сделал вывод для проверки
    11.   </div>
    12.   <div class="modal-footer">
    13.   <button type="button" class="btn btn-primary" >Да</button>  
    14.   <button type="button" class="btn btn-secondary" data-dismiss="modal">Нет</button>
    15.   </div>
    16.   </div>
    17.   </div>
    18. </div>


    Помогите передать в модальное окно .$row['id']. Каким образом надо изменить ссылку на вызов окна, чтобы удалялась из базы запись с определенным id?
     
  2. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.593
    Симпатии:
    362
    @avaya, bootstrap, однако...
    Разберите пример: Varying modal content
    И не пропустите js под html разметкой.
     
  3. Алекс8

    Алекс8 Активный пользователь

    С нами с:
    18 май 2017
    Сообщения:
    1.730
    Симпатии:
    359
    для подтверждения я обычно использую системное окошко
    Код (Javascript):
    1. if(confirm('Удалить')){
    2.      return true;
    3. }
    4. return false;
    а так то передавайте от объекта к объекту на странице данные через атрибут data или через какую то глобальную JS переменную..
     
  4. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    Однако непонятно


    По некоторым причинам не вариант
     
  5. Алекс8

    Алекс8 Активный пользователь

    С нами с:
    18 май 2017
    Сообщения:
    1.730
    Симпатии:
    359
    тогда поподробнее опишите задачу)) по факту то модальное окно это простой див в position: absolute))
     
  6. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    На страницу из БД выводится в табличном видео инфа. И напротив каждой позиции в таблице есть кнопка Удалить. При нажатии необходимо спросить пользователя уверен ли он в том, что делает. Вот окно с подтверждением выскакивает. Но в переменной id хранится номер самой первой записи в БД. А не той записи, которую предполагается удалить.

    Использовать
    if(confirm('Удалить')){
    return true;
    }
    return false;
    не хочу по причине наличия галочки в окошке "Больше не показывать на этой странице".
    Поэтому и приходится изворачиваться с модальным окном
     
  7. Алекс8

    Алекс8 Активный пользователь

    С нами с:
    18 май 2017
    Сообщения:
    1.730
    Симпатии:
    359
    я все равно не понимаю в чем проблема)))
    1. к примеру у кнопки УДАЛИТЬ есть класс .delete и атрибут data-id = $row['id']
    2. слушаем событие click на этом классе
    3. Поймали событие - вывели модалку - спросили.. если получили true
    4. То отрявляем AJAX на сервер с $(this).data('id')
     
  8. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    Передавайте айдишник, например, <a href="#del" data-toggle="modal" id="1111111111"><img src="assets/img/del.png"></a>
     
  9. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    <a href="#del" data-toggle="modal" id='.$row['id'].'><img src="assets/img/del.png"></a>
    не срабатывает
     
  10. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Я например для передачи чего то в модальное окно делаю так, например при нажатии:
    Код (Javascript):
    1. $("#select_user").click(function() {
    2.     var val = $("select#select_user").val();
    3.      $('#input').attr('data1', val);
    4. });
    То есть где то в модальном окне есть кнопка с id="input" создаю там атрибут data1 и передаю туда то что надо. В данном случае что то с списка селект.
    p.s. естественно это можно сделать без jquery.
     
  11. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    В js вообще не смыслю. Алгоритм то понятен. Но как написать я не знаю
    --- Добавлено ---
    А код кнопки как выглядит при этом? Подробнее можете показать?
     
  12. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    нужно научиться немного кодить на js или кого-нибудь попросить за вас сделать))
     
  13. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    Б...ть опять все упирается в этот js. Не понимаю я его от слова совсем
     
  14. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    так бы в стартпосте и написали, что не понимаю, помогите, напишите, очень надо))
    К тому же вы вопрос задает как удалить, но не приводите весь код, там же еще должен быть код, который гетом или постом передает на удаление и который управляет окном
     
    #14 marsik, 28 сен 2018
    Последнее редактирование: 28 сен 2018
  15. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.840
    Симпатии:
    652
    @avaya, вам нужно на пыхе прописывать id «при вызове модального окна», а уже «в коде модального окна» использовать JS-переменную или считывать на JS значение напрямую оттуда, где оно было прописано пыхом. В теме уже были примеры.
     
  16. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.593
    Симпатии:
    362
    В том примере у кнопок вызова модального окна (аналог Вашего Del) есть атрибут data-whatever.
    В js обработка события show.bs.modal.
    Первой строчкой функции-обработчика определяется, по какой кнопке вызвано модальное окно.
    Второй - данные из атрибута data-whatever... впрочем, там черным по белому в комментарии написано :)
     
  17. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    ок. пишу, помогите, пожалуйста, балбесу. Напишите, очень надо.
    Хочу немного упростить себе работу, чтобы в экселе не вести эту базу (файл использую несколько человек и частенько кто-то его блокирует).
     
  18. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    как бы так должно добавить в окно айди с ссылки:
    <script>
    $('.modal fade').on('show.bs.modal', function () { $('.modal-body').text($(this).attr('id')); });
    </script>
     
    #18 marsik, 28 сен 2018
    Последнее редактирование: 28 сен 2018
  19. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    Не добавляет
     
  20. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.593
    Симпатии:
    362
  21. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    настроен, но в связи с тем, что его в нашем офисе приходится открыть через терминал, а в других офисах просто в сетевого диска, то иногда какой-либо сотрудник блокирует файл и не дает другим редактировать его 9системщики по-другому не могут настроить). Да и сама таблица в экселе выглядит отвратительно. Не могу показать, к сожалению, коммерческая тайна.
     
  22. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.593
    Симпатии:
    362
    @avaya, тогда действительно проще не модальным окном сделать, а повесить на onclick кнопки Del системный запрос подтверждения (о чем говорится в сообщении 3).
    Пример
     
  23. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    вот так добавит
    <script>
    $('.modal fade').on('show.bs.modal', function (e) { $('.modal-body').text($(e.relatedTarget).attr('id'));});
    </script>
    да, проще по клику удалить и все, а так надо будет запустить окно, вставить данные, отловить клик, закрыть окно, удалить данные
     
    #23 marsik, 28 сен 2018
    Последнее редактирование: 28 сен 2018
  24. avaya

    avaya Новичок

    С нами с:
    4 июл 2018
    Сообщения:
    12
    Симпатии:
    0
    Тоже не сработало.
    Ладно, если делать простым алертом, то эту галочку можно убрать? Не хочу, чтобы кто-то из бухгалтерии или хоз.отдела поставил галочку и потом начал жаловаться, что "что-то поломалось в программе"
    [​IMG]
    [​IMG]
     
  25. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    @avaya
    Вот такой трюк как передать php код в атрибут кнопки и вывести в консоль, дальше сам думай:
    PHP:
    1. <?php
    2. $test="привет";
    3. echo '<!DOCTYPE HTML>
    4. <html lang="ru">
    5. <head>
    6.    <meta charset="UTF-8"/>
    7.    <title>тест</title>
    8. </head>
    9. <body>
    10. <button id="ok" data="'.$test.'">ок</button>
    11.    <script>
    12.    console.log(ok.getAttribute("data"));
    13.    </script>
    14. </body>';
    15. ?>
    В твоем случае, чтоб точно понял:
    PHP:
    1. echo '<button type="button" class="btn btn-primary" id="yes" data="'.$row['id'].'">Да</button>
    2. <script>
    3. yes.onclick = function() {
    4.    console.log(yes.getAttribute("data"));
    5. };
    6. </script>';
    7. ?>
    Консоль в браузере F12 если что.
     
    #25 Artur_hopf, 1 окт 2018
    Последнее редактирование: 1 окт 2018