<!---//
        This will hopefully give you a good starting point to begin using XMLHTTP inside of your applications.
        It really makes reports and apps feel a lot smoother and more seamless when you dont have to change pages
        to view other data. Make sure when modifying this that you always use document.getElementById('<your div here>'),
        or your code will work in IE and not firefox and you wont know why. :)

        You will need to modify the searchpage.cfm to search your own database, and return whatever data you want, but give it a whirl and let me know what you think!
//--->

<!---// START PAGE CALLED TUTORIAL.CFM //--->

<!---// Assign variables here //--->
<cfset xml_divname = 'searchResults'>
<cfset xml_processingPage =
'searchpage.cfm?phrase='>

<script type="text/javascript">
    var xmlhttp=false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    // JScript gives us Conditional compilation, we can cope with old IE versions.
    // and security blocked creation of the objects.

    try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                    xmlhttp = false;
            }
    }
    @end @*/
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }

    // function getfile will perform our request using our created xmlhttp object //
    <cfoutput>
        function getfile() {
                // this line refers to our input box named filename //
                var Current = "#xml_processingPage#" + document.myform.searchphrase.value;
                        xmlhttp.open("GET", Current, true);
                        xmlhttp.onreadystatechange=function() {
                                            if (xmlhttp.readyState==4) {
                                                        document.getElementById('#xml_divname#').innerHTML = xmlhttp.responseText;
                                            }
                        }
                xmlhttp.send(null)
        }
    </cfoutput>
</script>

<div id="mytopnav" align="center" style=" position:relative; display:block;">
    <center><h2>
XML Search Example</h2></center>
    <h3>
This code will pass a search request on to your own search page, in this case called searchpage.cfm, and put the results into a DIV in the bottom of your web page</h3>
    <form name="myform">
        <input name="searchphrase" maxlength="8" autocomplete="no"><a href="#" onClick="getfile()">Submit Query</a>
    </form>

</div>

<hr width=
"100%">
<div id=
"searchResults" title="searchResults" style="position:relative; display:block; width:100%;"></div>

<!---// END PAGE TUTORIAL.CFM //--->

 

<!---// START PAGE SEARCHPAGE.CFM //--->
<cfquery name="GetNames" datasource="#Application.SQLDSN#" maxrows="15">
    SELECT DISTINCT
                custcode,
                customername
    FROM
                #application.DataTable#
    WHERE
                Reportnumber = '#URL.ReportNum#'
         AND customername LIKE '%#UCASE(URL.phrase)#%'
</cfquery>

<cfoutput query="GetNames">
#customername#<BR>
</cfoutput>
<!---// END PAGE SEARCHPAGE.CFM //--->

About This Tutorial
Author: Justice
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5,CFMX
Total Views: 81,141
Submission Date: January 07, 2005
Last Update Date: June 05, 2009
All Tutorials By This Autor: 4
Discuss This Tutorial
  • How would you change the javascript so that it simply updated the query every couple of minutes instead of waiting for a form to be submitted Like displaying the score in a Football game or something??

Advertisement


Website Designed and Developed by Pablo Varando.