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 <span '
+'class="yellow">responseText</span>. '
+'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(
'<div class=\'ovfl1\'
id=\'ajaxexa1\'> Loading . .
.</div>',
TEXTPADDING,0, CAPTIONPADDING,4, CAPTION,
'Example with AJAX content via <span '
+'class=\'yellow\'>responseText</span>. '
+'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
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. '
+'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>  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>  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. '
+'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&hl=en&q=502+Court+St,+Brooklyn,+NY+11231&ll=40.683111,-
73.998756&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 <span '
+'class="yellow">responseText</span>. '
+'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).
|
|
