Могу ли я загрузить jquery colorbox с удаленной страницы?

Question

У меня есть страница, которая генерирует карту Google при загрузке страницы, которую я хотел бы вызвать с другой страницы по ссылке.Вот как я создаю карту Google внутри colorbox:

//  show_map.php

jQuery(document).ready(function(){

    $.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() { 
        $.getJSON('map.php', function(data){
            initialize();
            setMarkers(map, data);
        });
    });
});

Вот моя попытка, но что-то подсказывает мне, что я иду по неверному пути.Должен ли я использовать модальное окно для чего-то подобного или есть лучший способ?

$(document).ready(function() {

    $('.show_map').click(function() { 
        $.get("show_map.php", function(data) {
          //  alert(data);
    })
});

Answer 1

Если я правильно понял, colorbox уже разработан для того, что вы хотите делать. Вам не нужно использовать дополнительные вызовы AJAX (он уже встроен). Просто установите параметр href на своей странице вместо встроенного html (затем, конечно, удалите параметр inline:true). Полный код (на странице со ссылкой на вашу карту):

$(document).ready(function() {
    $('.show_map').click(function() {
        $.colorbox({
            href: "show_map.php",
            width:"643px",
            height:"653px"
        });
    })
});

Вы также можете загрузить любую внешнюю страницу, если добавите параметр iframe: true в этот код.

Answer 2

Либо вы используете .getScript () jQuery, если страница содержит только JavaScript, либо вы можете использовать .load () для вставки содержимого страницы в DOM.

$(document).ready(function() {

    $('.show_map').click(function() { 
          $('.some-element').load("show_map.php");
    })
});

РЕДАКТИРОВАТЬ: лучший подход -Colorbox встроенный вместо.Сохраняет поездку в оба конца на сервер.

$(document).ready(function() {
    $('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() { 
        $.getJSON('map.php', function(data){
            initialize();
            setMarkers(map, data);
        });
    });
});