Tricky CF / JS question - populating dialog box 1

Helen267 · Oct 14, 2007

I am trying to write a piece of code to populate a dialog box, and I'm not quite sure of my next step (or even if it's possible). I've searched the FAQs and forums, but haven't found anything related to this.

I have a form with a select box. When an option is selected, I want the form to run a new query based on the value in the select box. If a record exists (there will only ever be one record), a dialog box (ie. a Javascript alert) is displayed with the contents of the query.

I have this so far (simplified for this forum):

Code:

<HTML>

<HEAD>
	<TITLE>Test code</TITLE>
	
<SCRIPT LANGUAGE = "JavaScript">
<!--
	
function displ()
	{
	if(document.LogCall.ct_id.options[0].value == true) 
		{
    		return false
		}
	else 
		{
<!--- 			"unknown code to perform query to populate dialog box?" --->
	  		return true;
		}
	}

//-->
</SCRIPT>
	
</HEAD>

<BODY onLoad="document.TestCode.ct_id.focus();">

<CFQUERY NAME="qryCallTypes" 
		 DATASOURCE="Helpdesk">
    SELECT ct.id ct_id
		 , ct.description call_type
    FROM   call_types ct
    WHERE  ct.active = 'Y'
    ORDER BY ct.description
</CFQUERY>

<FORM ACTION="TestAction.cfm"
		METHOD="post"
		NAME="TestCode" onclick="return displ();">

<TABLE WIDTH="100%">
	<TR>
		<TD WIDTH="20%" ALIGN="right" VALIGN="baseline">
			<B>Call type:</B>
		</TD>
		<TD WIDTH="80%" ALIGN="left" VALIGN="baseline">
			<SELECT NAME="ct_id"
					CLASS="inputbox">
			        <OPTION></OPTION>
					<CFOUTPUT QUERY="qryCallTypes">
						<OPTION VALUE="#qryCallTypes.ct_id#">
							#qryCallTypes.call_type#
						</OPTION>
					</CFOUTPUT>
			</SELECT>
		</TD>	
	</TR>
	<TR>
		<TD COLSPAN="2">
			&nbsp;
		</TD>
	</TR>
	<TR>
		<TD WIDTH="20%">
			&nbsp;
		</TD>
		<TD WIDTH="80%" ALIGN="left">
			<INPUT TYPE="Submit"
				   NAME="Action"
				   CLASS="inputbutton"
				   VALUE="   Log call   ">
		</TD>
	</TR>
</TABLE>

</FORM>

</BODY>

</HTML>

I assume the next step is to run the query and display the dialog box when the select box value changes (using the onclick event in my code - this select box will have another function associated with the onchange event), but I'm not sure how to proceed. I'm reasonably familiar with CF, but a novice when it comes to JS.

Can anyone help?

Thanks, Helen

philhege · Oct 16, 2007

Hi Helen,

You can take two approaches to this problem. One is to use CF to create the Javascript that would populate your dialog box with the result. This approach renders all of the necessary code back to the browser (and would place your CFQUERY before the JS code block on your CFM page).

The other is to use AJAX, in which you make a callback to a function through the XML request object, and process the returned data. This would allow you to display updated information without a POST or GET that re-renders the page.

The question I have is, how "large" is the information you wish to display? A sentence? A paragraph? That should figure prominently into the type of solution you need.

Helen267 · Oct 17, 2007

Thanks for your response. In answer to your question, the information to be displayed will vary from one sentence, to three or four sentences - no more than that. I would say the first approach would probably be easiest for me personally, since I have no experience with AJAX or XML.

Any further assistance would be greatly appreciated!

philhege · Oct 18, 2007

OK, here's a conceptual view:

Query the database

Generate the Javascript function within CFOUTPUT

Your function generation code will look something like

function displ()
{
var selecteditem = document.forms(0).ct_id.selectedIndex;
var key = document.forms(0).ct_id[selecteditem].value;
<CFOUTPUT QUERY="qryCallTypes">
if key == #recordprimarykey#
{alert(#informationtodisplay#);}
</CFOUTPUT
}

and the event handler in the form control will call the function:

<SELECT NAME="ct_id"
CLASS="inputbox" onchange="displ();">

HTH,

Helen267 · Oct 29, 2007

Thanks for your help - I now have my form working exactly as required (after some delays due to pedantic JS syntax requirements)! Here are the final pieces of relevant code:

Code:

<CFQUERY NAME="qryMsg" 
		 DATASOURCE="Helpdesk">
	SELECT	id
		  , ct_id
		  , title
	FROM	broadcast_messages
	WHERE	archive = 'N'
	  AND	type = 'U'
	  AND	ct_id is not null
</CFQUERY>

<SCRIPT LANGUAGE = "JavaScript">
<!--
	
function displ()
	{
	var key = document.AddCall.ct_id.options[document.AddCall.ct_id.selectedIndex].value;
	if (key != '0')
		{
		<CFLOOP QUERY="qryMsg">
		<CFOUTPUT>
		if (key == '#ct_id#')
			{
			alert('#title#');	
			}
		</CFOUTPUT>
		</CFLOOP>
		}
	}
	
//-->
</SCRIPT>
	
<SELECT NAME="ct_id"
		CLASS="inputbox"
		onchange="displ();">
        <OPTION VALUE="0">
		<CFOUTPUT QUERY="qryCallTypes">
			<OPTION VALUE="#qryCallTypes.ct_id#">
				#qryCallTypes.call_type#
			</OPTION>
		</CFOUTPUT>
</SELECT>

And with the additional of CFLOOP, it doesn't matter if there is more than one relevant record, I can display them all.

Thanks again for all your help - I would have struggled with this for weeks without it, despite the fact that it was so simple in the end!

Cheers

Helen

philhege · Oct 29, 2007

No problem, Helen.

Remember that you can use the CFOUTPUT tag by itself for query output.

So,

Code:

<CFOUTPUT QUERY="qryMsg">
        if (key == '#ct_id#')
            {
            alert('#title#');    
            }
</CFOUTPUT>

should do for you also.

Glad to be of help.

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!

Tricky CF / JS question - populating dialog box 1

Helen267

Programmer

philhege

Programmer

Helen267

Programmer

philhege

Programmer

Helen267

Programmer

philhege

Programmer

Similar threads

Part and Inventory Search

Sponsor