Examples of AJAX popups with the
overlibmws DHTML Popup Library
 
maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for AJAX support via the
overlibmws Support Group.

 
AJAX is an acronym for Asynchronous JAvascript and XML.  To fully appreciate the examples in this support document, it would help to have at least a passing familiarity with the associated concepts and with the emerging standard for the XMLHttpRequest object in modern browsers, and its ActiveX equivalent in Internet Explorer versions 5 and 6 (IE v7 has included direct support for the XMLHttpRequest object).  For the computer scientists, the Working Draft of an emerging W3C standard is now making real headway.  But if that's Greek to you, try starting with the Wikipedia.  Also, Apple's Developer Connection for AJAX is excellent, and two of the examples in this support document are adapted from its example.  The Mozilla Developer Center also offers a Getting Started document for AJAX.  The accessibility issues with AJAX merit review.  In this support document we also have an example which uses dynamic Google Maps as DHTML popup content.  Their API is a particuarly creative use of AJAX.  Our basic examples in this support document use OLgetAJAX function calls for making GET requests, and OLpostAJAX for using POST, via the distribution's ajaxcontentmws.js support script (see below).
 
The 1st (and most basic) example is a
Popup with AJAX content via responseText of XMLHttpRequest
called by the statement:
    onmouseover = "return OLgetAJAX('popupContent.php5?exa=1', OLcmdExT1,
 300, 'ovfl1');"
which initiates a wrapper function set that uses the browser's XMLHttpRequest object for asynchronous communication with an http or https server (or issues an approriate message for older browsers which are still supported by overlibmws but did not yet support that object).  The function set is geared toward sending a query string to a php, asp, or cgi (e.g., perl) script which can access the server's file, database, and / or authorization systems and retrieve appropriate content for the DHTML popups to populate them dynamically.
    Import the distribution's ajaxcontentmws.js support script to
have the functions available for use with overlib or overlib2 calls.
The GET request for the server is indicated by a partial, relative or complete URL entered as a quoted string or unquoted string variable name or array entry (or summation) in the required,
 first argument  of the:
    OLgetAJAX(url, command, delay, css);
wrapper function.  In this example the URL is for a php script (popupContent.php5), with a query string (?exa=1) which acts as an instruction to return the content for the popup in this first example.  The URL need not have a query string, and instead could be a GET request to return a file.  Most commonly, the server-side script is set up to return a plain text or HTML fragment which upon receipt by the browser is converted to the lead argument of an overlib or overlib2 call, homologously to a statically defined javascript string variable.  But the server-side script also could return a complete file.  If it is a plain text or HTML fragment, the server's response headers should indicate a Content-Type of text/plain, e.g., for a php script by its using:
    <?php header('Content-Type: text/plain'); ?>
For a complete file, its correct Content-Type should be indicated.  For XML the Content-Type must be indicated as text/xml.  Each response from the server becomes available as a string loaded into  OLhttp.responseText .  Also, any response which has text/xml indicated and has well-formed XML is parsed into an XML document object (i.e., a DOM object, not a string) which is loaded into  OLhttp.responseXML .  The  OLhttp.responseText  string with some possible manipulation (see below) is loaded into the library's  OLresponseAJAX  global.
The also required,
 second argument  of the:
    OLgetAJAX(url, command, delay, css);
wrapper function is the reference (unquoted name without parens) for a function to be called when the server's reponse has been received.  It could instead be a quoted string which indicates a function with its parens and any args, or an inline function (see below).  In this first example the function reference (OLcmdExT1) points to a function which simply makes an overlib call with  OLresponseAJAX  as its lead argument:
    function OLcmdExT1() {
 return overlib( OLresponseAJAX , TEXTPADDING,0, CAPTIONPADDING,4, CAPTION,
 'Example with AJAX content via &lt;span '
 +'class="yellow"&gt;responseText&lt;/span&gt;.&nbsp; '
 +'Popup scrolls with the window.',
 WRAP, BORDER,2, STICKY, CLOSECLICK, SCROLL,
 MIDX,0, RELY,100,
 STATUS,'Example with AJAX content via responseText of XMLHttpResponse');
}

