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. Example below:

<cfset x = "some_value">
<cfoutput>
<script language="javascript">
<!--
alert(x);
//-->
</script>
</cfoutput>

The example above will throw an error since x in javascript(which is not defined in js) is not the same as the x in cf.
Instead, for the above code, you need to do this:

<cfset x = "some_value">
<cfoutput>
<script language="javascript">
<!--
alert("#x#"); <!--- notice the number/hash sign. this way, x will be displayed(note: x is still a cf variable and not a js var) --->
//-->
</script>
</cfoutput>

Anyway, what exactly are you trying to do? Can you attach a portion of your code?

[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.

[Newsgroup_User]

Dinghus wrote:
> 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.
>

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]

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?

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.

[Newsgroup_User]

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.

[Newsgroup_User]

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.

[Newsgroup_User]

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.

[Newsgroup_User]

> 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.

[Newsgroup_User]

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.

[Guest]

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 data directly into JS 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.

[Newsgroup_User]

> 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

[Newsgroup_User]

> 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: Demo

[mr. modus]

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