Здравствуйте! Есть такой код на PHP: Код (Text): $edit = $_GET['link']; if (isset ($edit)) { $_SESSION['name'] = $edit; ... (здесь много кода) ?> <div class="md-content" id="modal_window"> <div class="md-content"> <h3>Редактирование сайта <?=$name?></h3> <div> <form method="post"> <span>Имя сайта</span> <br><input type="text" name="name" value="<?=$name?>"> <br><span>Алиасы сайта</span> <br><input type="text" name="alias" value="<?=$alias?>"> <br><span>Кодировка сайта</span> <br><input type="text" name="charset" value="<?=$charset?>"> <br><span>Email администратора сайта</span> <br><input type="text" name="email" value="<?=$email?>"> <br><span>Индексные файлы сайта</span> <br><input type="text" name="indexfiles" value="<?=$indexfiles?>"> <br><input type="submit" name="save" value="Сохранить"> </form> </div> </div> </div> <? } ?> Он выводит форму в зависимости от условий (выбрана ли переменная $edit). При клике на определённую ссылку серверу посылается запрос вида site.ru/script.php?link=mysite. Вопрос: как заставить эту форму отображаться в модальном окне?
http://bootstrap-3.ru/javascript.php#modals Посылаешь аякс запрос на сервер, а возвращаемый результат засовываешь в модальное окно. Что-то вопросы пошли вообще из ряда вон выходящие... Вы перед тем как спрашивать хоть пробуете искать ответы на свои вопросы? --- Добавлено --- Вот тебе функция вызова аякса на jquery Код (Javascript): function ajaxFunc(url, ArrayBase) { // var ajaxRes = ''; $.ajax({ url: url, type: "POST", async: false, data: ArrayBase, success: function (response) { ajaxRes = response; // Удовлетворительный результат }, error: function (error) { ajaxRes = error; // Выведет текст ошибки } } ); return ajaxRes; }
Ну, ну. У тебя твой скрипт должен будет генерировать кусок html кода. Аякс тебе его вернёт, результат функции аякса на js засунь в модальное окно просто например методом html на jquery. и да будет тебе счастье, а используй посылку запроса по событию : Код (Javascript): $('#id_кнопки')on("click", function() {}); привяжи его к кнопке на которой у тебя вызов модального окна будет. Модальное окно возьми с бутстрапа. @redcap Алгоритм действий понятен?
Код (Javascript): $.get( "/vhosts.php", { link: "<? $link ?>", } ); PHP: $edit = $_GET['link']; как-то так? --- Добавлено --- И ещё - у меня ссылки, при нажатии на которые это всё будет происходить, тоже генерируются PHP. Их я изменяю так - PHP: echo "<a class='md-trigger' onclick = '$.get()' href = 'vhosts.php?link={$weblist['name']}'><img src = '/panel/img/edit.png' width = '30px' height = '30px'></a>"; ?
<a class="md-trigger" href="/image.php?link=123">Image</a> Код (Javascript): $( function() { $( 'body' ).on( 'click', 'a.md-trigger', function( e ) { e.preventDefault(); $.ajax( { url: $( this ).attr( 'href' ), type: 'POST', contentType: false, // важно - убираем форматирование данных по умолчанию processData: false, // важно - убираем преобразование строк по умолчанию data: false, dataType: 'JSON', success: function( json ) { if ( json.GLOB !== 'undefined' ) { $( '#' + json.GLOB.ID ).html( json.GLOB.CONTENTS ); } else { console.log( json ); } } }); }); } выдернул из своего кода ключевой момент: Код (Text): $( 'body' ).on( 'click', 'a.md-trigger', function( e ) e.preventDefault() $( this ).attr( 'href' ) --- Добавлено --- когда впервые столкнулся с кодом js AJAX, каждую не понятную функцию шел гуглить мануал ( он на русском есть ) где то 4 месяца назад вообще про preventDefault не знал даже, в итоге в критический момент пришел сюда на форум и накатал тему, ну а тема сама так и осталась без ответной --- Добавлено --- почему $( '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 кнопка не работает после первого обновления контента"
Код (Javascript): $( function() { $( 'body' ).on( 'click', 'a.md-modal', function( e ) { e.preventDefault(); $.ajax( { url: $( this ).attr( 'href' ), type: 'GET', contentType: false, // важно - убираем форматирование данных по умолчанию processData: false, // важно - убираем преобразование строк по умолчанию data: false, dataType: 'JSON', success: function( json ) { if ( json.GLOB !== 'undefined' ) { $( '#' + json.GLOB.ID ).html( json.GLOB.CONTENTS ); } else { console.log( json ); } } }); }); }) Ошибка: Uncaught ReferenceError: $ is not defined
библиотеку Ajax подключи <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Подключил, ошибка исчезла, но страница всё равно перезагружается при клике на значок редактирования (карандаш) Вот ссылка на скрипт - http://test1.redcap52.ru/panel/vhosts.php
а почему перестала появляться вообще? ты взял и $.ajax постриг под корни, "дерево погибло" почему? --- Добавлено --- тут http://jquery-docs.ru/ajax/jquery-ajax/ описано как дерево цветет и плоды дает туда, куда ты написал "программист" ложить результат. Но не факт, ты еще пхп файл должен сделать чтобы форму присылало этому "дереву"
@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/
@MouseZver Нет! Если уже ты ему дал json то рассказал бы для начала как он работает, и что ему нужно возвращать json скриптом, а не сконфигурированную html страницу!
@askanim Данный код был приведен в качестве примера не для копи паста. Основные ключевые моменты я выделил в рамке.