Pop up page using AJAX/jQuery

Question

I am developing a simple map to display business locations in my area. I have the main page (map.php) which holds the map and I have also created a page (business.php) which displays more information about a particular business such as some images, reviews, etc.

I need to have a link on the infobox (infowindow) which will link to this page dynamically using AJAX/jQuery. I also want to be able to pass values of the business selected (the icon clicked) from the map.php to business.php so that I can display and/or manipulate them. I can easily do that by passing values on the url to the php page. However I do not want to leave the main page, I just want the business page to pop up. How do I go about this? This is my JavaScript code below:

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);
        }
    });
}

When the user clicks the 'View More Information' link I want business.php page to pop dynamically.

Answer 1

You'll need to "hijax" those links. The simplest way I can think of is something like this:

// 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;
    }
});

Edit: You'll most likely wanna change the alert() to a lightbox or something fancier.

Answer 2

The right answer is: it depends. How do you want to show that information? Do you want to open a new window or not at all?

1. If you want/need/like to open a new window, just use the target attribute of the <a> tag. Like this: <a href="business.php" target="business">View More Information</a>. target is the name of the window you want to open (as in here). You can even manipulate that window with javascript if you'd like (position, size, etc.). This is technically a pop-up, so some of your client's browser configurations might not like that.

2. On the other hand, if you wish to display business.php on the same page, use a fancybox or lightbox-like solution with an embedded iframe, that will make so that you you can see the original page in the background (dimmed and not accessible) and still see your business page. You can even get away without the iframe by creaftinf your page so that you load the business.php page with ajax and replace the contents of some div/whatever to include that new html.

3. You can also create a dynamic iframe to render the business.php page, etc.

There are lots of options and you should carefully examine which one to use based on your requirements and on each solution applicability to your problem (what happens if users prevent new windows from opening, for instance).