Solved

Ajax and coldfusion onmouseover functionality...

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

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

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

Suggested Solutions

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

828 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