0 Replies Latest reply on Mar 24, 2010 1:32 PM by cfnew

    how to implement this jquery in coldfusion

    cfnew Level 1

      . 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,