Solved

Ajax and coldfusion onmouseover functionality...

Posted on 2006-10-26
5
470 Views
Last Modified: 2013-12-20
Hi, I'd like to learn how to use ajax with coldfusion.  Right now I'm getting a list of id's from a table that contains id, customerName, and customerAddress.  I'd like a way to be able to do a 'onmouseover' on each of the id's and then textarea or any other input element would display user name and address.  I have pasted my current code below.

Any help would be well appreciated!  Working examples would be a great help!
Thanks in advance,
Carol
<html><body>
<cfquery name="getAllcustomers" datasource="#DSN#">
   Exec getAllcustomers</cfquery>
<table><cfoutput query="getAllcustomers">            
<tr><td>#id#</td>//A whole big list of customer id's</tr>
</cfoutput></table>
<textarea></textarea> //This would contain customer info onMousing over
</body></html>
0
Comment
Question by:carolotisman
[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
  • 3
5 Comments
 
LVL 39

Assisted Solution

by:gdemaria
gdemaria earned 30 total points
ID: 17817024
0
 
LVL 2

Accepted Solution

by:
theamzngq earned 125 total points
ID: 17845717
A working example, made up of two files:

The first, named what ever you like, that contains this:

<script type="text/javascript">
      // this function creates the object which will do the work of fetching data in the background
      function createRequestObject() {
            var request_;
            if(document.all) {
                  request_ = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                  request_ = new XMLHttpRequest();
            }
            return request_;
      }
      // setting this variable calls the above function, creating the object and assigning it to the variable 'http'
      var http = createRequestObject();
      
      function getAddr(theID) {
            // open the page in the background, passing the id variable in the url
            // I've found that adding the date/time stuff on the end of the url helps to avoid caching of results that
            // some browers will do by making the url 'unique'.
            http.open('get', 'getAddress.cfm?id=' + theID + '&time=' + new Date().getTime());
            // there are multiple 'states of being' that this process goes through, so everytime it changes, we call this function
            http.onreadystatechange = displayAddr;
            // I believe this part ends the whole proceess (though I'm not sure about that, I've just always included it)
            http.send(null);
            }
            
      function displayAddr() {
            // if the state is 4, which means the background get process is done doing its thing...
            if(http.readyState == 4){
            // fill the div with the HTML from the background process
            document.getElementById("AddrDisplay").innerHTML = http.responseText;
            }
      }

</script>

<cfquery name="getAllcustomers" datasource="#DSN#">
   select id from customer_test
</cfquery>

<table border="1" width="100">
<cfoutput query="getAllcustomers">          
<tr><td onMouseOver="getAddr(#id#);" onMouseOut="document.getElementById('AddrDisplay').innerHTML ='';">#id#</td></tr>
</cfoutput>
</table>
Name and Address:<br>
<div id="AddrDisplay"></div>


Another, called getAddress.cfm, with this:

<cfquery datasource="#DSN#" name="getAddr">
      select * from customer_test where id = #url.id#
</cfquery>

<cfoutput>
      #getAddr.customerName#<br />
      #getAddr.customerAddress#
</cfoutput>
0
 
LVL 2

Expert Comment

by:theamzngq
ID: 17845731
hopefully the notes in the script section explain what is going on with the ajax side.  The only other thing to note is that I've added an 'onmouseout' attribute to the cell so that it clears the name and address once you move off of the cell.
0
 

Author Comment

by:carolotisman
ID: 17907878
Hi, thank you so much for your code examples, comments, and suggestions theamzngq and gdemaria !  Sorry for the delay, but I'd like to reward points at this time, and hope you can answer my related questions as I continue work on this.

Thanks so much,
C.
0
 
LVL 2

Expert Comment

by:theamzngq
ID: 17907996
No problem, thx!
0

Featured Post

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

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…
This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

636 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