[thelist] Coldfusion: getting javascript variables

.jeff jeff at members.evolt.org
Tue Jan 8 19:56:36 CST 2002


ted,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: ted serbinski
>
> > how is this array being created in the first place?
>
> The array is being created dynamically, which further
> complicates things. If you follow this link:
> http://www.people.cornell.edu/pages/tss24/menu.html
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

ok, i noticed a few javascript things that need some attention when you have
the chance.  you're unnecessarily using the eval() method all over the
place.  this will impact the performance of your script.  i would remove
every instance.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> You will see this menu manager I'm developing. It's a
> visual way to see your menu layout, and how sublinks are
> related to parent links and ect.  Once you get your
> layout correctly, I want to this data to a cold fusion
> script which generates the html code.
>
> Now I'm not using normal arrays, but rather structure
> type arrays in javascript:
>
> data['item1Name']= 'item 1';
> data['item1Action']= 'http://www.yourLink.com';
> data['item1X']= 100;
>
> Each item has the above information, denoting its name,
> where it goes, and the type of link it is based on its
> X coordinate (100 for main link, 115 for sub link, 130
> for sub-sub link).
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

bit of terminology: "structure type arrays in javascript" are called
associative arrays.  arrays that use numbers as the index are index arrays.

it looks to me like maybe you should take a look at wddx.  use that to
convert your javascript associative arrays into a wddx packet, stuff that in
a form field, and submit it to the coldfusion page.  then, use <cfwddx
action="wddx2cfml"> to convert it to coldfusion, walk through the structures
saving the data in a text file or database.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> Is there a better way to do this? I am thinking probably
> so but am also rushing to get this done by tomorrow
> morning.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

ouch, tomorrow morning eh?  doesn't give you much time to build it the right
way.

i'd create a top level variable as a structure -- call it "menu".  in this
struct, i'd create a key that held a list of the top level menu items.  i'd
also create a key that's a structure for each list item.  i'd then create a
key in each of these substructures to hold a list of each of the top level
menu item's associated sub-items.  lather, rinse, repeat for as many levels
as you need.

<cfscript>
  menu = StructNew();
  menu.keys = 'home,about,faq,contact,products';

  menu.home = StructNew();
  menu.home.keys = 'link1,link2,link3';
  menu.home.href = '/home/index.html';

  menu.home.link1 = StructNew();
  menu.home.link1.keys = 'sub1link1,sub1link2,sub1link3';
  menu.home.link1.href = '/home/link1/index.html';

  menu.home.link1.sub1link1 = StructNew();
  menu.home.link1.sub1link1.keys = '';
  menu.home.link1.sub1link1.href = '/home/link1/sub1link1.html';

  menu.home.link1.sub1link2 = StructNew();
  menu.home.link1.sub1link2.keys = '';
  menu.home.link1.sub1link2.href = '/home/link1/sub1link2.html';

  menu.home.link1.sub1link3 = StructNew();
  menu.home.link1.sub1link3.keys = '';
  menu.home.link1.sub1link3.href = '/home/link1/sub1link3.html';

  menu.home.link2 = StructNew();
  menu.home.link2.keys = 'sub2link1,sub2link2,sub2link3';
  menu.home.link2.href = '/home/link2/index.html';


  menu.home.link2.sub2link1 = StructNew();
  menu.home.link2.sub2link1.keys = '';
  menu.home.link2.sub2link1.href = '/home/link2/sub2link1.html';

  menu.home.link2.sub2link2 = StructNew();
  menu.home.link2.sub2link2.keys = '';
  menu.home.link2.sub2link2.href = '/home/link2/sub2link2.html';

  menu.home.link2.sub2link3 = StructNew();
  menu.home.link2.sub2link3.keys = '';
  menu.home.link2.sub2link3.href = '/home/link2/sub2link3.html';

  menu.home.link3 = StructNew();
  menu.home.link3.keys = 'sub3link1,sub3link2,sub3link3';
  menu.home.link3.href = '/home/link3/index.html';

  menu.home.link3.sub3link1 = StructNew();
  menu.home.link3.sub3link1.keys = '';
  menu.home.link3.sub3link1.href = '/home/link3/sub3link1.html';

  menu.home.link3.sub3link2 = StructNew();
  menu.home.link3.sub3link2.keys = '';
  menu.home.link3.sub3link2.href = '/home/link3/sub3link2.html';

  menu.home.link3.sub3link3 = StructNew();
  menu.home.link3.sub3link3.keys = '';
  menu.home.link3.sub3link3.href = '/home/link3/sub3link3.html';

  menu.about = StructNew();

//  .... etc. ...
</cfscript>

creating your menu from this complex structure is very easy (especially if
the depth of nesting is pre-defined and limited).  simply convert your
"keys" key value from a list into an array, loop over it from 1 to its
ArrayLen(), creating the html for your top level menu.  then, if the user
clicks to one of the toplevel pages, use the information about the page they
clicked to find the right key in the menu structure:

menu[page_name]

see if that submenu's "keys" key value has a length.  if so, convert it to
an array, and loop over it from 1 to its ArrayLen(), creating the html for
the sub menu for the page they're viewing.

remember, you can access keys of structures in coldfusion as if they were
associative arrays in javascript.  just use square brackets.  there's no
need to get all crazy server-side with the Evaluate() function.

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/






More information about the thelist mailing list