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.
Related
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>
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>
Alright so I copy and pasted this example from google's chart tools documentation:
https://developers.google.com/fusiontables/docs/samples/gviz_datatable
I simply replaced their fusion table info with mine and am unable to get the table to appear.
This is what I have now with the fusion table set to public access:
<html>
<head>
<meta charset="UTF-8">
<title>Fusion Tables API Example: Google Chart Tools Data Table</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['table'] });
function drawTable() {
var query = "SELECT 'fundraiser' as fundraiser, " +
"'price' as price, 'merchant' as merchant " +
'FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
var fundraiser = document.getElementById('fundraiser').value;
if (team) {
query += " WHERE 'fundraiser' = '" + fundraiser + "'";
}
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
gvizQuery.send(function(response) {
var table = new google.visualization.Table(
document.getElementById('visualization'));
table.draw(response.getDataTable(), {
showRowNumber: true
});
});
}
google.setOnLoadCallback(drawTable);
</script>
</head>
<body>
<div>
<label>Scoring Team:</label>
<select id="fundraiser" onchange="drawTable();">
<option value="">All</option>
<option value="default">default</option>
<option value="aaaatester">aaaatester</option>
</select>
</div>
<div id="visualization"></div>
</body>
</html>
I'm not sure what exactly was wrong with your query, but this works for me:
function drawTable () {
console.log('foo');
var query = 'SELECT fundraiser, price, merchant FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
var fundraiser = document.getElementById('fundraiser').value;
if (fundraiser) {
query += ' WHERE fundraiser = \'' + fundraiser + '\'';
}
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
gvizQuery.send(function(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var table = new google.visualization.Table(document.getElementById('visualization'));
table.draw(response.getDataTable(), {
showRowNumber: true
});
});
}
function init () {
// draw the table
drawTable();
// setup the fundraiser dropdown to redraw the table when the user changes the value
var el = document.querySelector('#fundraiser');
if (document.addEventListener) {
el.addEventListener('change', drawTable);
}
else if (document.attachEvent) {
el.attachEvent('onchange', drawTable);
}
else {
el.onchange = drawTable;
}
}
google.load('visualization', '1', {packages: ['table'], callback: init});
With this as the HTML:
<div>
<label>Scoring Team:</label>
<select id="fundraiser">
<option value="">All</option>
<option value="default">default</option>
<option value="aaaatester">aaaatester</option>
</select>
</div>
<div id="visualization"></div>
I would suggest, however, that if you are going to have a filter like that, where your initial query is unfiltered, that you switch to using a CategoryFilter to filter your data in the browser instead of making a query to the server every time the user changes the filter. The only time making repeated queries to the server makes sense is when the total traffic to and from the server is likely to be substantially lower using multiple filtered queries than one single unfiltered query.
I have CSS file and want to separate elements and values in form fields to make it editable using regular expressions.
This is my CSS:
<cfsavecontent variable="css">
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
##map_canvas img,
.google-maps img {
/*edit*/max-width: none;
}
#sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
</cfsavecontent>
I have tried the expression below to extract the elements between the opening and closing braces. It works fine but I am wondering how to get elements and values delimited by lines.
<cfset reg1 = REMatch("{(?i)(.+?)}",css) />
<cfdump var="#reg1#" label="braces">
How can I write a regex pattern to separate the elements and values? Thanks in advance.
This works for me to split up the items and values, not sure it's exactly what you're needing though:
<cfset reg1 = REMatch("{(?i)(.+?)}",css) />
<cfloop index="item" array="#reg1#">
<cfset lines = listToArray(item, Chr(10))>
<cfloop index="line" array="#lines#">
<cfset arrLine = listToArray(line, ":")>
<cfif arrayLen(arrLine) EQ 2>
<cfset item = trim(arrLine[1])>
<cfset value = trim(arrLine[2])>
<cfoutput>
item: #item#<br>
value: #value#<br>
<br>
</cfoutput>
</cfif>
</cfloop>
</cfloop>
I have been trying to create Task manager with JavaScript and HTML. I'm quite new to programming, so hopefully someone will help me out with the following issue:
For some reason, the items of the array will not get into the table. Any helpful idea to solve this enigma? All help is appreciated!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = init;
var descriptionS = new Array();
function init(){
var delBtn = document.getElementById("buttonDel");
delBtn.addEventListener('click', deleteRow, false);
var addTaskBtn = document.getElementById("addTask");
addTaskBtn.addEventListener('click', getTaskData, false);
var displayListBtn = document.getElementById("displayList");
displayListBtn.addEventListener('click', generateList, false);
var sortByNumBtn = document.getElementById("sortByNumber");
sortByNumBtn.addEventListener('click', sortListByNum, false);
}
function getTaskData(){
var myDescription = document.getElementById("descriptionField").value;
var myDate = document.getElementById("dateField").value;
var myPriority = document.getElementById("selRow0").value;
var description = new Object();
description.descriptionData = myDescription;
description.descriptionDate = myDate;
description.descriptionPriority = myPriority;
descriptionS.push(description);
}
function generateList(){
var myTaskList = document.getElementsByTagName("td");
myTaskList.innerHTML ="";
for(var p = 0; p < descriptionS.length; p++){
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
//Select cell
var cell0 = row.insertCell(0);
var selT = document.createElement("input");
selT.type = 'checkbox';
selT.name = 'chkBox';
selT.id = 'chkBox';
cell0.appendChild(selT);
// ID cell
var cell1 = document.createElement("td");
cell1 = row.insertCell(1);
var idFill = document.createTextNode(iteration);
cell1.appendChild(idFill);
cellSelect.appendChild(cell1);
//Description cell
var cell2 = document.createElement("td");
cell2 = row.insertCell(2);
var elF = document.createTextNode(descriptionS[p].descriptionData);
//elF.innerHTML = document.getElementById("descriptionField").value;
cell2.appendChild(elF);
// Priority cell
var cellPri = document.createElement("td");
cellPri = row.insertCell(3);
var pri = document.getElementbyId('selRow0').value;
pri.name = 'selRow' + iteration;
cellPri.appendChild(pri);
//Date
var cell4 = document.createElement("td");
cell4 = row.insertCell(4);
var elF1 = document.createTextNode(descriptionS[p].descriptionDate);
//elF.innerHTML = document.getElementById("descriptionField").value;
cell4.appendChild(elF1);
// Delete cell
var cell5 = document.createElement("td");
cell5 = row.insertCell(5);
var del1 = document.createElement('input');
del1.type = 'button';
del1.name = 'buttonDel';
del1.id = 'buttonDel';
del1.value = "Delete";
del1.onclick = function () {
var table = document.getElementById("tblSample");
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
};
cell5.appendChild(del1);
}
}
function sortListByNum(){
descriptionS.sort(sortFunctionByNumber);
generateList();
}
function sortFunctionByNumber(a, b){
return a.descriptionData-b.descriptionData;
}
function deleteRow(tableID) {
var table = document.getElementById("tblSample");
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
</head>
<body>
<form action="">
<p>
Description: <input type="text" id="descriptionField" />
Date: <input type="text" id="dateField" />
Priority: <select name="selRow0" id="selRow0" />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" id="addTask" value="Add Task" />
<input type="button" id="displayList" value="Display Task" />
<input type="button" id="sortByNumber" value="Sort" />
</p>
<p>
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
<tr>
<th>Select</th>
<th>ID</th>
<th>Description</th>
<th>Priority</th>
<th>Date</th>
<th>Delete</th>
</tr>
<tr>
<td><INPUT type="checkbox" name="chk"/></td>
<td>1</td>
<td>Example</td>
<td>
<select name="selRow1">
<option value="value1">1</option>
<option value="value2">2</option>
<option value="value3">3</option>
</select>
</td>
<td>06/06/2013</td>
<td>
<input type="button" value="Delete" id="buttonDel" />
</td>
</tr>
</table>
</form>
</body>
</html>
Use ExtJS GridPanel http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html
(Click to edit cell)