Dynamically populated DataGrids

[worked]

Hey there- So I have a simple DataGrid that is populated with a MySQL DB. 

When a row is selected in this DataGrid, a new .swf file is loaded housing another DataGrid.  This new DataGrid should only display information relative to the row that was clicked.  What if I have 80 rows of content in the first DG?  I don't want to create 80 .swf and .php files to load that content.  Can I pass variables to a generic PHP file, where the query is always the same structure, but the elements are dynamic and updates depending on the information selected in the first DataGrid?

For example,

AS3: Inital Datagrid

Code:

var myData:URLRequest = new URLRequest("first_datagrid.php");
myData.method = URLRequestMethod.POST;

var dg:DataGrid = new DataGrid();
var boards:Array = new Array();
function datagridOnLoad(evt:Event) {
for (var i:uint=0; i<evt.target.data.cant; i++) {
boards.push({
company:evt.target.data["company"+i],
board:evt.target.data["board"+i],
swf:evt.target.data["swf"+i]
});
}
var aDg:DataProvider = new DataProvider(boards);
dg.dataProvider = aDg;
dg.columns = ["company", "board"];
dg.selectable = true;
dg.addEventListener(Event.CHANGE, changeHandler);
}

function changeHandler(event:Event):void {
var boardsLoader:Loader = new Loader();
var urlLoader:URLRequest = new URLRequest();
urlLoader.url = DataGrid(event.target).selectedItem.swf;
boardsLoader.load(urlLoader);
addChild(boardsLoader);
}

first_datagrid.php:

Code:

<?php
require_once('mysql_connect.php');

$result = mysql_query("SELECT company, board, swf FROM tbl_board");
$cant = 0;
while($row=mysql_fetch_array($result)){
echo "company$cant=$row[company]&board$cant=$row[board]&swf$cant=$row[swf]&";
$cant++;
}
echo "cant=$cant";
?>

AS3: Second DataGrid

Code:

var myData:URLRequest = new URLRequest("generic_datagrid.php");
myData.method = URLRequestMethod.POST;

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, datagridOnLoad);
loader.load(myData);

function datagridOnLoad(evt:Event) {
var boards:Array = new Array();
for (var i:uint=0; i<evt.target.data.cant; i++) {
boards.push({
member:evt.target.data["userName"+i],
durability:evt.target.data["ratingDurability"+i],
});
}

bldRosterGrid(aDg);
aDg.dataProvider = new DataProvider(boards);
}

function bldRosterGrid(dg:DataGrid){
    dg.columns = ["member", "durability"];
dg.addEventListener(Event.CHANGE, changeHandler);
}

generic_datagrid.php:

Code:

<?php
require_once('mysql_connect.php');
//want it to display the type and rating depending on the selection made in the first DG
//not sure what to do here to make this query dynamic...
$result = mysql_query(" SELECT board_id, type, rating FROM tbl_board_rating");
$cant = 0;
while($row=mysql_fetch_array($result)){
echo "type$cant=$row[type]&rating$cant=$row[rating]&";
$cant++;
}
echo "cant=$cant";
?>

[Ronald Wernecke]

You can call the second swf with a parameter giving some key for the new search.
Or set the parameter, after the swf is loaded, from the calling swf.

[worked]

Thanks for responding.  My next question is related. 

How can I trace the content that was clicked on in a DataGrid?  For example, if row 2 in the DG contained the strings, "String1" and "String2". How would I "pull out" that content when the user clicks on row 2?  Or better yet...

Can I store that rows contents in a cookie, then display that content anywhere else in my flash app?  That would be very useful.

[Ronald Wernecke]

dont think too complicated
You can read the selectedItem in the list - and there the columns.

Usualy you will read the next table from some key field.
Just give the value of the column, where the keyfield resides, to the php file running the query.
If the result is a new list, load the new SWF, and if it generates an error, load another swf, or just create a textbox or ...

[worked]

How do I "give the value of the column, where the keyfield resides, to the php file running the query"?  This is the part that I'm tripping over.  Do I have to set the selectedItem value as a cookie, and then pass that value to the generic.php file that handles the query... does this sound correct?  If so how would I do that?

Thanks, any clarification is appreciated!

[Ronald Wernecke]

you can either send it with the URL (methode = GET), or send it in the header (methode = POST).

