How to display linked-to pages in AJAX popup windows in Plone 3.3.X

Let's say you have a list of links (URLs) you want to display in a table, and you'd like to set up the links so that when someone clicks on them they remain on the same page and the linked page's contents appear in a popup box that floats on top of the original page. 

Here is what that page containing the table containing links might look like.  I created this page using Kupu and added a table with style "Subdued", which uses the tag <table class="plain">.

Here's how you can set this up in a Plone 3.3.X site:

• Install the Products.pipbox product in your buildout (add it to the eggs section of your buildout.cfg, rerun bin/buildout, and restart your Zope or ZEO clients).
• Add the pipbox product to your Plone site via the quickinstaller or in Site Setup -> Add-on Products.  This enables jQuery integration for your Plone site.
• In the example above, we'll assume you've got a Plone page in which you've created a table, and each row of the table contains a link (an <a> tag).
• Go to your Plone site's ZMI -> portal_skins -> custom, and add a File object. Give it the ID "popup.js" and click Add.  Click on your new popup.js item, leave the Content Type as application/x-javascript and in the body text field enter: jq(document).ready(function(){ jq('table.plain a').prepOverlay({subtype : 'iframe'});}); and press the Save Changes button.  What this does is invoke jQuery to find any <a> tags (links) within the <table> tag of class "plain", and mark those links to display them in an overlay / lightbox / popup of subtype "iframe".  More details below.
• Go to your site's ZMI -> portal_javascripts, scroll to the bottom to the "Add a new script" fieldset, enter the ID "popup.js", leave the other items as they are, and press the Add button.  You've registered your newly created popup.js so that it will appear everywhere on your site.  
• While still in the ZMI -> portal_javascripts, check the Debug/development mode box, scroll to the bottom, and press the Save button. This ensures that your new popup.js will get served and that any changes you make and save in the body of popup.js are served to browsers (otherwise browser and other proxy caches may continue to serve old versions of popup.js or not serve popup.js at all).  Remember to uncheck this Debug box when you are done working on this, however.
• Go to the page in your Plone site where you have that table containing the links, or if your browser page or tab is already on that page, reload the page. This is to ensure you get the new popup.js served to the browser.  If you have Safari Inspector, Opera Dragonfly, or Firefox Web Developer Toolbar or Firebug, you may want to check that popup.js was indeed served.
• Click on one of the links contained in your table.  Instead of making your browser go to that linked object, you should see that linked object appear instead in a popup window that "floats" above the page containing the table with links.

Here's what happens when I click on the first link:

Here's what happens when I click on the second link:

Other Examples

Here is the body of a popup.js that can do several things:

jq(document).ready(function(){
  jq('table.plain a').prepOverlay({subtype : 'iframe'});
  jq('.popuplink a').prepOverlay({subtype : 'iframe'});
  jq('#siteaction-sitemap a').prepOverlay({filter: '#content > *', subtype : 'ajax'});
  jq('#siteaction-accessibility a').prepOverlay({filter: '#content > *', subtype : 'ajax'});
  jq('#siteaction-plone_setup a').prepOverlay({filter: '#content > *', subtype : 'ajax'});
  jq('#siteaction-contact a').prepOverlay({
    subtype: 'ajax',
    filter: '#content>*',
    formselector: 'form'
    });
  jq('#portal-personaltools a').prepOverlay({filter: '#content > *', subtype : 'ajax'});
  jq('#document-action-sendto a').prepOverlay({filter: '#content > *', subtype : 'ajax'});
});

In the above, any <a class="popuplink"> tag will also get displayed in a popup.  So will the standard Plone sitemap, accessibility-info, and site setup pages as well as the contact-info, login, and send-to forms. 

Where to Get More Information

• The jQuery selector expression table.plain a is just an example.  You can find all the kinds of selectors at http://api.jquery.com/category/selectors/ 
• You can find more information about Plone jQuery integration and the different subtypes (iframe, ajax, filter) at http://plone.org/products/plone.app.jquerytools. For example, if your links point to content within your Plone site, you probably won't want the entire page displayed in the popup.  Instead, you'll want just the content portion of the page, so you'd use an expression like 

      jq('table.plain a').prepOverlay({subtype: 'ajax', filter: '#content > *'});

• You can find more information about the pipbox product, which is a quick and dirty way of getting the jQuery integration working, at http://plone.org/products/pipbox