Solved

Load new content without refreshing page

Posted on 2004-10-21
169 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
Question by:zakirdavis
    5 Comments
     
    LVL 5

    Accepted Solution

    by:
    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
    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
    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
    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
    Thanks. Do you do any CF programming on the side for money? What is your rate?
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
    When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
    This Experts Exchange video Micro Tutorial shows how to tell Microsoft Office that a word is NOT spelled correctly. Microsoft Office has a built-in, main dictionary that is shared by Office apps, including Excel, Outlook, PowerPoint, and Word. When …
    Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…

    933 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

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now