CF Array and JavaScript

[Dinghus]

Is it possible to manipulate arrays created in coldfusion with JavaScript?
All I'm trying to do is update a count (array length) dynamically everytime
something is added to the array. So I got the brilliant idea to add the data
submitted using JS and do a dynamic count update at the same time. But what I
get is the JS error saying the array is undefined.

Suggestions?

[dongzky]

variables, arrays, lists, structures created/declared in cf won't be identified in javascripts.

What exactly are you trying to do? Can you attach a portion of your code?

[GArlington]

You can not manipulate CF vars (any type) directly from javascript
because...
CF runs where?
Javascript runs where?

You mentioned that CF array gets updated (from somewhere by
something), this implies a call to CF (server) page (because otherwise
it will not work).
To get CF vars to javascript see CF docs for <cfwddx ...>

[Dinghus]

What I'm trying to do is insert data into an array, similar to a shopping cart,
and then update a count of items in the array. I want to stay on the same page
instead of refreshing it. The count will just be a dynamic number. The data in
the array will be sent to the database at the end of the session.

[Dan Bracuk]

You can use the toScript function to convert a 1D cf array to js. js does not
have 2D arrays.

Regarding this, "The data in the array will be sent to the database at the end
of the session. ", either you didn't say what you meant or you have an upcoming
problem.

[Ian Skinner]

Are you keeping it straight that ColdFusion runs on the server and
JavaScript runs on the client and never shall the two meet!

I.E. Unless you have taken steps to have a JavaScript COPY of the
ColdFusion array delivered to the client, it does not exist there.

[BKBK]

[i]Is it possible to manipulate arrays created in coldfusion with JavaScript?

Suggestions? [/i]

There could be ways to do that, using the new Javascript capabilities of
Coldfusion 8. Let's see your code.

[Dinghus]

Hmmm first, JS does have 2D arrays, just a bit of playing around to do it. BUT
I'm not trying to do that so it is a moot point.

Basically I have a long list of people and the user will be selecting them.
This will add them to an array. There is a display of people selected at the
top. They can also be removed.

So I want the person's ID added to the array and the count updated when a
button is clicked next to their name. All without refreshing the page.

I do an onClick to call a JS function that can update the count but I want it
to insert the ID into an array at the same time. Then when the user clicks
"DONE" the array is sent to the database.

I see I will probably have to come up with another way of doing the temp
storage tho. Maybe a hidden form field.

[Dan Bracuk]

Check boxes seem so much simpler than what you are attempting.

[Dinghus]

Check boxes would be the same. I need the data in the array for other reasons.
Almost like a shopping cart. I'm thinking now that I have to do it all by JS
and then pass the data to a CF page via http request or some such.

[Ian Skinner]

Dinghus wrote:
> I'm thinking now that I have to do it all by JS
> and then pass the data to a CF page via http request or some such.
>

Exactly! The ColdFusion server does not see the client and the client
does not see the ColdFusion server.

The data must pass back and forth with http requests and responses.
Unless one is working with Flex or similar techniques that open a
connection between the client and server outside of the HTTP standard.

You can use AJAX functionality if you would like to hide these requests
and responses behind the scenes so the user does not see page refreshes.

[Dinghus]

Let me clairfy something to everyone who is thinking my idea was obviously
wrong. It wasn't.

Javascript can manipulate forms and form data. So if I build a form in
ColdFusion it can send data to JavaScript and JS can actually alter that data
and send it back. And what is a form? A STRUCTURE. This led me to wonder if it
was possible to actually interact with other structures in the some way.

The only mistake was forgetting that forms are part of the DOM where as other
structures are not.

Obviously JS and CF can not communicate in real time but assuming they can not
communicate is incorrect.

Maybe I can manipulate cookies in the same way, tho I'm thinking sandbox rules
probably will prevent that.

[Ian Skinner]

Dinghus wrote:
>
> Maybe I can manipulate cookies in the same way, tho I'm thinking sandbox rules
> probably will prevent that.
>

I've used JavaScript to create and manipulate cookies in the past.

[Ian Skinner]

Dinghus wrote:
>
> Obviously JS and CF can not communicate in real time but assuming they can not
> communicate is incorrect.
>

But how they communicate, and the limitations imposed on this, are very
important.

If it has not been suggested yet, have you looked into the <cfwddx...>
tag? It has an option to convert a ColdFusion data into JavaScript
data. I've used it in the past to pass array data to the client where
it can be manipulated by code running in the browser. You then need to
someway pass the data back to the server in a following request where it
can be used to update the original data.

[Adam Cameron]

> Maybe I can manipulate cookies in the same way, tho I'm thinking sandbox rules
> probably will prevent that.

Before the notion of AJAX was around, Jim Davis wrote an essay on how to do
async comms with a GIF and a cookie.

http://www.depressedpress.com/Content/Development/JavaScript/Articles/GIFAsPipe/Index.cfm

This covers the cookie manipulation you mention.

> Obviously JS and CF can not communicate in real time but assuming they can not
> communicate is incorrect.

Well I think the point is that they cannot communicate *directly*: they
need to use HTTP. Just like you and I can't just talk to each other
directly: we need a forum.

Really a lot of people on these forums seem to think "CF is a computer
language which has something to do with making my web page do stuff...
JavaScript is a computer language which has something to do with making my
web page do stuff. That's pretty much the same: they must just
intrinsically be able to play with each other's code". And they don't seem
to "get" the whole client / server thing. I think from your earlier posts
in this thread it would be fair enough for people to be saying "well...
no... it doesn't work like that". I don't think anyone was assuming it's
not possible, I think they might have been giving the "Client/Server 101"
answer, before moving on to the "Client/Server 102: why that is the answer"
spiel. Quite possibly they could have skipped to the latter, in this case.

