OK, CF/AJAX newbie here. What I"m building out is a basic database-driven inventory checklist that, for each item, displays:
- category
- stock number (ID)
- item name
- picture of the item
- color
- a checkbox (whether or not it's in stock - default is "0")
I'm using cflayoutareas to separate the inventory into a collapsible accordion, with each category in its own section. The goal is to have a simple checklist that "grays out" each item as you check off an item AND updates the database AND retains your position in the current accordion / list. The inventory lists can be very long, 200+ items, thus my quest to have this done cleanly with AJAX.
I have it semi-working but it is very crude since it relies on post/reload with each check. I know there's a simple and elegant way to code this with AJAX but I haven't been able to cobble it together from the various cfajax / bind / etc examples out there. Perhaps jQuery would help here? Not sure. Any advice or direction appreciated.
Here's the sloppy version of what I have so far:
To update the database and reload the list:
<cfif WhatsChecked NEQ "">
<cftransaction>
<cfquery name="UpdateChecks" datasource="#application.dsn#">
UPDATE inventorychecklist
SET Checked = "1"
WHERE ID IN (<cfqueryparam value="#FORM.WhatsChecked#" cfsqltype="cf_sql_varchar" list="true">)
</cfquery>
<cfquery name="UpdateChecks0" datasource="#application.dsn#">
UPDATE inventorychecklist
SET Checked = "0"
WHERE ID NOT IN (<cfqueryparam value="#FORM.WhatsChecked#" cfsqltype="cf_sql_varchar" list="true">)
</cfquery>
</cftransaction>
<cfquery name="LoadInventory" datasource="#application.dsn#">
SELECT * FROM inventorychecklist
WHERE AccountNumber = <cfqueryparam value="#Session.AccountNumber#" CFSQLType="cf_sql_varchar">
order by Category
Form in the body (posts to itself,) to loop through the inventory (per category group)and display the items / checkboxes, and gray out the tr if it's been checked off:
<cfform name="MAINFORM" action="checklist.cfm" method="post">
<cflayout name="MainChecklist" type="accordion" width="640">
<cfoutput query="LoadInventory" group="Category">
<cflayoutarea title="#Category#, qty:#totalCount#" align="left">
Category: #Category#"
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>stock number (ID)</td>
<td>item name</td>
<td>item picture</td>
<td>color</td>
<td>in stock?</td>
</tr>
<cfoutput>
<!--- If item is checked off, gray out the row --->
<cfif "#LoadInventory.Checked#" EQ 1>
<tr bgcolor="##333333">
<cfelse>
<tr>
</cfif>
<td>#ID#</td>
<td>#LoadInventory.ItemName#</td>
<td><img src="images/#LoadInventory.Category#/#LoadInventory.Item#.jpg"></td>
<td>#LoadInventory.Color#</td>
<td>
<input type="checkbox" name="WhatsChecked" value="#ID#" <cfif "#LoadInventory.Checked#" EQ 1>checked="checked"</cfif> onclick="this.form.submit();">
</td>
</tr>
</cfoutput>
</table>
</cflayoutarea>
</cfoutput>