Invoke ColdFusion cfc function using AJAX - coldfusion

I am trying to validate text input, with a sql check. Based on the result from the ajax call, I want to return the output as red or green.
HTML:
<script>
$("#cdsid").click(function() {
debugger;
var value = $.trim($("#svcdsid").val());
if (value != '') {
$.ajax({
type:"POST",
url:"SVCDS_filter.cfc?method=SVCDSIDExists",
data: "value",
cache:false,
dataType: "json",
success: function(){
alert('YES');
},
error: function(){
alert('NO');
}
});
} else {
$("#targetDiv").html("Please Enter SSID");}
});
</script>
I am getting "unexpected end of input". In debugger, after checking that the value is not null value, it skips to the end code. I am not sure why.

First You can Write a ajax function for checking your text input. In the ajax function you can pass the text value that you entered trough data. Url cfc function that you called for checking input text data,and the method is the name of your cfc function. Here it is "SVCDSIDExists". In the cfc file you can add new function that you checked for text value. The access="remote" for ajax.
You can check in your table with the field . If it have a record it return 1 else it return 0. This value you can get from data of success in ajax. based on this value you can change the color of your input box.
<script>
$("#cdsid").click(function() {
var value = $.trim($("#svcdsid").val());
if ($.trim(value).length != 0) {
$.ajax({
type:"POST",
url:"SVCDS_filter.cfc?method=SVCDSIDExists",
data: {
value : value
},
cache:false,
async : false,
success: function(data){
if(data = 1){
alert('YES');
$("#targetDiv").css('border',"1px solid green")
} else {
alert('NO');
$("#targetDiv").css('border',"1px solid red");
}
}
});
} else {
$("#targetDiv").html("Please Enter SSID");
}
});
</script>
<cffunction name="SVCDSIDExists" returntype="any" access="remote" returnformat="plain" >
<cfargument name="value" type="string" default="" required="yes">
<cfset variables.returnVal = 0>
<cfquery name="qGetSVCDSIDExists" result="result" datasource="#Application.ds#" username="#Application.UserName#" password="#Application.Password#">
select columnname
from your_table
where 1 = 1
<cfif StructKeyExists(arguments,"value")>
and columnname = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.value#">
</cfif>
</cfquery>
<cfif qGetSVCDSIDExists.recordCount >
<cfset variables.returnVal = 1 >
</cfif>
<cfreturn variables.returnVal>
</cffunction>

Related

typeahead can't be called inside another function

every time iam calling typeahead script function inside any functions
give typeahead not defined error
html code :
<select id ='options' name='options' class='form-fields' onchange="myFunction();">
<option value='0' >Pick Type</option>
<option value="1" selected >train</option>
<option value="2">bus</option>
</select>
this javascript code :
<script>
//typeahead changing according to selecting script
function myFunction() {
var option = document.getElementById("options").value;
if (option =='1'){
console.log(option);
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('typeahead-train.php', { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);
return process(data);
});
}
});
}else if(option =='2'){
console.log(option);
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('typeahead-publiccairo.php', { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);
return process(data);
});
}
});
}
}
i have include ' typeahead.js ' aleady ,
i have solved it by calling onchange function inside typeahead function , as following :-
<script>
function myFunction() { //return diffrent values with different select options
var option = document.getElementById("options").value;
if (option==1){
typeahead ='typeahead-train.php';
}
else if (option ==2){
typeahead ='typeahead-publiccairo.php';
}
window.typeahead=typeahead;
return typeahead;
}
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(myFunction()/*onchange function called here*/, { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);
return process(data);
});
}
});

Full Calendar - How to distinguish past events and future events