The optional,
 third argument  of the:
    OLgetAJAX(url, command, delay, css);
wrapper function is an unquoted integer indicating the number of millisecs to wait before actually issuing the GET request to the server.  It should be 0 (or omitted if the fourth argument also is omitted) when onclick or onload is used, but can be a modest value (300 in this first example) with onmouseover to avoid making a request to the server if the user simply sweeps across the link or other evoking element instead of intentionally hovering over it.  If used, you also should use:
    onmouseout = "OLclearAJAX();"
If the popup is not STICKY, include an nd call if it is a primary non-STICKY popup, or an nd2 call if it is a secondary non-STICKY popup, e.g.:
    onmouseover = "return OLgetAJAX(url, command, 300, css);"
onmouseout = "OLclearAJAX(); nd();"
If onclick is used, force a return value of false:
    onclick = "OLgetAJAX(url, command, 0, css); return false;"
as discussed in the onclick support document.
If onload is used do not indicate a return value:
    onload = "OLgetAJAX(url, command, 0, css);"
The optional,
 fourth argument  of the:
    OLgetAJAX(url, command, delay, css);
wrapper function is a quoted string which names a CSS class.  If used,  OLhttp.responseText  is encased by a div container with that class indicated in its start tag when the  OLresponseAJAX  global is constructed.  In this support document we use class names of the form ovfl# which for the first and second examples are:
    .ovfl1 {
  width:510px; height:145px; overflow:auto;
  border:1px none #000000; padding:10px; background:#d8e9ff;
}
.ovfl2 {
  width:550px; height:350px; overflow:auto;
  border:1px none #000000; padding:0px; background:#eeeeee;
}
We include WRAP in the associated overlib or overlib2 calls, so the width and height specified via CSS determine the width and height for the main text area of the popups.  The overflow value of auto specifies that scrollbars should be included within the popups if needed based on the content size.  Such encasement might instead be done by a server-side script, or you may not be concerned about content size and not wish to specify an overflow rule nor the popup dimensions in this manner , which is why the fourth argument is optional in our javascript function set.
WE CAN use POST instead of GET with the XMLHttpRequest object via the OLpostAJAX function of the ajaxcontentmws.js function set.
The required,
 second argument  of the:
    OLpostAJAX(url, qry, command, delay, css);
wrapper function is a quoted string or unquoted string variable name or array entry (or summation) with the material to be POSTed to the server, and typically is a query string (without a lead ?).  The other arguments are as for OLgetAJAX.  To reproduce this first example with POST we would use:
    onmouseover = "return OLpostAJAX('popupContent.php5', 'exa=1', OLcmdExT1,
 300, 'ovfl1');"
onmouseout="OLclearAJAX();"
The POST method might be preferred when using https with a query string or other material which is entered dynamically by the user (e.g., via a form) and which we do not wish to be visible as part of the url, in which case we would also use the name of a string definition or an array entry (e.g., constructed from a form-field value as in the 2nd and 3rd examples, below), rather than a quoted string, as the second argument in the OLpostAJAX call.
AN ALTERNATIVE FORMAT for using OLgetAJAX or OLpostAJAX is illustated in this link:
    <a
 href="javascript:void(0);"
 onmouseover="overlib('Click to use an alternative format',
  TEXTPADDING,4, WRAP, BASE,2, HAUTO, SHADOW, SHADOWCOLOR,'#4466ff');"
 onmouseout="nd();"
 onclick="overlib(
  '&lt;div class=\'ovfl1\' id=\'ajaxexa1\'&gt;&nbsp;Loading . . .&lt;/div&gt;',
  TEXTPADDING,0, CAPTIONPADDING,4, CAPTION,
  'Example with AJAX content via &lt;span '
  +'class=\'yellow\'&gt;responseText&lt;/span&gt;.&nbsp; '
  +'Popup scrolls with the window.',
  WRAP, BORDER,2, STICKY, CLOSECLICK, SCROLL,
  MIDX,0, RELY,90,
  STATUS,'Example with AJAX content via responseText of XMLHttpResponse');
  OLgetAJAX('popupContent.php5?exa=1',
   function(){OLgetRef('ajaxexa1').innerHTML= OLresponseAJAX ;});
  return false;">
