Link to home
Start Free TrialLog in
Avatar of zakirdavis
zakirdavis

asked on

Load new content without refreshing page

I have a page that displays data from multiple tables from one dsn.

I am displaying 5 results from 4 different tables (20 total records) on the same page (example below), and i would like the user to be able to select "Show 5, 50, or All Results"  per category without having to refresh the entire page.

In the example below, i want the user to be able to click on 5, 50 or All, the page will show the respective results without refreshing the page. Is this possible? Do you need more clarification?
--------

Example of how app will look

Category: Shoes            Show (5, 50, All) Results Per Page

Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3


Category: Boots            Show (5, 50, All) Results Per Page
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3


Category: Sandals      Show (5, 50, All) Results Per Page

Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3

Category : Dress Shoes       Show (5, 50, All) Results Per Page

Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3
Column 1      Column 2      Column 3

ASKER CERTIFIED SOLUTION
Avatar of umbrae
umbrae

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of zakirdavis
zakirdavis

ASKER

I want to stay away from the ifram. i like the javascript idea. how about an example. Thanks.
Heres an example small page:

<HTML>
<HEAD>
<script>
function clear(idname)
{
  document.getElementById(idname + '5').style.display = 'none';
  document.getElementById(idname + '10').style.display = 'none';
  document.getElementById(idname + 'Rest').style.display = 'none';
}

function show5(idname)
{
  clear(idname);
  document.getElementById(idname + '5').style.display = 'block';
}
function show10(idname)
{
   clear(idname);
   show5(idname);
   document.getElementById(idname + '10').style.display = 'block';
}
function showAll(idname)
{
   clear(idname);
   show10(idname);
   document.getElementById(idname + 'Rest').style.display = 'block';
}
</script>
</HEAD>
<BODY>
<a href="javascript:void(0)" onclick="show5('blah');" HIDEFOCUS>
Show 5</a>
 <a href="javascript://" onClick="show10('blah');">Show 10</a>
 <a href="javascript://" onClick="showAll('blah');">Show All</a>
<div ID="blah5" style="display:none;">
<li>First
<li>Five
<li>Records
<li>Are
<li>Here
</div>
<div ID="blah10" style="display:none;">
<li>Next
<li>Five
<li>Records
<li>Are
<li>Here
</div>
<div ID="blahRest" style="display:none;">
<li>Rest
<li>of
<li>Records
<li>Are
<li>Here
</div>
</BODY>
</HTML>
Or have javascript query in the background and update the page accordingly.

Here is an example where when you enter an ISBN number it looks up the info in the database and then fills in the fields - all without refreshing the page:

 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.createElement('iframe');
               tempIFrame.setAttribute('id','RSIFrame');
               tempIFrame.style.border='0px';
               tempIFrame.style.width='0px';
               tempIFrame.style.height='0px';
               IFrameObj = document.body.appendChild(tempIFrame);
               
               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+=iframeHTML;
               IFrameObj = new Object();
               IFrameObj.document = new Object();
               IFrameObj.document.location = new Object();
               IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
               IFrameObj.document.location.replace = function(location) {this.iframe.src = location;}
          }
     }          
 
     if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument)
     {     // we have to give NS6 a fraction of a second
           // to recognize the new IFrame
           setTimeout('callToServer()',10);
           return false;
     }
 
     if (IFrameObj.contentDocument)
     {     // For NS6
          IFrameDoc = IFrameObj.contentDocument;
     }
     else if (IFrameObj.contentWindow)
     {     // For IE5.5 and IE6
          IFrameDoc = IFrameObj.contentWindow.document;
     }
     else if (IFrameObj.document)
     {     // For IE5
           IFrameDoc = IFrameObj.document;
     }
     else
     {
          return true;
     }
 
     IFrameDoc.location.replace(URL);
     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>
<script type="text/javascript" language="JavaScript">
function LookupISBN(i)
{
     var ISBN = eval("document.TextbookAdoptionForm.ISBN_" + i).value;
         
     if (ISBN != "")
     {     // If an ISBN was entered then look it up in our DB
          callToServer("RPC_TextbookLookup.cfm?ISBN=" + escape(ISBN) + "&ID=" + i);
     }
}

function ISBNLookupComplete(ID, Found, Title, Author, Publisher, Edition)
{    
     if(Found)
     {     // ISBN in DB so fill in data
          eval("document.TextbookAdoptionForm.Title_" + ID).value = Title;
          eval("document.TextbookAdoptionForm.Author_" + ID).value = Author;
          eval("document.TextbookAdoptionForm.Publisher_" + ID).value = Publisher;
          eval("document.TextbookAdoptionForm.Edition_" + ID).value = Edition;
     }
     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), "[^0-9,X,B]", "", "ALL")>
<cfquery datasource="myDSN" name="LookupTextbook">
     SELECT Title, Author, Publisher, Edition
     FROM mytable
     WHERE ISBN = <cfqueryparam cfsqltype="cf_sql_varchar" value="#CleanISBN#">
</cfquery>

<cfif LookupTextbook.RecordCount EQ 0>
     <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.ISBNLookupComplete(#URL.ID#, #Found#, '#Title#', '#Author#', '#Publisher#', '#Edition#');">
</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.

 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.


SO Iframes are involved in a way, but not the normal use of an iframe.....
Thanks. Do you do any CF programming on the side for money? What is your rate?