Solved

ColdFusion 8.0 CFGRID changes on FLASH CFFORM not posting to action script page properly

Posted on 2009-03-30
3
943 Views
Last Modified: 2013-12-20
I'm working on creating a feature in ColdFusion 8.0.1 to allow table rows to be quickly visually moved around in a flash cfgrid, then post the form and update the data records for whatever rows were moved around.

So, I populate a Flash CFGRID (inside a CFFORM) by using a query= parameter so the grid contains rows from the query.  Then by using some addItemAt and removeItemAt calls to I can drag the rows around the screen to create a custom sort order for the rows (the function calls are what makes the rows relocate correctly to wherever I drag them to).  Everything is fine on the grid....until....I post the form.  Then the changes do not show up in the #form# variable as array elements as the CF docs indicate they should.  After much troubleshooting, I was able to determine that if I set the CFGRID's selectMode="edit" and then actually make some on-screen cell-level edit changes manually to any of the row cells in the CFGRID, those rows DO show up in the #form# structure, which I can see by doing a CFDUMP of the form variable in the action/post script page.  

So, how can I make rows that I've added with the addItemAt commands show up in the #form# variable?  I don't want the user to have to edit any cell fields of the row just to be able to change the sort order of the rows.   It just seems like anything done on-screen to edit the data is picked up and carried through into the #form# variable on the post page, but any changes done to the CFGRID via ActionScript are not picked up properly.  A resolution to this problem would earn my eternal gratitude!  I've spent significant time Googling and surfing through the Adobe developer's forums for info about how to resolve this with no luck.
<CFOUTPUT>
 
<CFQUERY NAME="GetWidgets" DATASOURCE="MyODBC">
  SELECT widget_id, name, downloads, sortval
  FROM widgets
  ORDER BY sortval
</CFQUERY>
 
 
<cfform name="widgetList" 
  format="Flash" 
  onload="formOnLoad()" 
  width="790" timeout="0" 
  method="post" 
  action="updateSortOrder.cfm">
 
<cfformitem type="script">
 
var overSourceItem:Boolean = false;
var overTargetItem:Boolean = false;
 
 
function formOnLoad() { 
  gridSource.dragEnabled=true;
  gridSource.dropEnabled=true;  
  
  gridSource.addEventListener('dragEnter', doDragEnter);
  gridSource.addEventListener('dragComplete', doDragCompleteDGSource);
  gridSource.addEventListener('dragExit', doDragExitSource); 
  gridSource.addEventListener('dragOver', doDragOverSource);
}
 
 
 
function doDragEnter(event) {
  event.handled = true;
  _root.overSourceItem = true;
  _root.overTargetItem = true;
}
 
function doDragExitSource(event) {
  _root.overSourceItem = false;
  _root.overTargetItem = false;
  event.target.hideDropFeedback();
}
   
  
    
function doDragOverSource(event) {
  _root.gridSource = event.target;
  
  if (_root.gridSource.dataProvider.length > 0) {
    _root.overSourceItem = true;
    _root.overTargetItem = true;
    event.target.showDropFeedback();
    event.action = mx.managers.DragManager.MOVE;
  } 
}
 
 
 
function doDragCompleteDGSource(event){
  var dest = event.target;
  var dropLoc = dest.getDropLocation();
  var selectedIn:Array = event.target.selectedIndices;
 
  if (_root.overTargetItem) {
    var selectedIndex = event.target.selectedIndex;
    
    //Add dragged item to the list at drop location
    for(var i = 0; i < selectedIn.length; i++){
      if (dropLoc > selectedIndex)
        var insLoc = dropLoc + 1;
      else  
        var insLoc = dropLoc;
        
      event.target.addItemAt(insLoc, event.target.selectedItems[i]);      
    }
 
    //Remove dragged item from list at its original location
    for(var i = 0; i < selectedIn.length; i++){
      if (dropLoc > selectedIndex)
        event.target.dataProvider.removeItemAt(selectedIndex);        
      else  
        event.target.dataProvider.removeItemAt(selectedIndex + 1);
    }
 
    //Resequence sortval field
    for(var i = 0; i < event.target.length; i++){
      event.target.dataProvider[i].sortval = i + 1;      
    }
 
  } 
 
  _root.overSourceItem = false;
  _root.overTargetItem = false;
  _root.gridSource.hideDropFeedback();
}
 
 
function addData() {
  //Add some data to the source grid
  gridSource.removeAll();
 
  <CFLOOP Query="GetWidgets">
    gridSource.addItem({
       widget_id:"#GetWidgets.widget_id#",
       name:"#GetWidgets.name#",
       downloads:"#GetWidgets.downloads#",
       sortval:"#GetWidgets.sortval#"});
  </CFLOOP>
}
 