Popup with AJAX content via responseText of XMLHttpRequest<\/a>
It's onclick call to overlib invokes a STICKY popup with initial content of &nbsp;Loading . . . encased in a div with a CSS class (ovfl1) that has an overflow:auto; rule.  The div also has an id (ajaxexa1) so that its content can be referenced as OLgetRef('ajaxexa1').innerHTML.  The overlib call thus is followed by an OLgetAJAX call whose first argument is the URL for this first example ('popupContent.php5?exa=1'), and whose second argument is an inline function (without a name; handled equivalently to a function reference for a named function) which sets the content of the div to  OLresponseAJAX .  We then force a return value of false appropriately for onclick.  If we had used OLpostAJAX its first argument would have been 'popupContent.php5', its second argument would have been 'exa=1', and its third argument would have been the inline function.
NOTE that with this format one can easily replace the OLgetAJAX or OLpostAJAX call with a call to the equivalent function in one of the popular libraries for AJAX, e.g., prototype or mootools.
 
The 2nd example is a
Popup with AJAX content via responseXML of XMLHttpRequest
called by the statement:
    return overlib(AppleAJAX, TEXTPADDING,0, CAPTIONPADDING,4,
 CAPTION,'AJAX content via responseXML of XMLHttpRequest.&nbsp; '
 +'Popup scrolls with the window.',
 WRAP, BORDER,2, STICKY, CLOSECLICK, SCROLL,
 MIDX,0, RELY,90,
 STATUS,'Popup with AJAX content via responseXML of XMLHttpRequest');"

with an overlib call which has a lead argument that is a string variable defined for a form:
    var AppleAJAX=
 '<div class="ovfl2">'
+'<form action="javascript:void(0);" class="form">'
+'<table cellspacing="0" cellpadding="0" border="0"><tr>'<td>'
+'<div class="caption">  AJAX and PHP Demo '
+'(choose a Category then choose Items)<\/div>'
+'<div>&#160;&#160;Category:<br \/>'
+'<select onchange="loadDoc(event);">'
+' <option value="">Choose One<\/option>'
+' <option value="AppleAJAXexample.php5?music=songs">Top 10 Songs<\/option>'
+' <option value="AppleAJAXexample.php5?music=albums">Top 10 Albums<\/option>'
+' <option value="AppleAJAXexample.php5?music=new">Top 10 New Releases<\/option>'
+' <option value="AppleAJAXexample.php5?music=just">Top 10 Just Added<\/option>'
+'<\/select>'
+'<\/div>'
+'<div>&#160;&#160;Items:<br \/>'
+'<select size="10" id="topics" onchange="showDetail(event)">'
+' <option value="">Choose a Category First<\/option>'
+'<\,/select>'
+'<\/div>'
+'<div id="details"><span><\/span><\/div>'
+'</td></tr></table>'
+'<\/form>'
+'<\/div>';

The form has two select (drop-down) boxes, for each of which a javascript function is called via the onchange event, i.e., whenever an option is selected.  The option values for the first select box point to a server-side script (AppleAJAXexample.php5) with a query-string indicating a desired Category of music.  The function called via the onchange event includes this call to our wrapper function for using the XMLHttpRequest object:
    OLgetAJAX(elem.options[elem.selectedIndex].value, OLcmdX1);
