Solved

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

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

Get up to 2TB FREE CLOUD per backup license!

An exclusive Black Friday offer just for Expert Exchange audience! Buy any of our top-rated backup solutions & get up to 2TB free cloud per system! Perform local & cloud backup in the same step, and restore instantly—anytime, anywhere. Grab this deal now before it disappears!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
php.ini on ipage hosting 12 41
Remove Index.php in Codeigniter 12 53
Tool to email me when a website changes 29 106
Play RTMP without Flash 3 281
Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

757 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

21 Experts available now in Live!

Get 1:1 Help Now