The iFrameRPC.js file never changes for any pages that you ever want to use theis background submit.
The HTML page simply has your form, a function that gets called on the user action, and the function that fills in the return results. So the 2 Javascript functions in the head and the form are the only things that need to be modified.
The last CF page - which is really short - only needs to have the query modified to pull your results (notice the parameters get passed via URL - but as this is done in the background the user never sees the URL so it can be as messy as necessary). Then the call to the last javascript function back on the main page is how you pass back the data.
SO really there are 3 pages involved - but only 2 of those need to be modified.
Main Topics
Browse All Topics
by: mrichmonPosted on 2004-03-29 at 09:49:20ID: 10706062
Okay this is done in a few steps.
Step 1) include the following file as a javascript file and save as iFrameRPC.js
// ****************BEGIN FILE**********************
var IFrameObj; // our IFrame object
function callToServer(backgroundURL
if (!document.createElement)
{// todo :: implement some kind of redirection if browser doesn't support creating of dom object
return true;
}
var IFrameDoc;
var URL = backgroundURL;
if (!IFrameObj && document.createElement)
{// create the IFrame and assign a reference to the object to our global variable IFrameObj.
// this will only happen the first time callToServer() is called
try
{
var tempIFrame=document.create
tempIFrame.setAttribute('i
tempIFrame.style.border='0
tempIFrame.style.width='0p
tempIFrame.style.height='0
IFrameObj = document.body.appendChild(
if (document.frames)
{// this is for IE5 Mac, because it will only allow access to the document object
// of the IFrame if we access it through the document.frames array
IFrameObj = document.frames['RSIFrame'
}
}
catch(exception)
{// This is for IE5 PC, which doesn't allow dynamic creation/manipulation of iframe object.
// Instead, we'll fake it up by creating our own objects.
iframeHTML='\<iframe id="RSIFrame" style="';
iframeHTML+='border:0px;';
iframeHTML+='width:0px;';
iframeHTML+='height:0px;';
iframeHTML+='"><\/iframe>'
document.body.innerHTML+=i
IFrameObj = new Object();
IFrameObj.document = new Object();
IFrameObj.document.locatio
IFrameObj.document.locatio
IFrameObj.document.locatio
}
}
if (navigator.userAgent.index
{ // we have to give NS6 a fraction of a second
// to recognize the new IFrame
setTimeout('callToServer()
return false;
}
if (IFrameObj.contentDocument
{ // For NS6
IFrameDoc = IFrameObj.contentDocument;
}
else if (IFrameObj.contentWindow)
{ // For IE5.5 and IE6
IFrameDoc = IFrameObj.contentWindow.do
}
else if (IFrameObj.document)
{ // For IE5
IFrameDoc = IFrameObj.document;
}
else
{
return true;
}
IFrameDoc.location.replace
return false;
}
//*****************END FILE**********************
(Watch out for some wrapping (due to forum) of above that should be on one line....)
That page always stays the same.
Then on the page that will do the call it will look something like this :
<!--- HTML/CF page with the form the user fills out --->
<html>
<head>
<title>Background Submit Example Page</title>
<script type="text/javascript" language="JavaScript" src="scripts/iframeRPC.js"
<script type="text/javascript" language="JavaScript">
function LookupISBN(i)
{
var ISBN = eval("document.TextbookAdo
if (ISBN != "")
{ // If an ISBN was entered then look it up in our DB
callToServer("RPC_Textbook
}
}
function ISBNLookupComplete(ID, Found, Title, Author, Publisher, Edition)
{
if(Found)
{ // ISBN in DB so fill in data
eval("document.TextbookAdo
eval("document.TextbookAdo
eval("document.TextbookAdo
eval("document.TextbookAdo
}
return;
}
</script>
</head>
<body>
<form name="myform" method="post" action="destination.cfm">
ISBN:<input type="text" name="ISBN_1" id="ISBN_1" onBlur="LookupISBN(#i#);">
Title:<input type="text" name="Title_1" id="Title_1" size="50" maxlength="60">
Author:<input type="text" name="Author_1" id="Author_1" size="50" maxlength="60">
Publisher:<input type="text" name="Publisher_1" id="Publisher_1" size="50" maxlength="60">
Edition:<input type="text" name="Edition_1" id="Edition_1" size="50" maxlength="60">
etc...
</form>
</body>
</html>
Note that the action of the form is where you want the final form submitted to - not the background submit that will fill in the rest of the fields, but the page that will store the final submitted results (auto filled in fields AND user filled in fields)
Also note that the only field that has the onBlur event (this could also be onChange or onClick, etc) is the ISBN field or in your case the radio buttons.
The javascript include inthe head of the page includes the above iFrame file.
The two functions in the head of the page work as follows:
The LookupISBN function is called on the event such as onBlur. It does a submit to the page I called RPC_TextbookLookup.cfm which has any variables passed in the URL. I pass the ISBN and the ID of the field (since I actually have a dymnamic set of fields so that more than one textbook can be done at a time)
The code on the RPC_TextbookLookup.cfm page looks like this :
<cfset CleanISBN = REReplace(Ucase(URL.ISBN),
<cfquery datasource="myDSN" name="LookupTextbook">
SELECT Title, Author, Publisher, Edition
FROM mytable
WHERE ISBN = <cfqueryparam cfsqltype="cf_sql_varchar"
</cfquery>
<cfif LookupTextbook.RecordCount
<cfset Found = false><!--- Did not find Textbook; set other fields to blank --->
<cfset Title = "">
<cfset Author = "">
<cfset Publisher = "">
<cfset Edition = "">
<cfelse>
<cfset Found = true><!--- Found Textbook; set other fields to DB values --->
<cfset Title = LookupTextbook.Title>
<cfset Author = LookupTextbook.Author>
<cfset Publisher = LookupTextbook.Publisher>
<cfset Edition = LookupTextbook.Edition>
</cfif>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfoutput>
<body onLoad="window.parent.ISBN
</body>
</cfoutput>
</html>
SO as soon as this page is called the CF runs and when the page is done loading the Javascript function runs. The javascript line calls the 2nd function that was in the head of the html or cf page with the form and that populates the fields with the data if it was found.
Let me know if you have any questions and I can explain further.