За последние 24 часа нас посетили 20283 программиста и 1083 робота. Сейчас ищут 684 программиста ...

Как вывести форму в модальном окне?

Тема в разделе "PHP для новичков", создана пользователем redcap, 23 ноя 2016.

  1. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Здравствуйте! Есть такой код на PHP:
    Код (Text):
    1.   $edit = $_GET['link'];
    2. if (isset ($edit)) {
    3.        $_SESSION['name'] = $edit;
    4.      ... (здесь много кода)
    5. ?>
    6.  
    7.        <div class="md-content" id="modal_window">
    8.             <div class="md-content">
    9.                 <h3>Редактирование сайта <?=$name?></h3>
    10.                 <div>
    11.                 <form method="post">
    12.         <span>Имя сайта</span>
    13.         <br><input type="text" name="name" value="<?=$name?>">
    14.         <br><span>Алиасы сайта</span>
    15.         <br><input type="text" name="alias" value="<?=$alias?>">
    16.         <br><span>Кодировка сайта</span>
    17.         <br><input type="text" name="charset" value="<?=$charset?>">
    18.         <br><span>Email администратора сайта</span>
    19.         <br><input type="text" name="email" value="<?=$email?>">
    20.         <br><span>Индексные файлы сайта</span>
    21.         <br><input type="text" name="indexfiles" value="<?=$indexfiles?>">
    22.         <br><input type="submit" name="save" value="Сохранить">
    23.     </form>
    24.                
    25.                 </div>
    26.             </div>
    27.         </div>
    28.  
    29. <? } ?>
    Он выводит форму в зависимости от условий (выбрана ли переменная $edit). При клике на определённую ссылку серверу посылается запрос вида site.ru/script.php?link=mysite.
    Вопрос: как заставить эту форму отображаться в модальном окне?
     
  2. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    http://bootstrap-3.ru/javascript.php#modals
    Посылаешь аякс запрос на сервер, а возвращаемый результат засовываешь в модальное окно.
    Что-то вопросы пошли вообще из ряда вон выходящие... Вы перед тем как спрашивать хоть пробуете искать ответы на свои вопросы?
    --- Добавлено ---
    Вот тебе функция вызова аякса на jquery
    Код (Javascript):
    1. function ajaxFunc(url, ArrayBase) {
    2. //
    3.     var ajaxRes = '';
    4.     $.ajax({
    5.             url: url,
    6.             type: "POST",
    7.             async: false,
    8.             data: ArrayBase,
    9.             success: function (response) {
    10.                 ajaxRes = response; // Удовлетворительный результат
    11.             },
    12.             error: function (error) {
    13.                 ajaxRes = error; // Выведет текст ошибки
    14.             }
    15.         }
    16.     );
    17.     return ajaxRes;
    18. }
     
    denis01 нравится это.
  3. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Да. Конечно же.
     
  4. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    Ну, ну.
    У тебя твой скрипт должен будет генерировать кусок html кода. Аякс тебе его вернёт, результат функции аякса на js засунь в модальное окно просто например методом html на jquery. и да будет тебе счастье, а используй посылку запроса по событию :
    Код (Javascript):
    1. $('#id_кнопки')on("click", function() {});
    привяжи его к кнопке на которой у тебя вызов модального окна будет. Модальное окно возьми с бутстрапа.
    @redcap Алгоритм действий понятен?
     
    #4 askanim, 23 ноя 2016
    Последнее редактирование: 23 ноя 2016
    denis01 нравится это.
  5. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Более-менее, с JQuery и JS незнаком, буду разбираться.
     
    askanim нравится это.
  6. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    @redcap ну вот, знакомься. Будут вопросы спрашивай тут подскажут. А я спать.
     
    denis01 нравится это.
  7. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Код (Javascript):
    1. $.get(
    2.   "/vhosts.php",
    3.   {
    4.     link: "<? $link ?>",
    5.   }
    6. );
    PHP:
    1. $edit = $_GET['link'];
    как-то так?
    --- Добавлено ---
    И ещё - у меня ссылки, при нажатии на которые это всё будет происходить, тоже генерируются PHP.
    Их я изменяю так -
    PHP:
    1. echo "<a class='md-trigger' onclick = '$.get()' href = 'vhosts.php?link={$weblist['name']}'><img src = '/panel/img/edit.png' width = '30px' height = '30px'></a>";
    ?
     
  8. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
    <a class="md-trigger" href="/image.php?link=123">Image</a>

    Код (Javascript):
    1. $( function()
    2. {
    3.     $( 'body' ).on( 'click', 'a.md-trigger', function( e )
    4.     {
    5.         e.preventDefault();
    6.      
    7.         $.ajax(
    8.         {
    9.             url: $( this ).attr( 'href' ),
    10.             type: 'POST',
    11.             contentType: false, // важно - убираем форматирование данных по умолчанию
    12.             processData: false, // важно - убираем преобразование строк по умолчанию
    13.             data: false,
    14.             dataType: 'JSON',
    15.             success: function( json )
    16.             {
    17.                 if ( json.GLOB !== 'undefined' )
    18.                 {
    19.                     $( '#' + json.GLOB.ID ).html( json.GLOB.CONTENTS );
    20.                 }
    21.                 else
    22.                 {
    23.                     console.log( json );
    24.                 }
    25.             }
    26.         });
    27.     });
    28. }
    выдернул из своего кода
    ключевой момент:
    Код (Text):
    1.  
    2. $( 'body' ).on( 'click', 'a.md-trigger', function( e )
    3.  
    4. e.preventDefault()
    5.  
    6. $( this ).attr( 'href' )
    --- Добавлено ---
    когда впервые столкнулся с кодом js AJAX, каждую не понятную функцию шел гуглить мануал ( он на русском есть ) где то 4 месяца назад вообще про preventDefault не знал даже, в итоге в критический момент пришел сюда на форум и накатал тему, ну а тема сама так и осталась без ответной :D
    --- Добавлено ---
    почему $( 'body' ).on( 'click', 'a.md-trigger', function( e )
    а не
    $('#id_кнопки')on("click", function() {});

    После изменения html кода с той самой кнопкой <a class="md-trigger" href="/image.php?link=123">Image</a>
    у нас ( второй js код ) просто не будет перехватывать клик кнопки "потеряет ее место нахождение", а с $( 'body' ).on можно уже замутить и не искать после: "ajax кнопка не работает после первого обновления контента"
     
  9. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Код (Javascript):
    1. $( function()
    2. {
    3.     $( 'body' ).on( 'click', 'a.md-modal', function( e )
    4.     {
    5.         e.preventDefault();
    6.    
    7.         $.ajax(
    8.         {
    9.             url: $( this ).attr( 'href' ),
    10.             type: 'GET',
    11.             contentType: false, // важно - убираем форматирование данных по умолчанию
    12.             processData: false, // важно - убираем преобразование строк по умолчанию
    13.             data: false,
    14.             dataType: 'JSON',
    15.             success: function( json )
    16.             {
    17.                 if ( json.GLOB !== 'undefined' )
    18.                 {
    19.                     $( '#' + json.GLOB.ID ).html( json.GLOB.CONTENTS );
    20.                 }
    21.                 else
    22.                 {
    23.                     console.log( json );
    24.                 }
    25.             }
    26.         });
    27.     });
    28. })
    Ошибка: Uncaught ReferenceError: $ is not defined
     
  10. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
  11. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Подключил, ошибка исчезла, но страница всё равно перезагружается при клике на значок редактирования (карандаш)
    Вот ссылка на скрипт - http://test1.redcap52.ru/panel/vhosts.php
     
  12. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
    нафига ты просто скопировал мой код? :D он тупо для примера был
     
  13. redcap

    redcap Новичок

    С нами с:
    16 ноя 2016
    Сообщения:
    21
    Симпатии:
    1
    Всё. Настроил. Страница перестала перезагружаться, но форма перестала появляться вообще.
     
  14. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
    а почему перестала появляться вообще?
    ты взял и $.ajax постриг под корни, "дерево погибло" почему?
    --- Добавлено ---
    тут http://jquery-docs.ru/ajax/jquery-ajax/
    описано как дерево цветет и плоды дает туда, куда ты написал "программист" ложить результат. Но не факт, ты еще пхп файл должен сделать чтобы форму присылало этому "дереву"
     
  15. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    @redcap Потому что ты возвращаешь json массив ёпта.
    @MouseZver ты зачем ему json тип дал... Просто зачем? Ему совершенно он не нужен, ты его лишь запутал в конец своим скриптом.
    @redcap вернись к моему скрипту, алё) Я тебе дал скрипт аякса, воспользуйся им. Смотри
    ArraBase у меня это массив передаваемых данных в запросе на php обработчик.
    Прочитай про data атрибуты, далее почитай как с помощью jquery вытащить их. И передавай необходимые данные просто по ссылке, а в скрипте уже подставляй. А если разные ссылки url, то не беда. В дата атрибуте генерируй ссылки, потом в js вытаскивай их при нажатии и подставляй в url.
    @redcap я тебе расписал (разжевал) алгоритм, действуй! Но учись сам составлять такие алгоритмы - они элементарны как налить в чайник воды.
    --- Добавлено ---
    @redcap Возьми и прочти учебник по jquery, после опробуй полученные знания и много вопросов сразу отпадёт.
    --- Добавлено ---
    @redcap http://anton.shevchuk.name/jquery-book/ - вот учебник скачай или читай его онлайн.
    --- Добавлено ---
    https://habrahabr.ru/post/155107/
     
    denis01 нравится это.
  16. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
    ну да надо было $.ajax голый дать? :D
     
    denis01 нравится это.
  17. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    @MouseZver Нет! Если уже ты ему дал json то рассказал бы для начала как он работает, и что ему нужно возвращать json скриптом, а не сконфигурированную html страницу!
     
  18. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
    @askanim Данный код был приведен в качестве примера не для копи паста. Основные ключевые моменты я выделил в рамке.