Всплывающая страница с использованием AJAX / jQuery

Question

Я разрабатываю простую карту для отображения местоположений предприятий в моем районе. У меня есть главная страница (map.php), которая содержит карту, и я также создал страницу (business.php), которая отображает дополнительную информацию о конкретной компании, такую ​​как некоторые изображения, обзоры и т. Д.

Мне нужна ссылка в информационном окне (информационное окно), которая будет динамически ссылаться на эту страницу с помощью AJAX / jQuery. Я также хочу иметь возможность передавать значения выбранного бизнеса (щелчок по значку) из map.php в business.php, чтобы я мог отображать и / или манипулировать ими. Я легко могу сделать это, передавая значения из URL на страницу php. Однако я не хочу покидать главную страницу, я просто хочу, чтобы бизнес-страница всплывала. Как мне это сделать? Это мой код JavaScript ниже:

function getLocations (url) {
    downloadUrl(url, function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var pic = markers[i].getAttribute("image");
            var link = markers[i].getAttribute("link");
            var details = markers[i].getAttribute("details");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<div id='content'>" + name + "</b> <br />" + '<img src="' + pic + '"/>' + "  </b> <br/>" + address + '</b> <br /> <a href="business.php">View More Information</a></div>';
            var icon = customIcons[type] || {};
            var marker = new MarkerWithLabel({
                position: point,
                draggable: false,
                raiseOnDrag: false,
                map: map,
                labelContent: type,
                labelAnchor: new google.maps.Point(30, 65),
                labelClass: "labels", // the CSS class for the label
            });
            bindInfoWindow(marker, map, infoWindow, html);
        }
    });
}

Когда пользователь нажимает ссылку "Просмотреть дополнительную информацию", я хочу, чтобы страница business.php отображалась динамически.

Answer 1

Правильный ответ: это зависит .Как вы хотите показать эту информацию?Вы хотите открыть новое окно или нет совсем?

1. Если вы хотите / хотите / хотите открыть новое окно, просто используйте атрибут target <a>тег.Как это: <a href="business.php" target="business">View More Information</a>.target - это имя окна, которое вы хотите открыть (как в здесь ).Вы даже можете манипулировать этим окном с помощью JavaScript, если хотите (положение, размер и т. Д.).Технически это всплывающее окно, поэтому некоторые конфигурации браузера вашего клиента могут не понравиться.

2. С другой стороны, если вы хотите отобразить business.php на той же странице,используйте fancybox или лайтбокс -подобное решение со встроенным фреймом, которое позволит вам увидеть исходную страницу в фоновом режиме (затемненной и недоступной) и по-прежнему видетьбизнес страница.Вы даже можете обойтись без iframe, создав свою страницу так, что вы загрузите страницу business.php с помощью ajax и замените содержимое некоторого элемента div / чем угодно, чтобы включить этот новый HTML.

3. Вы также можете создать динамический фрейм для отображения страницы business.php и т. Д.

Существует множество опций, и вы должны тщательно изучить, какой из них использовать, исходя из ваших требований и каждого из них.применимость решения к вашей проблеме (например, что произойдет, если пользователи запретят открывать новые окна).

Answer 2

Вам нужно будет «угнать» эти ссылки. Самый простой способ, которым я могу придумать, это что-то вроде этого:

// When clicking any link
$('a').live('click', function (e) {
    var clicked = $(this);

    // Make sure a bussiness.php-link was clicked
    if (clicked.attr('href').indexOf('business.php') != -1) {
        // Grab the page with ajax
        $.get(clicked.attr('href'), function (data) {
            alert(data);
        });

        return false;
    }
});

Редактировать: Скорее всего, вы хотите изменить оповещение () на лайтбокс или что-нибудь более причудливое.