6 Replies Latest reply on Jan 2, 2013 9:00 AM by joel_pau

    Inserting HTML content into an animated DIV

    jdhughen Level 1

      Can you, and if so how, insert HTLM content into an EGDE animated Div box? Specificaly an HTML table?  I can get the html code in the box but it won't read/render it as html code. In flash you can tell the program that the contents of the box is html code and it will read it as such but I don't see any way to do that here. I've tried several ways and I can get the code to display in the box but it won't render the code instruction in the boxCan it be done ??

       

      Thanks

       

      joel

        • 1. Re: Inserting HTML content into an animated DIV
          joel_pau Level 5

          Hi,

           

          jQuery functions and Edge API can be used.

          attachment: jQuery [ append(), appendTo() ].

          Coding with sym.getSymbol():

          sym.$('<p>new Text:<br>Lorem ipsum</p>').appendTo(sym.getSymbol("symName"));

          sym.getSymbol("symName").append('<p>new Text:<br>Lorum ipsum</p>');

           

          You can post your project or sample files.

          • 2. Re: Inserting HTML content into an animated DIV
            jdhughen Level 1

            Joel,

             

            Thanks for the response. I've done some more research and decided to approach my problem from a different direction.. Since I'm a AE guy by trade I've decided to do the animation and basic layout stuff first using block divs and symbols where needed and then figure out how to fill those "blocks" with data from a JSON file. My JSON file has several levels and an array and I'm having problems with the proper syntax on the calls. As soon as I get it put together I will start a new thread to better targeted to the problem I'm having.

             

            In the meantime if you know of any tuts on retriving data from a nested JSON file in EDGE that would be great.

            Using the example below I can't figure out how to access the URL in the nested "image" node.

             

            ex code...

             

            $.getJSON('profiles.json', function(json) {

             

                            var data = eval (json);

                            var s = sym.createChildSymbol("profile", "stage");  // "profile" is a symbol that is the block layout of the whole player profile, and "photo" is the block div tthat will hold the photo when retrived.

                            s.$("photo").css({"background-image":"url('"+data.player[0].image+"')"});    //this is the line I have the problem with. If I just put the URL in there it works, but I can't retrive it from the JSON file.

             

                    }

            );

             

            ****************************

            example JSON data

             

            [

               {

                  "player": [

                     {

                        "image": "images/player1.jpg",  //this is the URL I want to retrive

                       "name": "player1",

                     },

                     {

                        "image": "images/player2.jpg",

                        "name": "player2",  

                     },

                     {

                        "image": "images/player3.jpg",

                        "name": "player3",  

                     },

                     {

                        "image": "images/player4.jpg",

                        "name": "player4", 

                     }

                  ]

               }

            ]

             

            Can't figure out what I'm doing wrong with the syntax

             

            thanks

             

            Joel H

            • 3. Re: Inserting HTML content into an animated DIV
              joel_pau Level 5

              Hi,

               

              1) Your json file is not valid.

              You can copy and paste your datas here: http://jsonlint.com/

              Red commas must be deleted.

              [

                 {

                    "player": [

                       {

                          "image": "images/player1.jpg",  //this is the URL I want to retrive

                         "name": "player1",

                       },

                       {

                          "image": "images/player2.jpg",

                          "name": "player2"

                       },

                       {

                          "image": "images/player3.jpg",

                          "name": "player3"

                       },

                       {

                          "image": "images/player4.jpg",

                          "name": "player4",

                       }

                    ]

                 }

              ]

               

              2)An example from http://docs.jquery.com/Ajax/jQuery.getJSON:

              jsonExample.jpg

               

               

              3) compositionReady Tests.

               

              On compositionReady, i write:

              var profiles = {

                             "player": [

                                {

                                  "image": "images/player1.jpg",

                                  "name": "player1",

                                },

                                {

                                   "image": "images/player2.jpg",

                                   "name": "player2"

                                },

                                {

                                   "image": "images/player3.jpg",

                                   "name": "player3"

                                },

                                {

                                   "image": "images/player4.jpg",

                                   "name": "player4",

                                }

                             ]

              };

               

              console.log(profiles.player[1].image); // this line returns: "images/player2.jpg"

               

              Note: i deleted the first "[" and the last "]".

              1 person found this helpful
              • 4. Re: Inserting HTML content into an animated DIV
                jdhughen Level 1

                Joel,

                Thanks for the reply,

                 

                1. yea I caught the commas after I sent the post last night. What I put up there was a truncated version. Each "player" has many nodes. I just chopped them off for this example and forgot to delete the commas. It still doesn't work right in my code which I assume is the problem.

                 

                2. I looked at that example from the jquery site and still can't figure out how to make the syntax work for the URL call. If I go back to my json file and remove "player" level, then this works

                 

                s.$("photo").css({"background-image":"url('"+data[0].image+"')"});

                 

                but if I add the "player" level back in I can't get the syntax right to retrive that same URL.

                 

                3. So is this just a test of the JSON ? I notice you have the trailing commas back in after the "name" nodes?  do these have to be added when entered this way in EDGE?

                When I delete the first and last [ ] in dreamweaver (where I edit my JSON) I get an error message in the JSON file ? I'm obviously missing something here.

                 

                To try to explain how this is all going to work.....

                 

                There will be 15 (or so) thumb images that will be animated into position. Each thumb will have a "index" number. when an image is clicked on a "profile" will be displayed (ie symbol created on top). This "profile" will be populated with info from the JSON file reletive to the "index" number of the thumb that was clicked on. This retrived info includes Images as well as Text.  Did that make sense ??  We might was have to wait until I get it put together. I will try to put a simplified project version together and send it.

                 

                Much thanks

                 

                Joel H

                • 5. Re: Inserting HTML content into an animated DIV
                  jdhughen Level 1

                  Joel P,

                  I found part of the problem...

                   

                  1. The "images" folder in the Library panel. I had added some images with simplified names directly to the "images" using file explorer, and EDGE didn't update the folder in the library panel. Until the images were manualy added to the library assets images folder I couldn't access them in code when I tried to use your example "3" to display an image.  When I originaly created the project it found all the images I had in the "IMAGES" folder but then edge apparently doesn't auto update that folder after project creation ? I also can't find any "update" or "refresh" cmd to do that ??

                   

                  2. Once I deleted the first and last [ ] from my json file I was able to make this work....

                   

                  $.getJSON('profiles.json', function(json) {

                   

                                  var data = eval (json);

                                  var s = sym.createChildSymbol("profile", "stage");

                                  s.$("photo").css({"background-image":"url('"+data.player[1].image+"')"});

                                  s.$("name").html(data.player[1].name);

                   

                          }

                   

                  );

                   

                  I had been using dreamweaver to edit my JSON and if I deleted the first and last [ ] I got and error. I guess that doesn't mean anything with JSON ??

                   

                  Now I just need to figure out how to work the "on click" function to assign a "index" number to the above code and it should all work fine

                   

                  Thanks

                   

                  Joel H

                  • 6. Re: Inserting HTML content into an animated DIV
                    joel_pau Level 5

                    Ok, it's easier [to understand] with the for loop.

                     

                    1) My file: profiles.json

                    {

                                   "player": [

                                      {

                                        "image": "images/player1.jpg",

                                        "name": "player1",

                                      },

                                      {

                                         "image": "images/player2.jpg",

                                         "name": "player2"

                                      },

                                      {

                                         "image": "images/player3.jpg",

                                         "name": "player3"

                                      },

                                      {

                                         "image": "images/player4.jpg",

                                         "name": "player4",

                                      }

                                   ]

                    };

                     

                    2) My code:

                     

                    $.getJSON("oneFolder/profiles.json", function (data) {

                                for (var index in data.player){

                                         console.log(data.player[index].image+" and "+data.player[index].name);

                                }//for

                    }); //getJSON

                     

                    Now, i add symbol.

                     

                    $.getJSON("oneFolder/profiles.json", function (data) {

                                for (var index in data.player){

                                    var s = sym.createChildSymbol("fastBook", "Stage");

                                    s.$("photo").css({"background-image":"url("+data.player[index].image+")"});    

                                    s.$("name").html(data.player[index].name);

                                    console.log(data.player[index].image+" and "+data.player[index].name);

                                }; //for

                    }); //getJSON


                    1 person found this helpful