Как загружать iframe по запросу?

Question

[fuckingawesomenigga]

Здравствуйте, суть такова, есть два файла:
list.php - обрабатывает страницу списка итемов из базы mysql, просто вывод.
edit.php - по ссылке, на отдельной странице через GET, по id выбирает конкретную запись.

задумка выводить форму редактирования в попап, если просто страницу edit.php поместить через iframe, то значительно увеличивается время загрузки сайта, возможно ли сделать(как?) прогрузку фрэйма, после вызова попапа?

не исключаю, что есть другие варианты, как решить эту задачу

Answer 1

[irishmann]

В list.php так же выводить список.
Там же сверстать скрытый и пустой по-умолчанию popup, с полями для редактирования.
Повесить на каждый элемент списка data-* атрибут, в который записать id. Написать обработчик, который вызывает все данные по элементу, считывая его data-* атрибут, через ajax, заполнять поля в popup, и показывать его. В popup вносим изменения, нажимаем сохранить, улетает ajax с обновленной записью, приходит ответ все гуд, измененные данные меняем в общем списке, очищаем поля, закрываем popup

Comments

[fuckingawesomenigga]

есть другая задумка, не знаю возможно ли это
отключить загрузку фрэймов, привязать к ним id, и загружать их при нажатии кнопки edit
это же на js реализуемо?

[irishmann]

fuckingawesomenigga,

<div class="links">
    <a class="openpop" href="http://getbootstrap.com/">Link 1</a>
    <a class="openpop" href="http://www.jsfiddle.net">Link 2</a>
    <a class="openpop" href="http://www.w3schools.com">Link 3</a>
</div>
<div class="wrapper">
    <div class="popup">
        <iframe src="">
            <p>Your browser does not support iframes.</p>
        </iframe>
<a href="#" class="close">X</a>
    </div>
</div>

JQuery

$(document).ready(function () {
    $(".popup").hide();
    $(".openpop").click(function (e) {
        e.preventDefault();
        $("iframe").attr("src", $(this).attr('href'));
        $(".links").fadeOut('slow');
        $(".popup").fadeIn('slow');
    });

    $(".close").click(function () {
        $(this).parent().fadeOut("slow");
        $(".links").fadeIn("slow");
    });
});