Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, 29 April 2015

CFSELECT usage

Hi,

By using <CFSELECT> we can save time. With normal <select> with CF code will be time taking and we have to write lines of code to achieve little things also.

Some points to be noted while using CFSELECT

  1.  CFSELECT should be inside FORM/CFFORM tag. Else it gives Context Validation error.
  2. When 'query' attribute used we should only have query column in 'value' attribute
  3. When 'Bind' attribute is used. Send CFC method result as JSON format or as 2 dimensional array. Have securejson="false" returnformat="json" attributes in method.
  4. Have 'value' or 'display' attribute while using ''bind'.
  5. You can't add <CFSELECT> through javascript/jQuery inside form. It will give context validation error.
  6. Use #(condition check)# instead of  <CFIF> in attributes.

Displaying query:
 <cfquery name="clients" datasource="bsa">  
           SELECT cCompanyName,clientID FROM CLIENTS  
 </cfquery>  
 <cfselect name="clientCF1" multiple="true" query="CLIENTS" display="cCompanyName" message="Please select one value" group="cCompanyName" value="clientID" selected=#v#>  
 </cfselect>  

In normal Select we have to use <CFLOOP> and go through and display in <option>.Group will form group of options under that label. In normal select we have to use
 <optgroup label=''></optgroup>  


 <cfselect name="clientCF2" multiple="true" message="One of the value should be selected" required="true"   
           bind="url:bindFc.cfc?method=getClients" bindonload="true" display="cCompanyName" group="cCompanyName" value='clientID'>    
 </cfselect>       


In CFC
 <cfcomponent>   
  <cffunction name="getClients" access="remote" securejson="false" returnformat="json">  
     <cfquery name="clients" datasource="bsa">  
                SELECT cCompanyName,clientID FROM CLIENTS  
           </cfquery>  
           <cfreturn clients>  
   </cffunction>   
 </cfcomponent>  

We can bind the value in realtime without using ajax.
 <cfselect name="clientCF3" multiple="true" message="One of the value should be selected" required="true"   
           bind="url:bindFc1.cfc?method=getClientsByID&id={clientCF2}" display="cCompanyName" group="cCompanyName" value='clientID'>  
      </cfselect>       
In CFC
 <cfcomponent>  
 <cffunction name="getClientsByID" access="remote" securejson="false" returnformat="json">  
           <cfargument name="id">  
     <cfquery name="clients" datasource="bsa">  
                SELECT cCompanyName,clientID FROM CLIENTS WHERE clientID=<cfqueryparam value="#arguments.id#" cfsqltype="cf_sql_bigint" >  
           </cfquery>  
           <cfreturn clients>  
   </cffunction>   
 </cfcomponent>  

Try to use CFSELECT instead of normal SELECT where ever possible.

Thanks,

Friday, 20 February 2015

ChartJS & Google Visualization

Hi,


I got a chance to learn  ChartJS and Google Visualization. Both are basically for preparing charts using data, so user can feel more better with their data. How things are going point by point.


ChartJS

It have 6 types of different Chart, we can build charts directly. Documentation is also very handy, very easy to understand.

Documentation: http://chartjs.org/docs/

For linking: <script type="text/javascript" src="http://chartjs.org/assets/Chart.js"></script>

I have a fiddle to show

http://jsfiddle.net/ramakrishnap/0Lfzx74v/


Google Visualization(Google Charts)

In this there are many kinds of Charts,Graphs it also have pagination techniques. Understanding documentation takes time, implementation needs much care. It is rich with UI and functions.

Documentation: http://developers.google.com/chart/interactive/docs/reference

For linking: <script type="text/javascript" src="https://google.com/jsapi"></script>

I have a fiddle to show

http://jsfiddle.net/ramakrishnap/4gtLc9ss/