1

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>

  • Its alot to take in, hard to replicate without writing all your code , creating db tables, ect, however i have a similar SO here http://stackoverflow.com/questions/16327068/coldfusion-populate-form-with-dropdown-selection-using-ajax/16341231#16341231 maybe it can help or you can post a sample page link – Jay Rizzi May 15 '13 at 17:05

0 Answers0