</cfformitem>
 
 
<cfformgroup type="horizontal" width="100%">
<cfinput type="button" name="btnAddData" value="Reload Data" onClick="addData();">
<cfinput type="submit" name="btnUpdate" value="Save">
</cfformgroup>
 
<cfgrid name="gridSource" rowheaders="false" height="400" width="780" query="GetWidgets" selectMode="Edit">
  <cfgridcolumn name="widget_id" header="Widget Id" bold="no" width="70" select="no">
  <cfgridcolumn name="name" header="Widget Title" bold="no" width="500" select="no">
  <cfgridcolumn name="downloads" header="Downloads" bold="no" width="80" select="no">
  <cfgridcolumn name="sortval" header="Sort Order" bold="no" width="80" select="no">  
</cfgrid>
 
 
</cfform>
 
</CFOUTPUT>
 
______________________________________________________________________________________
The above posts to updateSortOrder.cfm, listed below (the key parts any ways)
 
 
<CFOUTPUT>
 
<CFDUMP Var="#form#">
 
<CFSET GridName = "gridSource">
<CFSET ColNameList = "sound_iid,name,downloads,artist_sort">
 
<cfloop index="ColName" list="#ColNameList#">
  <br>form.#GridName#.#ColName#:<br>
    
  <CFSET Array_New = evaluate("form.#GridName#.#ColName#")>
  <CFDUMP Var="#Array_New#">
</cfloop>
 
</CFOUTPUT>

Open in new window

0
Comment
Question by:HarmonyClaire
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 14

Assisted Solution

by:RickEpnet
RickEpnet earned 20 total points
ID: 24029407
The way you make change to a cfgrid data is with the onChange= and then you write the action-script to update the table.

Also look at the selectMode Attribute.

http://livedocs.adobe.com/coldfusion/8/htmldocs/Tags_g-h_03.html#3987012
0
 

Accepted Solution

by:
HarmonyClaire earned 0 total points
ID: 24030806
As a workaround, create a function which is called in the onChange event of a form submit button.  In the new function, loop through the grid and store text info in a hidden text, which can then be read as a form variable in the post script, parsed and acted upon accordingly.

So, the function and other script is modified like this:
 
//Create string holding sound_iid + sort value, set to hidden field
function postForm() {
  var tstr = "";
  
  for(var i = 0; i < gridSource.dataProvider.length; i++) {
    tstr = tstr + 
      _root.gridSource.dataProvider[i].widget_id + "_" + _root.gridSource.dataProvider[i].sortval + ",";    
  }
 
  _root.trackSortInfo.text = tstr;
}
 
</cfformitem>
 
<cfformgroup type="horizontal" width="100%">
<cfinput type="button" name="btnAddData" value="Reload Data" onClick="addData();">
<cfinput type="submit" name="btnUpdate"  value="Save" onClick="postForm();">
</cfformgroup>
 
<cfgrid name="gridSource" rowheaders="false" height="400" width="780" query="GetSounds" selectMode="Edit">
  <cfgridcolumn name="widget_id" header="Widget Id" bold="no" width="70" select="no">
  <cfgridcolumn name="name" header="Widget Title" bold="no" width="500" select="no">
  <cfgridcolumn name="downloads" header="Downloads" bold="no" width="80" select="no">
  <cfgridcolumn name="sortval" header="Sort Order" bold="no" width="80" select="no">  
</cfgrid>
 
<cftextarea name="customSorted" height="40" Width="40" visible="no" value="false"/>
<cftextarea name="widgetSortInfo" height="40" Width="680" visible="no" value=""/>
 
</cfform>

Open in new window

0
 

Expert Comment

by:ESPMJB
ID: 24569168

ColdFusion 8.0 CFGRID changes on FLASH CFFORM not posting to action script page properly

Trying to implement the work around for the drag drop and the postForm() workaround does not seem to work. can anyone help.  What I would love to do is to see if it is possible to use CFAJAXproxy to update the data without doing a post or a submit by looping through the grid data.  Is that even possible?

If someone could help it would be greatly appreciated.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can flash builder 4.X version make use of java 8 5 388
JKS to store upstart data 2 119
DNS, website, godaddy 6 95
Systems talking to each other 5 147
Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
Lease-to-own eliminates the expenditure of hardware replacement and allows you to pay off the server over time. Usually, this is much cheaper than leasing servers. Think of lease-to-own as credit without interest.
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question