Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Load new content without refreshing page

Posted on 2004-10-21
5
Medium Priority
?
218 Views
Last Modified: 2013-12-24
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

0
Comment
Question by:zakirdavis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 5

Accepted Solution

by:
umbrae earned 2000 total points
ID: 12377860
There are two most obvious ways:

the first, and probably easiest, is to have the table be an <iframe> (ref: http://www.htmlhelp.com/reference/html40/special/iframe.html ), and have the links for 5, 10, or all target the iframe giving it a URL parameter for how many to show.

The second is to do it through javascript, using some DHTML to accomplish the job. Have the first 5 be in a <div> tag with an ID of like "show5", 10 be in div with id "show10", and the rest be in "showAll", and for each of them set the style on the div like so: <div id="showNum" style="display: none;">, and then the link for show 5 for example would be <a href="javascript://" onClick="document.getElementById('show5').style.display='block';">Show 5</a>

This would make it show the first 5. Continue on for the rest of them.

Anyway, hope this helps. If you need examples let me know. I would suggest the iframe method, for the record.

-Umbrae
0
 

Author Comment

by:zakirdavis
ID: 12382768
I want to stay away from the ifram. i like the javascript idea. how about an example. Thanks.
0
 
LVL 5

Expert Comment

by:umbrae
ID: 12383454
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>
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 12385195
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.....
0
 

Author Comment

by:zakirdavis
ID: 12385792
Thanks. Do you do any CF programming on the side for money? What is your rate?
0

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you ever sent email via ColdFusion and thought of tracking this mail to capture the exact date and time when the message was opened ?  If yes, then this article is for you ! First we need a table user_email with columns user_id , email , sub…
What You Need to Know when Searching for a Webhost Provider
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Screencast - Getting to Know the Pipeline
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question