For its first argument, we use the selected option value, which is a URL with query string.  The second argument is a reference for the function (OLcmdX1) which will handle the XML document object returned via  OLhttp.responseXML  and load the second select box with 10 options.  Whenever one of those is selected, the associated onchange event will invoke another function which will further handle the response and display an image and text below the select box.  That material includes links for invoking Apple's iTunes digital jukebox and online music store (if installed on your computer), thereby making music-minded members of the iPod generation ecstatic.
 
The 3rd example is a
Draggable popup with iframe content that has AJAX content
called by the statement:
    return overlib(
 OLiframeContent(
'popupContent.php5?exa=3', 550, 350, 'ifajax', 1),
 WIDTH,550, TEXTPADDING,0, BORDER,2, STICKY, CLOSECLICK, DRAGGABLE,
 CAPTIONPADDING,4, CAPTION,'Example with iframe and AJAX content.&nbsp; '
 +'Draggable via the caption.',
 MIDX,0, MIDY,0, FGCLASS,'olfgifajax',
 STATUS,'Draggable with iframe and AJAX content and a caption'
);"
which uses this simple function for the lead argument in the overlib call:
    function OLiframeContent(src, width, height, name, frameborder, scrolling) {
 return ('<iframe src="'+src+'" width="'+width+'" height="'+height+'"'
  +(name!=null?' name="'+name+'" id="'+name+'"':'')
  +(frameborder!=null?' frameborder="'+frameborder+'"':'')
  +' scrolling="'+(scrolling!=null?scrolling:'auto')+'">'
  +'<div>[iframe not supported]<\/div></iframe>');
}
You can:
    Import the distribution's iframecontentmws.js support script to
have this function available for use with overlib or overlib2 calls.
It's first argument is a URL for a server-side script or pre-existing file as for the first argument in the OLgetAJAX function.  In this example it is for our php script (popupContent.php5) with a query string (?exa=3) which serves as an instruction to return the content for this third example.  The script actually returns a pre-existing file (AppleAJAXexamplePHP.html), with an appropriate header indicating a Content-Type of text/html by using:
    <?php header('Content-Type: text/html'); ?>
We could have used a URL for the file directly, rather than via the sever-side script.  The file contains the same form as used in the second example, which the server-side script in theory might have fetched from a database and sandwiched between "top" and "bottom" sections to construct a complete HTML document. The second argument specifies the width for the iframe and consequently for the main text area of the popup.  The third argument similarly specifies the height.  The fourth argument is a quoted string which specifies the name (and id) for the iframe container element, and the fifth argument is the integer 1 or 0 for its frameborder attribute.
IN ADDITION to manipulating popup content with the XMLHttpRequest object via the OLgetAJAX or OLpostAJAX function, when it is iframe content we can do content swapping via the src for the iframe element.  In this third example we included this link for a Help document:
    [<a
   href="javascript:OLswapIframeSrc('ifajax', 'popupContent.php5?exa=3help');"
   title="get Help on how to use this form">get Help<\/a>]
so that the Help document can be swapped in via the OLswapIframeSrc function of the iframecontentmws.js function set:
    function OLswapIframeSrc(name, src){
 if(parent==self){
  alert(src+'\n\n is only for iframe content');
  return;
 }
 var o = parent.OLgetRef(name);
 if(o)o.src = src;
 else alert(src+'\n\n is not available');

}
for which the first argument is the name ('ifajax') we assigned to the iframe via the fourth argument of the OLiframeContent function, and the second argument (src) is the URL (popupContent.php5?exa=3help) for the Help document, which for this third example also is a pre-existing file (AppleAJAXexamplePHPhelp.html).  Note that we get the iframe object by using the OLgetRef function of the overlibmws.js core module, invoked in the parent document (AJAX.html) by use of the parent reference.  Within the Help document we include this link:
    [<a
   title="return to the Demo"
   href="javascript:OLiframeBack();">return to Demo<\/a>]
