21 Replies Latest reply on Jul 12, 2008 7:06 AM by mr. modus

    CF Array and JavaScript

    Dinghus Level 1
      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?
        • 1. CF Array and JavaScript
          dongzky Level 1
          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?
          • 2. Re: CF Array and JavaScript
            Dinghus Level 1
            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.
            • 3. Re: CF Array and JavaScript
              Dan Bracuk Level 5
              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.
              • 4. Re: CF Array and JavaScript
                Level 7
                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.

                • 5. Re: CF Array and JavaScript
                  BKBK Adobe Community Professional & MVP
                  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.

                  • 6. Re: CF Array and JavaScript
                    Dinghus Level 1
                    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.
                    • 7. Re: CF Array and JavaScript
                      Dan Bracuk Level 5
                      Check boxes seem so much simpler than what you are attempting.
                      • 8. Re: CF Array and JavaScript
                        Dinghus Level 1
                        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.
                        • 9. Re: CF Array and JavaScript
                          Level 7
                          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.

                          • 10. Re: CF Array and JavaScript
                            Dinghus Level 1
                            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.
                            • 11. Re: CF Array and JavaScript
                              Level 7
                              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.

                              • 12. Re: CF Array and JavaScript
                                Level 7
                                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.
                                • 13. Re: CF Array and JavaScript
                                  Level 7
                                  > 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
                                  • 14. Re: CF Array and JavaScript
                                    Dinghus Level 1
                                    I use wddx to save the array to the client variable.
                                    • 15. Re: CF Array and JavaScript
                                      Level 7
                                      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.
                                      • 16. CF Array and JavaScript
                                        coffeedrinker56 Level 1
                                        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.

                                        • 17. Re: CF Array and JavaScript
                                          Dinghus Level 1
                                          Technically ALL arrays are 1D. But that is nitpicking. :)

                                          Anyway, I'd love to see an example of #1.
                                          • 18. Re: CF Array and JavaScript
                                            Level 7
                                            > 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
                                            • 19. Re: CF Array and JavaScript
                                              Level 7
                                              > Technically ALL arrays are 1D.

                                              Say what?

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

                                              --
                                              Adam
                                              • 20. Re: CF Array and JavaScript
                                                mr. modus Level 1
                                                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
                                                • 21. Re: CF Array and JavaScript
                                                  mr. modus Level 1
                                                  Dinghus, did you try the example? Is that what you were looking for?