I am having a hard time trying to remove past and future events that are not reflected by the current month. Currently this is what I have the following code below:
<cffunction name="FullCalendar">
<cfscript>
var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid();
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<h3>Upcoming Events</h3>
<div id="UpcomingCal" class="calendarResize">
</div>
<script>
mura.loader()
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'})
.loadjs(
"#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/gcal.js",
function(){
$('##RegalUpcomingCal').fullCalendar({
weekMode: 'liquid',
eventSources: [
{
url: '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#'
, type: 'POST'
, data: {
method: 'getFullCalendarItems'
, calendarid: '#esapiEncode("javascript",CalendarID)#'
, siteid: '#variables.$.content('siteid')#'
, categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#'
, tag: '#esapiEncode('javascript',variables.$.event('tag'))#'
}
<!---, color: '#this.calendarcolors[colorIndex].background#'
, textColor: '#this.calendarcolors[colorIndex].text#'--->
, error: function() {
$('##mura-calendar-error').show();
}
},
]
})
}
)
</script>
</cfoutput>
</cfsavecontent>
<cfreturn local.str />
</cffunction>
I was able to remove the dates but as it is generated, it does get ride of the structure of calendar which I am not sure why. However, I am not sure how to add the following code to be able to distinguish past and future events:
eventRender:function(event, tag){
var ntoday = new Date().getTime();
var eventEnd = moment( event.end ).valueOf();
var eventStart = moment( event.start ).valueOf();
if (!event.end){
if (eventStart < ntoday){
element.addClass("fc-content");
element.children().addClass("fc-content");
}
} else {
if (eventEnd < ntoday){
element.addClass("fc-content");
element.children().addClass("fc-content");
}
}
}
and not sure where to add it in the code. Any help would be appreciated.
Thanks
UPDATE
Currently I have the eventRender in my code but it still does not remove past or future events. what am I doing wrong?
<cffunction name="FullCalendar">
<cfscript>
var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid();
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<h3>Upcoming Events</h3>
<div id="UpcomingCal" class="calendarResize">
</div>
<script>
mura.loader()
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar-custom.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'})
.loadjs(
"#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/gcal.js",
function(){
$('##UpcomingCal').fullCalendar({
weekMode: 'liquid',
eventSources: [
{
url: '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#'
, type: 'POST'
, data: {
method: 'getFullCalendarItems'
, calendarid: '#esapiEncode("javascript",CalendarID)#'
, siteid: '#variables.$.content('siteid')#'
, categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#'
, tag: '#esapiEncode('javascript',variables.$.event('tag'))#'
}
<!---, color: '#this.calendarcolors[colorIndex].background#'
, textColor: '#this.calendarcolors[colorIndex].text#'--->
, error: function() {
$('##mura-calendar-error').show();
}
, eventRender:function(event, element, view){
var ntoday = new Date().getTime();
var eventEnd = moment( event.end ).valueOf();
var eventStart = moment( event.start ).valueOf();
if (!event.end){
if (eventStart < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
} else {
if (eventEnd < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
}
}
},
]
});
}
)
</script>
</cfoutput>
</cfsavecontent>
<cfreturn local.str />
</cffunction>

How to retrieve fields value from Kendo Grid Models using ColdFusion

How can I get posted field values from a Kendo model on the server end? I have a logger on the server end. This shows I received all of the fields, with column names and values. However, I am not sure how to retrieve those values:
Used Script:
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8500/test/test1.cfc?method=",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl+"JsonRead",
dataType: "json"
},
create: {
url: crudServiceBaseUrl+"JsonCreate",
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
return options;
}
},
batch: true,
pageSize: 20,
schema: {
type: "json",
model: {
id: "productid",
fields: {
productid: { editable: false, nullable: true },
productname: { validation: { required: true } },
unitprice: { type: "number", validation: { required: true, min: 1} },
discontinued: { type: "boolean" },
unitsinstock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"productname",
{ field: "unitprice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "unitsinstock", title:"Units In Stock", width: "100px" },
{ field: "discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px" }],
editable: "inline"
});
});
</script>
test1.cfc
<cfcomponent>
<cffunction name="init">
<cfreturn this>
</cffunction>
<cffunction name="JsonRead" returntype="any" description="Return all Product" access="remote">
<cfquery name="getallproducts" datasource="DataSource">
SELECT * from Products
</cfquery>
<cfset var aTmp = arraynew(1)>
<cfif getallproducts.recordcount>
<cfloop query="getallproducts">
<cfset stTmp = structNew()>
<cfloop list="#lcase(getallproducts.columnlist)#" index="col">
<cfset stTmp[col] = getallproducts[col][currentRow]>
</cfloop>
<cfset arrayAppend(aTmp,stTmp)>
</cfloop>
<cfelse>
<cfset stTmp = structNew()>
<cfloop list="#lcase(getallproducts.columnlist)#" index="col">
<cfset stTmp[col] = "">
</cfloop>
<cfset arrayAppend(aTmp,stTmp)>
</cfif>
<cfset ss=#SerializeJSON(aTmp)#>
<cfreturn ss>
</cffunction>
<cffunction name="JsonCreate" returntype="void" description="Create New Row" access="remote">
<cfargument name="models" type="string" required="yes">
<cfset data = urldecode(arguments.models)>
<cfset data = deserializeJSON(data, false)>
</cffunction>
</cfcomponent>
I think what you're asking for is a way to get at the data coming from your Kendo Grid once you save, update or delete. Here is an example of something you could do to loop through the data stored in the models argument coming from Kendo. Keep in mind if you set batch in your grid equal to true then you will have multiple rows of data coming from your grid.
remote void function JsonCreate(string models) output="false" {
var data = urldecode(arguments.models);
data = deserializeJSON(data, false);
}
EDIT: Example JsonRead Function below. If you don't specify return type as string ans returnformat as plain you have to set the return type to any and the returnformat to JSON.
remote string function JsonRead(string RemoteToken) returnFormat="plain" output="false" {
if ( TestToken(arguments.RemoteToken) ) {
return serializeJSON(QueryToStruct(QueryAllUsers()));
}
}
I also use dataType as JSON so your datasource would look something like this:
var serviceURL = kendoURL + "/services/Service.cfc?RemoteToken=" + RemoteToken + "&method=",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: serviceURL + "JsonRead",
dataType: "JSON"
},
update: {
url: serviceURL + "JsonUpdate",
dataType: "JSON"
},
destroy: {
url: serviceURL + "JsonDelete",
dataType: "JSON"
},
create: {
url: serviceURL + "JsonCreate",
dataType: "JSON"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true
...
Also, since this will have to be a remote function you'll want to provide some sort of security check to guard against unauthorized access. I use a RemoteToken shown above.

What is wrong with this email RegExp?

I'm trying to implement this (the one at the bottom of the page) RegExp to validate email addresses with jquery validation plugin.
This is my code:
$.validator.addMethod("email_address", function(value, element, param) {
var email_regexp = new RegExp("[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*#(?:a-z0-9?.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b", "g");
var result = value.match(email_regexp);
return result ? result.length >= param : false;
}, "Invalid email address");
No JS errors are shown, still it doesn't validate anything! Been playing with it for like an hour and can't get this working!
Is there something wrong?
EDIT: I tried also with // delimiters:
$.validator.addMethod("email_address", function(value, element, param) {
var result = value.match(/[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*#(?:a-z0-9?.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b/g);
return result ? result.length >= param : false;
}, "Invalid email address");
~-]+(?:\.[a-z0-9!#$
// ^^
That \. will need escaping again for the Javascript string:
~-]+(?:\\.[a-z0-9!#$
// ^^^
Or, preferably, use // delimeters rather than constructing a RegExp object from a string.
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp
Why are you writing a custom regex function for the jQuery Validate plugin when it already has an email rule built-in?
http://docs.jquery.com/Plugins/Validation/Methods/email
jQuery:
$(document).ready(function() {
$('#myform').validate({
rules: {
field: {
required: true,
email: true
}
}
});
});
HTML:
<form id="myform">
<input type="text" name="field" /> <br/>
<input type="submit" />
</form>
Working Demo:
http://jsfiddle.net/sRwHc/
The default regex function used within the .validate() plugin, FYI:
email: function(value, element) {
// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
}

cfgrid and cfajaximport mouseover

I have the following:
<cfajaximport/>
<html>
<head>
<script>
myf = function(data,cellmd,record,row,col,store) {
if(data == "Product 4")
return "<b>" + data + "</b>";
else return data;
}
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('data');
ds = mygrid.getDataSource();
cm = mygrid.getColumnModel();
cm.setRenderer(0, Ext.util.Format.usMoney);
cm.setRenderer(1,myf);
}
</script>
</head>
<body>
<cfset data = queryNew("price,product")>
<cfloop from=1 to=10 index="x">
<cfset total = randRange(20,100) & "." & randRange(1,99)>
<cfset product = "Product #X#">
<cfset queryAddRow(data)>
<cfset querySetCell(data, "price", total+0, x)>
<cfset querySetCell(data, "product", product, x)>
</cfloop>
<cfform name="test">
<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
<cfgridcolumn name="price" header="Price">
<cfgridcolumn name="product" header="Product">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("testgrid")>
</body>
</html>
Picked up from Raymond Camden's blog. I need to somehow add a mouseover event to product column to display product details. (like cost).
Any help on how to implement this event?
I ended up creating html inside the query cell.
<cfset product =
'' & Product#x# & ''>
Otherwise, you will need to play with extJs.