for restoring the preceding iframe document via the OLiframeBack function of the iframecontentmws.js function set:
    function OLiframeBack(){
 if(parent==self){
  alert('This feature is only for iframe content');
  return;
 }
 history.back();

}
which simulates the browsers's Back button.
NOTE that the iframe with AJAX document and the Help document include code for resetting the o3_draggable runtime variable if a rapid downward drag via the caption area causes the cursor to "slip" into the iframe content:
    <script type="text/javascript">
//<![CDATA[
if (!document.layers &&
    parent != self && typeof parent.o3_dragging != 'undefined') {
 document.onmouseup = function(e){parent.o3_dragging = 0;}
}
//]]>

<\/script>
The second and third examples were adapted from a standalone example offered by Apple in its Developer Connection.
 
The 4th example is a
Popup with AJAX flash (object/embed) content that includes audio
called by the statement:
    onmouseover = "return OLgetAJAX('popupContent.php5?exa=4', BJAJAX, 300, 'ovflh');"
which uses the wrapper function set for the browser's XMLHttpRequest object with this (2nd argument) function for the overlib popup:
    function BJAJAX() {
 return overlib( OLresponseAJAX , TEXTPADDING,0, CAPTIONPADDING,4, CAPTION,
 '<a href="http://www.adhesivetheater.com/jug/jug.html" '
 +'target="_blank" onclick="cClick();" '
 +'title="Brooklyn Jugs archive at the Adhesive Theater Project" '
 +'class="grncap">Brooklyn Jugs archive<\/a> at the ATP',
 BGCLASS,'grnbg', CGCLASS,'grncg', FGCLASS,'grnfg',
 CAPTIONFONTCLASS,'grncap', CLOSEFONTCLASS,'grncap',
 WRAP, BORDER,1, STICKY, CLOSECLICK, SCROLL, MIDX,0, RELY,100,
 LABEL,'audio',
 EXCLUSIVE, EXCLUSIVESTATUS,
 'Close the current popup to re-enable other popups');
}

The EXCLUSIVE command is included so that the popup cannot be closed inadvertently.  The LABEL command with the parameter 'audio' is included (and in any other overlib calls for popups with audio in their content) for use in a daisy-chain to the core module's cClick function:
    var cClickOld=cClick;

function cClickNew(){
 if(OLloaded&&OLgateOK){
  var o=(o3_label=='audio')?OLgetRef('overDiv'):null;
  cClickOld();
  if(o)o.innerHTML="";
 }
 return false;
}

cClick=cClickNew;

This daisy-chain code is included in a script block in the head section, following the script block which imports the overlibmws.js core module.  For popups with the 'audio' label, it causes the overDiv positioned div to be emptied in addition to having its visibility set to "hidden" so that the audio will not continue playing in the background after cClick is called via the popup's Close link.  Note that the popup includes a targeted link (i.e., one which opens a new window or tab rather than replacing the document in the current window or tab).  We include onclick="cClick();" in that link so that the audio will be silenced when the new window or tab is opened and receives focus.  Also note that we rely solely on WRAP to set the size, and ensure that scrollbars will not be invoked by using this CSS class for the 4th argument:
    .ovflh {overflow:hidden;}
Now let's use AJAX flash (object/embed) content that has a:
Sound Track for Acting instead of Singing
called by the statement:
    onmouseover = "return OLgetAJAX('popupContent.php5?exa=4v', NBCAJAX, 300,
  'ovflh');"
