Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Autosuggest problem: 2nd select fires before submit button is pressed

Status
Not open for further replies.
emccormick

emccormick

MIS
Sep 27, 2006
7
US
I have a cfinput autosuggest in a cfform which is used to populate a div and a grid in an adjacent tablayout. When the user first enters a min of two characters in the autosuggest, the autosuggest populates the drop down correctly from a query. The user makes a selection and hits the submit button. The div and grid in the adjacent tablayout appear and populate correctly.

But now the user wants to make another selection, and things get weird. Another pair of characters is entered and autosuggest populates correctly. When the user clicks one of the choices, something fires immediately. The grid refreshes, but the div does not. The autosuggest drop down freezes up momentarily as it collapses. The user hits the submit button and only then will the div refresh. The grid refreshes again. This seems aberrant, and on searches returning larger result sets, it's slow and annoying.

I've stripped the app down to a minimum working example and included the code. There are 6 templates. The only requirement is they must be put in a folder named 'test'. Also, it's designed for IE7 only. If someone could grab the code and have a look....

Very much appreciated.

Attach Code

<!--- template: index.cfm --->
<!--- mccormick: 4-2-08 --->
<!--- main page for my app --->
<!--- cfajax enabled --->

<cfajaximport tags="cfinput-autosuggest,cfdiv,cfwindow,cflayout-tab,cfform,cfgrid">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<script language="javascript">
<!--- cfajax callback functions --->
var orgcallBack = function(){
/*document.getElementById("orgsection").innerHTML = "";*/
}
var salescallBack = function(){
/*document.getElementById("").innerHTML = "";*/
}
var oppscallBack = function(){
/*document.getElementById("").innerHTML = "";*/
}

<!--- The error handler pops an alert with the error code and message --->
var myerrorhandler = function(errorCode,errorMessage){
alert("[In Error Handler]" + "\n\n" + "Error Code: " + errorCode + "\n\n" + "Error Message: " + errorMessage);
}

