how to implement this jquery in coldfusion

[cfnew]

. i will give u my code would u please help me in  that if possible thanks. i bolded all the places where i  need  to place this search and where to get the changed output .

here is my form page test.cfm:   
    

<cflayout type="tab" name="courses" tabheight="135"  style="background-color:##DBEAF5" align="justify" >

<cfoutput query="qryAvailableCourses"  group="course_type_id">

<cflayoutarea title="#course_type_desc##course_type_id#"  name="#course_type_desc#" style="background-color:##ffffff;  width:600px;padding-left: 5px; padding-top: 5px;padding-right:  5px;padding-bottom: 5px;" >

<cfset selectedCourses = "">

<cfif structKeyExists(attributes, 'course_id')>

<cfset selectedCourses = attributes['course_id']>

</cfif>

<div style="clear:right;">

<span class="actionButtons1" style="width:575px; margin:0;  padding:0;">

<input type="button" name="checkall"  onmouseover="hover(this);"  value="Check All"  onclick="checkAll(document.getElementById('selectForm'),  'results#course_type_id#');" />

<input type="button" name="Un_CheckAll"  onmouseover="hover(this);" value="Uncheck All"  onClick="UnCheckAll(document.getElementById('selectForm'),  'results#course_type_id#');">

</span>

</div>

here i need to add search  filed:

Search: <input id="search" type="text"  />

<div id="userlist">

<div style="height:135px; overflow:auto;  float:left;">

<cfoutput >

<span class="row#Int(currentrow mod 2)#" style="float:left;  width:575px; margin:0; padding:0;" >

<cfset checked = "" />

<cfif listcontains(selectedCourses,course_id)>

<cfset checked = 'checked="true"' />

</cfif>

<input type="checkbox" name="course_id" id="#course_id#"  value="#course_id#" class="results#course_type_id#" #checked#/>

<label for="#course_id#">

<span style="padding-left:5px;"> </span>

#course_desc# (#course_id#)

</label>

</span>

<!---<div style="clear:both; line-height:0px; margin:0px  !important; padding: 0px;"> </div> --->

</cfoutput>

</div>

</div>

</cflayoutarea>

</cfoutput>

</cflayout>

<script type="text/javascript">

$('#search').bind('keyup',updateQuery);

function updateQuery(){

$('#userlist').load('qryAvailableCourses.cfm?search='+ $('#search').val() );

}

$(document).ready(function(){

$('#userlist').load('qryAvailableCourses.cfm');

});

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

in the above form  thats how i need to add this search box, because my application will  have tabs ,  now i will give my query page :

<cfquery name="qryAvailableCourses" dbtype="query">

SELECT

course_id

,course_desc

,course_type_id

,course_type_desc

FROM

qryAvailableCourses

Where

dsp_host_reporting = 'A'

<cfif len(search)>

AND course_desc LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#search#%"/>

</cfif>

ORDER BY

<cfif structkeyexists(attributes, "orderby")>

#attributes.orderby#

<cfelse>

course_type_id desc

, course_desc

</cfif>

</cfquery>

Above this is my query page. i  need to implement that jquery script here so that i need to search in  each tab .  thanks for ur time.

Thanks,

[ilssac]

It is a confusing concept to say that you need to impliment Jquery in ColdFusion.  ColdFusion runs on the server, Jquery runs on the client.  All ColdFusion is going to do is return the Jquery syntax back to the client along with the HTML.

What you seem to be struggling with is the use of the <cflayout type="tab"...>.

This is just and easy and quick way to have ColdFusion to create the HTML, CSS and Javascript code to send to the broswer to make an interface that looks like a series of tabs.  Under the hood those tabs are just simple div blocks in the HTML that is returned by ColdFusion.

What you need to do is to use some handy tool, like the Firebug plugin for the Firefox browser, to explore the DOM structure of the page that is actually returned to the browser, see what the id's of these divs that make up your tabs are and the provide those details to your Jquery syntax.