Solved

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

Posted on 2009-03-30
3
932 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

910 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now