which uses this (2nd argument) function for the overlib popup:
    function NBCAJAX() {
 return overlib( OLresponseAJAX , TEXTPADDING,0, CAPTIONPADDING,6, CAPTION,
 '<a href="http://www.nbc.com/Saturday_Night_Live/video/" '
 +'target="_blank" onclick="cClick();" '
 +'title="Go to the Saturday Night Live video page" '
 +'class="grycap">Saturday Night Live<\/a> on NBC',
 BGCLASS,'grybg', CGCLASS,'grycg', FGCLASS,'gryfg', CAPBELOW,
 CAPTIONFONTCLASS,'grycap', CLOSEFONTCLASS,'grycap',
 WRAP, BORDER,1, STICKY, CLOSECLICK, SCROLL, MIDX,0, RELY,10,
 LABEL,'audio',
 EXCLUSIVE, EXCLUSIVESTATUS,
 'Close the current popup to re-enable other popups');
}

 
The 5th example helps a user to:
Visualize and Print Travel Information via Google Maps
invoked via the link:
    <a
 href="http://maps.google.com/maps? f=q&amp;hl=en&amp;q=502+Court+St,+Brooklyn,+NY+11231&amp;ll=40.683111,- 73.998756&amp;spn=0.02226,0.066605"
 target="_blank"
 onmouseover="overlib('Click to view Google Maps for Le Petit Cafe',
  TEXTPADDING,4, WRAP, BASE,2, HAUTO, SHADOW, SHADOWCOLOR,'#4466ff');"
 onmouseout="nd();"
 onclick="overlib(myGMdiv, TEXTPADDING,0, CAPTION,myGMdivCap,
  STICKY, CLOSECLICK, WIDTH,500, BASE,2, MIDX,0, RELY,2,
  PRINT, PRINTFONTCLASS,'olcloGM', PRINTJOB,'PrintGoogleMap(lowPowerGM)',
  PRINTTITLE,'Click to Print the Low Power Google Map',
  CGCLASS,'olcgGM', CLOSEFONTCLASS,'olcloGM',
  SHADOW, SHADOWX,8, SHADOWY,8, STATUS,'Google Maps for Le Petit Cafe');
  doLePetitCafeGoogleMaps(
'map');
  event.returnValue=false; return false;
"

>Visualize and Print Travel Information via Google Maps</a>
which uses the onclick event with an initial overlib call to initiate display of a popup set, then calls the function doLePetitCafeGoogleMaps to load a low-power Google Map into the primary popup and make available a high-power Google Map and iframe access to the Le Petit Cafe website via links in the caption for secondary popups, as well as driving and subway information for Le Petit Cafe (in Brooklyn, where a tree grew) via a secondary popup associated with the pin in the low-power map.  (The lovely and talented Kalle Macrides was married at Le Petit Cafe on June 3, 2006.)  Note that the href attribute value has been wrapped by your browser, and should be one long line without spaces.  Although we force a return value of false for the onclick event so that the href would not normally be acted upon, we do include a URL for invoking a map in another window (by virute of the target attribute value) via the Google site should the user have the browser's javascript turned off.  The Google Map content uses the XMLHttpRequest object to load map panels, and to dynamically shift them in conjuction with left-click and dragging movement with the cursor positioned on the map content.  Use of the basic AJAX code from Google requires a site-specific API key which should be obtained for your own site.  The javascript code in the doLePetitCafeGoogleMaps function provides an interface between the popups and the basic Google Maps code accessed with the API key.  The PrintGoogleMap function uses string variables (lowPowerGM and highPowerGM) with the URLs via which to fetch and load files for printing the maps by using the PRINTJOB command of the overlibmws_print.js plug-in module.
 
Debugging a popup and AJAX
 
OLoverHTML    over.innerHTML    OLover2HTML    over2.innerHTML    OLresponseAJAX   
These five links invoke STICKY, EXCLUSIVE popups for showing the OLoverHTML value for the last-invoked primary popup (via an OLoverHTMLshow function call), the current over.innerHTML markup (via an OLshowMarkup function call), the OLover2HTML value for the last-invoked secondary popup (via an OLover2HTMLshow function call), the current over2.innerHTML markup (via an OLshowMarkup function call), and the current OLresponseAJAX value from the last-invoked AJAX request (via an OLresponseAJAXshow function call).
Note that the innerHTML markup is nulled when a primary or secondary popup is closed, so that standalone links as above for showing their innerHTML markup are useful only when the popups are STICKY and currently being displayed.  The OLshowMarkup calls normally would be inserted (temporarily, for debugging) immediately after the overlib or overlib2 call, e.g.:
    onmouseover="overlib(...); OLshowMarkup(over.innerHTML); return true;"

