Solved

Ajax and coldfusion onmouseover functionality...

Posted on 2006-10-26
5
465 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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
wordpress limitations 4 148
Intranet building Software 8 137
Web Development Tools for MVC 3 128
Use System DSN 6 95
Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to Import and export files in 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 : Click on Too…

752 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