<!--- clears the form and resets focus --->
function setfocus() {
document.form1.partnername.focus();
}
<!--- clears the form and resets focus --->
function clearform() {
document.enterpartner.reset();
document.getElementById('orgsection').innerHTML = '';
document.getElementById('salessection').innerHTML = '';
document.getElementById('oppssection').innerHTML = '';
setfocus();
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My App</title>

</head>
<body onLoad="document.form1.partnername.focus();" >
<div style="position:absolute;left:150px;top:15px;" align="center" >
<cflayout type="hbox" style="border:1px solid ##1D4658;height:600px;width:950px;">
<cflayoutarea name="lbox" title="left box" style="width:275px;height:675px;text-align:left;" overflow="visible">
<cflayout type="hbox">
<cflayoutarea name="tbox" title="top box" overflow="visible" style="height:600px;width:275px;background-color:##97ADB2;">
<div style="font-size:16px;font-family:Arial;color:#333333;position:absolute;left:1px;top:1px;vertical-align:text-bottom;">
Logo Here
</div>
<div style="font-size:16px;font-family:Arial;color:#333333;position:absolute;left:100px;top:5px;vertical-align:text-bottom;">
<b>My App</b>
</div>

<div style="position:absolute;left:10px;top:55px;font-size:11px;font-family:Arial;color:#333333;z-index:0;">
<cfform format="html" name="enterpartner" id="form1">
</div>

<div style="font-size:11px;font-family:Arial;color:#333333;position:absolute;left:10px;top:90px; z-index:0;">
<b>Enter 'th' as a search string (no quotes)</b>

<cfinput
type="text"
name="partnername"
autosuggest="cfc:get_partnername.lookup({cfautosuggestvalue})"
size="35"
maxResultsDisplayed = "1000"
autosuggestminlength = "2"
align="left"
style="z-index:1000;"
required="yes"
tabindex="0" >

<cfinput
type="button"
name="Submit"
value="Go!"
onClick="javascript:ColdFusion.navigate('get_tabdata.cfm?select=org','orgsection',orgcallBack,myerrorhandler,'POST','form1');"
tabindex="1"
style="position:absolute;left:0px;top:55px;z-index:-1">

<cfinput
type="button"
name="Clear"
value="Clear"
tabindex="2"
onclick="javascript:clearform();"
style="position:absolute;left:35px;top:55px;z-index:-1">

<cfinput
type="button"
name="Print"
value="Print All"
tabindex="2"
style="position:absolute;left:85px;top:55px;z-index:-1">

</cfform>
</cflayoutarea>

</div>

</cflayout>
</cflayoutarea>
<cflayoutarea name="rbox" title="right box" style="height:574px;width:673px;" align="left" overflow="hidden">

<cflayout type="tab" align="left">

<cflayoutarea
name="orginfo"
title="Contacts"
style="height:574px;width:673px;background-color:##B2B3A3; z-index:1;"
align="left">

<cfdiv id="orgsection">

</cflayoutarea>

<cflayoutarea
name="salesinfo"
title="Sales"
style="height:574px;width:673px;background-color:##EEEDCB; z-index:1;"
align="left">

<cfdiv id="salessection">

</cflayoutarea>

<cflayoutarea
name="oppsinfo"
title="Opportunities"
style="height:574px;width:673px;background-color:##A1B2A6; z-index:1;"
align="left" >

<cfdiv id="oppssection">

</cflayoutarea>

</cflayout>

</cflayoutarea>

</cflayout>




</div>

</body>
</html>




<!--- template: get_partnername.cfc --->
<!--- mccormick: 4-2-2008 --->

<cfcomponent output="false">

<!--- PARTNER NAME LOOKUP --->
<!--- Lookup used for auto suggest --->
<cffunction name="lookup" access="remote" returntype="array">
<cfargument name="search" type="string" required="true">
<cfargument name="SOURCE" type="string" required="true" default="US" >

<!--- Define variables --->
<cfset var theQuery="">
<cfset var result=ArrayNew(1)>
<cfset var strNone = "None">

<cfset theQuery = QueryNew("name", "VarChar")>

<!--- Do search --->
<cfswitch expression=#ARGUMENTS.SOURCE#>
<cfcase value="US">

<cfset usRow = QueryAddRow(theQuery, 3)>
<cfset temp = QuerySetCell(theQuery, "name", "theAlist", 1)>
<cfset temp = QuerySetCell(theQuery, "name", "theBlist", 2)>
<cfset temp = QuerySetCell(theQuery, "name", "theClist", 3)>
</cfcase>
<cfcase value="EMEA">

<cfset emeaRow = QueryAddRow(theQuery, 3)>
<cfset temp = QuerySetCell(theQuery, "name", "Vyvyan's Place", 1)>
<cfset temp = QuerySetCell(theQuery, "name", "Neil's Place", 2)>
<cfset temp = QuerySetCell(theQuery, "name", "Rick's Place", 3)>
</cfcase>
</cfswitch>

<!--- If results, build result --->

<cfloop query="theQuery">
<cfset ArrayAppend(result, name)>
</cfloop>

<cfreturn result>

</cffunction>

</cfcomponent>





<!--- template: get_tabdata.cfm --->
<!--- mccormick: 4-21-2008 --->

<cfparam name="selector" default="Error: No Tab Requested">
<cfparam name="partnername" default="Error: No Partner Requested">

<cfif isDefined('url.select')>
<cfset selector = url.select>
<cfif isDefined('form.partnername')>
<cfset partnername = form.partnername>
</cfif>
</cfif>

<!--- get data for ORG tab --->
<cfswitch expression = #selector#>
<cfcase value="org">
<cfinclude template="dsp_org_grid.cfm">
</cfcase>
</cfswitch>





<!--- template: headerqueries.cfc --->
<!--- mccormick: 4-21-2008 --->

<cfcomponent>

<cffunction name="qryorgheader" access="remote" returntype="query">
<cfargument name="partnername" type="string" required="yes">

<cfset orgdata = "">
<cfset orgdata = QueryNew("Orgname", "VarChar")>
<cfset newRow = QueryAddRow(orgdata,1)>

<cfswitch expression="#partnername#">
<cfcase value="theAlist">

<cfset temp = QuerySetCell(orgdata, "Orgname", "theAlist", 1)>

</cfcase>
<cfcase value="theBlist">

<cfset temp = QuerySetCell(orgdata, "Orgname", "theBlist", 1)>

</cfcase>
<cfcase value="theClist">

<cfset temp = QuerySetCell(orgdata, "Orgname", "theClist", 1)>

</cfcase>

</cfswitch>

<cfreturn orgdata>
</cffunction>

</cfcomponent>





<!--- template: gridqueries.cfc --->
<!--- mccormick: 4-21-2008 --->

<cfcomponent>

<cffunction name="qryorgdata" access="remote">
<cfargument name="partnername" type="string" required="yes">
<cfargument name="cfgridpage" required="no">
<cfargument name="cfgridpagesize" required="yes">
<cfargument name="cfgridsortcolumn" required="no">
<cfargument name="cfgridsortdirection" required="no">

<cfset orgdata = QueryNew("Name, Phone, Email", "VarChar, VarChar, VarChar")>
<cfset orgRow = QueryAddRow(orgdata, 3)>

<cfswitch expression="#partnername#">
<cfcase value="theAlist">
<cfset temp = QuerySetCell(orgdata, "Name", "Allison Aubrey", 1)>
<cfset temp = QuerySetCell(orgdata, "Phone", "(555)-555-1212", 1)>
<cfset temp = QuerySetCell(orgdata, "Email", "aaubrey@tehinternets.net", 1)>

<cfset temp2 = QuerySetCell(orgdata, "Name", "Andrew Auvidible", 2)>
<cfset temp2 = QuerySetCell(orgdata, "Phone", "(555)-555-1212", 2)>
<cfset temp2 = QuerySetCell(orgdata, "Email", "aauvidible@tehinternets.net", 2)>

<cfset temp3 = QuerySetCell(orgdata, "Name", "Anji Arjohns", 3)>
<cfset temp3 = QuerySetCell(orgdata, "Phone", "(555)-555-1212", 3)>
<cfset temp3 = QuerySetCell(orgdata, "Email", "aarjohns@tehinternets.net", 3)>
</cfcase>
<cfcase value="theBlist">
<cfset temp = QuerySetCell(orgdata, "Name", "Billy Bob Beaudry", 1)>
<cfset temp = QuerySetCell(orgdata, "Phone", "(555)-555-2323", 1)>
<cfset temp = QuerySetCell(orgdata, "Email", "bbbeaudry@tehinternets.net", 1)>

<cfset temp2 = QuerySetCell(orgdata, "Name", "Beatrice Beatrix", 2)>
<cfset temp2 = QuerySetCell(orgdata, "Phone", "(555)-555-2323", 2)>
<cfset temp2 = QuerySetCell(orgdata, "Email", "bbeatrix@tehinternets.net", 2)>

<cfset temp3 = QuerySetCell(orgdata, "Name", "Banto Bilges", 3)>
<cfset temp3 = QuerySetCell(orgdata, "Phone", "(555)-555-2323", 3)>
<cfset temp3 = QuerySetCell(orgdata, "Email", "bbilges@tehinternets.net", 3)>
</cfcase>
<cfcase value="theClist">
<cfset temp = QuerySetCell(orgdata, "Name", "Charlie Carrizo", 1)>
<cfset temp = QuerySetCell(orgdata, "Phone", "(555)-555-3434", 1)>
<cfset temp = QuerySetCell(orgdata, "Email", "ccarrizo@tehinternets.net", 1)>

<cfset temp2 = QuerySetCell(orgdata, "Name", "Cerie Cornwallis", 2)>
<cfset temp2 = QuerySetCell(orgdata, "Phone", "(555)-555-3434", 2)>
<cfset temp2 = QuerySetCell(orgdata, "Email", "ccornwallis@tehinternets.net", 2)>

<cfset temp3 = QuerySetCell(orgdata, "Name", "Chano Chitester", 3)>
<cfset temp3 = QuerySetCell(orgdata, "Phone", "(555)-555-3434", 3)>
<cfset temp3 = QuerySetCell(orgdata, "Email", "cchitester@tehinternets.net", 3)>
</cfcase>
</cfswitch>
<cfreturn queryconvertforgrid(orgdata,cfgridpage,cfgridpagesize)>
</cffunction>

</cfcomponent>





<!--- template: dsp_org_grid.cfm --->
<!--- mccormick: 4-2-08 --->

<!--- output header info --->
<cfinvoke
component="test.headerqueries"
method="qryorgheader"
partnername="#partnername#"
returnvariable="orgdataheader">

<cfoutput>
<div style="font-size:14px;font-family:Arial;color:##333333;width:670px;" align="left">
<div style="position:absolute;left:5px;top:20px">Company: #orgdataheader.orgname#</div>

</div>
</cfoutput>
<!--- output detail grid --->
<div style="width:615px;position:absolute;left:2px;top:90px" align="left">
<cfform name="orginfo" format="html">
<cfgrid name="orggrid"
format="html"
striperows="yes"
width="650"
selectcolor="##B2B3A3"
style="font-size:8px"
selectonload="false"
selectmode="row"
pagesize="18"
bind= "cfc:test.gridqueries.qryorgdata({partnername},{cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">

<cfgridcolumn name="name" header="Name" width="125" />
<cfgridcolumn name="phone" header="Phone" width="200" />
<cfgridcolumn name="email" header="Email" width="300" />

</cfgrid>
</cfform>
</div>
 
Status
Not open for further replies.

Similar threads

MDEJAKE
  • Locked
  • Question
autosuggest (cfc and jquery) help
Replies
0
Views
96
MDEJAKE
MDEJAKE
mdvp
  • Locked
  • Question
Intermittent X-ref problem with figures in FM 12
Replies
0
Views
200
mdvp
mdvp
oshinwa
  • Locked
  • Question
Which Call collector should I use and which one is compatible with my Ericsson BP250?
Replies
0
Views
208
oshinwa
oshinwa
LyndonOHRC
  • Locked
  • Question
Javascript code will not execute if a cfdocument tag is in my document
Replies
1
Views
123
LyndonOHRC
LyndonOHRC
Kjonnnn
  • Locked
  • Question
What is is called when you end a domain with a folder name.
Replies
2
Views
90
Kjonnnn
Kjonnnn

Part and Inventory Search

Sponsor

Back
Top