Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Ajax and coldfusion onmouseover functionality...

Posted on 2006-10-26
5
Medium Priority
?
484 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 120 total points
ID: 17817024
0
 
LVL 2

Accepted Solution

by:
David Williamson earned 500 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:David Williamson
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:David Williamson
ID: 17907996
No problem, thx!
0

Featured Post

Nothing ever in the clear!

This technical paper will help you implement VMware’s VM encryption as well as implement Veeam encryption which together will achieve the nothing ever in the clear goal. If a bad guy steals VMs, backups or traffic they get nothing.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
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…

971 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