Just see loading and saving tutorials on how to handle communication with flash corresponding with php or any other scripting language.

[worked]

I'm just having the hardest time with this concept. 

Can you throw me some code examples of what you speak of so I can see something visually?  I've tried everything. I just can't seem to find a way to pass the key of the selected row in the first datagrid to the php file that populates the second datagrid. This key is the deciding factor for the content in the second DG.

Anything would be appreciated! Thanks!

[Ronald Wernecke]

If you click into a row of the datagrid, you receive a clickEvent and the selected row as Item.
Within this row should be the id column, where you want to draw your value from.

With this information you call a php function at your server deliverung you the records for the second grid.

I would prefer AMF remoting for the communication, because it makes the transport of structured objects extremely easy.

But you can use XML or alike as well.

[worked]

Thank you again for your response! I do appreciate the help.

Can you elaborate on this comment?

"You can call the second swf with a parameter giving some key for the new search."

This sounds like what I need.  I'm just not sure how to accomplish that.

Currently the swf file is loaded this way (with the itemSelected.swf pointing to a generic.swf file found in every row of the first datagrid).

Code:

function changeHandler(event:Event):void {
var boardsLoader:Loader = new Loader();
var urlLoader:URLRequest = new URLRequest();
urlLoader.url = DataGrid(event.target).selectedItem.swf;
boardsLoader.load(urlLoader);
addChild(boardsLoader);
}

[Ronald Wernecke]

how do you pull the data into your grid?

I hope we are talking about php, you are calling, or any other server side scripting language.

And I assume, you have stored the data somewhere in a database, or alike structure.

[worked]

Correct, I'm calling a php file.  This php file contains a query which populates the 1st datagrid.  The content is stored in a MySQL DB.

The second datagrid, which is displayed only when a vistor clicks a row in the 1st dg, opens a new movie on top of the previous. This 2nd datagrid also calls a php file which contains a query that populates the datagrid. This query is structured in a way that all i need to do is change one element (id=whatever) of the query to display new data, data only related to what the user clicked in the 1st datagrid.

My problem is that I have no idea how to tell this second php file (2nd query) to understand what row the visitor clicked on, adding this information to the 2nd query and displaying the correct information.

If that's makes no sense I can post what I have and you can take a look at how is works.  Any help is appreciated, as this is the final hurdle of my project.

[Ronald Wernecke]

If you click into a row of your grid, you receive the complete row in the gridname.selectedItem object.
Then just pull off the id column and send it off to the new select (via LoadVars).
After the server returns the values, you can load the new clip and assign the values to its grid, otherwise open en error clip displaying the error message.

[worked]

This is not working but this is what my changeHandler function (that opens the swf containing the second datagrid) looks like:

main.swf:

Code:

function changeHandler(event:Event):void {
var myNewData:URLRequest = new URLRequest("second_datagrid.php");
var newLoader:URLLoader = new URLLoader();
var variables:URLVariables = new URLVariables();
myNewData.method = URLRequestMethod.POST;
myNewData.data = variables;
variables.boardSpecID = DataGrid(event.target).selectedItem.boardSpecID;

/* -- opens swf file -- */
var boardsLoader:Loader = new Loader();
var urlLoader:URLRequest = new URLRequest();
urlLoader.url = DataGrid(event.target).selectedItem.swf;
boardsLoader.load(urlLoader);
addChild(boardsLoader);
}

Where boardSpecID is the variable in my query string.
second_datagrid.php:

Code:

$boardSpecID = $_POST['board_spec_id'];
truncated...
WHERE tbl_board_fk.board_spec_id = '$boardSpecID'

I'm simply trying to pass the clicked row's ID (variables.boardSpecID = DataGrid(event.target).selectedItem.boardSpecID;) back to the second_datagrid.php script so that is populates this second datagrid with new content.

What am I doing wrong? Any help is still appreciated. Thanks!

[Ronald Wernecke]

did you check, if the variables arrive ok at php?
Use charles

[worked]

I'm using Charles, great app btw, but I'm still not sure how to pass that variable to the php script associated with generating the second datagrid, which is stored in a loaded swf file when a datagrid row is clicked. Can you send me some sample code maybe? Just need to see something to jog it loose ya know.  Thanks!