onclick="overlib(...); OLshowMarkup(over.innerHTML); return false;"

onmouseover="overlib2(...); OLshowMarkup(over2.innerHTML); return true;"

onclick="overlib2(...); OLshowMarkup(over2.innerHTML); return false;"

Also note that such inserted OLshowMarkup calls, or their calls in the above standalone links:
    title="Click to check over.innerHTML"
onclick="OLshowMarkup((over)?over.innerHTML:''); return false;"

title="Click to check over2.innerHTML"
onclick="OLshowMarkup((over2)?over2.innerHTML:''); return false;"

show the innerHTML which the browser itself created and used, based on the markup which was created by the overlibmws library's Layer Generation Functions (LGFs) for loading into the overDiv or over2Div positioned div (i.e., into the over or over2 objects, respectively).
The markup created by the LGFs (based on the arguments in the overlib or overlib2 call) is saved (at time of creation) in the OLoverHTML and OLover2HTML global variables, and so those can be used (temporarily, for debugging) to show that markup for the last (either still open or closed and either tooltip or STICKY) popup, either via insertions:
    onmouseover="overlib(...); OLoverHTMLshow(); return true;"

onclick="overlib(...); OLoverHTMLshow(); return false;"

onmouseover="overlib2(...); OLover2HTMLshow(); return true;"

onclick="overlib2(...); OLover2HTMLshow(); return false;"

or in standalone links:
    title="Click to check over.innerHTML"
onclick="OLoverHTMLshow(); return false;"

title="Click to check over2.innerHTML"
onclick="OLover2HTMLshow(); return false;"

Displaying the current OLresponseAJAX value from the last AJAX request may be helpful when your are debugging your server-side script and the markup it is returning in response to the AJAX request.  The OLresponseAJAXshow function call can be (temporarily) inserted either into the function which handles the response, e.g.:
    function OLcmdExT1() {
 overlib( OLresponseAJAX , TEXTPADDING,0, CAPTIONPADDING,4, CAPTION,
 'Example with AJAX content via &lt;span '
 +'class="yellow"&gt;responseText&lt;/span&gt;.&nbsp; '
 +'Popup scrolls with the window.',
 WRAP, BORDER,2, STICKY, CLOSECLICK, SCROLL,
 MIDX,0, RELY,100,
 STATUS,'Example with AJAX content via responseText of XMLHttpResponse');
 OLresponseAJAXshow(); return false;"
}

or into a standalone link as above:
    title="Click to check OLresponseAJAX"
onclick="OLresponseAJAXshow(); return false;"

You need to import the distribution's htmlspecialcharsmws.js support script to have these functions available for use when debugging any problems with your overlib or overlib2, and OLgetAJAX or OLpostAJAX function calls.  It includes an OLhtmlspecialchars(str, quo) function which performs the equivalent of the php htmlspecialchars(string, quote_style) function for converting special characters to HTML entities in HTML or XHTML fragments.  The optional second argument can be included (ENT_NOQUOTES or ENT_QUOTES) to change the transformations of double and/or single quotes from the default (i.e., when that argument is omitted) which is to transform the double but not singe quotes.  The above display functions use the transformation function to create the lead argument for their STICKY, EXCLUSIVE overlib calls (so that the markup will be displayed instead of acted upon), and similarly can accept the optional argument.  You also can use the transformation function in conjunction with the overlibmws_debug.js module's OLshowProperties function.  Finally, your browser's own debugging tools also may be helpful.  But if worse comes to worst and none of these debugging aids do the trick, you can always post to the Support Group for help (and be sure to include, if possible, a URL for a test document which shows the problem).

Use your browser's View Source option to see the markup for these examples.


These examples use overlibmws and its commands.


Copyright Foteos Macrides
  2002-2010.
  All rights reserved.
Click to Donate