--
Adam

[Dinghus]

I use wddx to save the array to the client variable.

[Ian Skinner]

Dinghus wrote:
> I use wddx to save the array to the client variable.

It can be used to directly build an JavaScript array if desired.

<html>
<head>
<script type="text/javascript">
<cfwddx input="#myCFArray#" toplevelvariable="myJSArray"
action="cfml2js">
</script>
</head>
...
</html>

Run a page like this and view source in a browser and see a nice JSArray
all ready for minuplation. I leave it up to you to write JavaScript
that then does something the the myJSArray structure in the client.

[coffeedrinker56]

On 07/08/2008 11:19:50 AM Dinghus wrote: "Hmmm first, JS does have 2D arrays,

just a bit of playing around to do it. "

Technically JS arrays are 1D arrays that may (or may not) contain other arrays
as elements. The difference is that in a typical 2D array, all elements are
bound by type; in JS there is no such boundary. One array may contain numbers,
text, other arrays, images, et al.

But... back to the original question:
I use two different methods of loading CF data into arrays:

1) I load a hidden [XHTML] element with the CF array contents, and then
read/manipulate that element as required. Note that array is inserted as an XML
document - which meets DOM compliance requirements - and that JS is used to
parse the XML as needed.

2) When #1 is not practical, I use Ajax to execute CF scripts to load JS
directly into arrays and then - after the JS arrays are manipulated - use Ajax
again to update the server.

[Dinghus]

Technically ALL arrays are 1D. But that is nitpicking. :)

Anyway, I'd love to see an example of #1.

[Adam Cameron]

> Technically JS arrays are 1D arrays [...].

Sure.

> The difference is that in a typical 2D array, all elements are
> bound by type;

Only in a typeful language. It's quite possible to have multidimensional
arrays in typeless languages, each data point of which is an arbitrary
notional data type.

> in JS there is no such boundary. One array may contain numbers,
> text, other arrays, images, et al.

I would more say that the definition of a true multi-dimensional array is
that each element at every index of the first [n-1] dimensions is an array.
The final dimension contains the data points. The rules of the data types
of these points is dictated by the typefulness of the language.

Which is all well and good, but nothing to do with the issue @ hand, I
think we can all agree ;-)

--
Adam

[Adam Cameron]

> Technically ALL arrays are 1D.

Say what?

Is this some obscure reference to the schema of the underlying data storage
mechanism?

--
Adam

[mr. modus]

Ok, so I'm not totally positive this is what you want, but I've created some
code that I think achieves what you are looking for. The only thing I didn't
include is a function for getting your js array values into a form field for
passing to the server. It's pretty easy, if you aren't familiar I can give you
code for that too.

Hopefully this is what you are looking for. See attached code.

I have also put this on my website to show you. Link is here:
http://www.modus.bz/arrayDemo.cfm

<!--- Create array in cf. --->
<cfset ar = ArrayNew(1)>

<!--- Add values to this array. --->
<cfset ar[1] = "1">
<cfset ar[2] = "2">
<cfset ar[3] = "3">
<cfset ar[4] = "4">
<cfset ar[5] = "5">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
<!--- Create Javascript block. --->
<script language="JavaScript">
<cfoutput>
var ar = new Array();
<!--- js arrays start at index 0, so account for that by subtracting 1 from
arraylen. --->
<cfloop from="0" to="#ArrayLen(ar)-1#" index="x">
ar[#x#] = #ar[x+1]#;
</cfloop>
</cfoutput>

// this function will add an item to the array
function addItem(IDIN) {
var isThere = false; // var to hold if value is found

for(var a=0;a<ar.length;a++) { //first loop through array to ensure value
isn't already in array
if(ar[a] == IDIN) isThere = true;
}

if(!isThere) ar[ar.length] = IDIN; // if value wasn't found then add it to
array

setCount(); // call function to set count.
}

// this function will remove item from array;
function removeItem(IDIN) {
var ar2 = new Array(); // create temp array to hold items

for(var a=0;a<ar.length;a++) { //first loop through array and find value to
remove
if(ar[a] != IDIN) { // if this isn't the value we want to remove...
ar2[ar2.length] = ar[a]; //append value to temp array
}
}
ar = ar2; // set original array to temp array;

setCount(); // call function to set count.

}

// This function will set the count of the array;
function setCount() {
document.getElementById("Count").value = ar.length;
}
</script>
</head>

<body onload="setCount()" style="font-family:arial;font-size:12px;">
Your Array Length: <input type="Text" id="Count" value=""
style="width:25px;border:0px;text-align:right;"> Items<br>
<br>

<!--- This code in page. --->
<!--- value inside add2array call is the ID of the person in question. --->
<input type="button" onclick="addItem('25')" value="Add Joe Smith"><br>
<input type="button" onclick="removeItem('25')" value="Remove Joe Smith"><br>
<br>
<input type="button" onclick="addItem('30')" value="Add Joe Mamma"><br>
<input type="button" onclick="removeItem('30')" value="Remove Joe Mamma"><br>
<br>
<input type="button" onclick="addItem('50')" value="Add Joe Bloe"><br>
<input type="button" onclick="removeItem('50')" value="Remove Joe Bloe"><br>

</body>
</html>

[mr. modus]

Dinghus, did you try the example? Is that what you were looking for?