Solved

Ajax and coldfusion onmouseover functionality...

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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

Suggested Solutions

This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
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…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. 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 :…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

786 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