6 Replies Latest reply on Jul 31, 2014 9:46 AM by lsatony

    how load text into dynamic text boxes from external file?

    lsatony Level 1

      hi all,

       

      my animation is very simple - a background image and 2 text boxes.  one of the textboxes shows a large word, which crossfades to another word, with a total of about 12 words (showing one at a time in different text boxes fading in & out in the same spot).

       

      i need a way to have the text be imported dynamically via xml or json (xml preferred).  this article is a good start, but i noticed he's putting all of the text into one box - i need separate strings put into separate boxes from the xml.

       

      Chris Gannon - Loading XML via AJAX into Adobe Edge

       

      he uses

       

      var outputField = $(this.lookupSelector(“xmlOutput”));

       

      for his text box.  what would be the best way to revise this code to include all my individual strings to be loaded into my individual text boxes?  thinking an array might work, but my js skills are limited.

       

      any other suggestions or tutorials you could point me to would be appreciated.

       

      thanks!!

        • 1. Re: how load text into dynamic text boxes from external file?
          lsatony Level 1

          this is the structure of my xml file for reference.  thanks again!

          Screen Shot 2014-07-28 at 11.00.53 AM.png

          • 2. Re: how load text into dynamic text boxes from external file?
            joel_pau Level 5

            Hi,

             

            I will use 2 arrays: one for your xml datas and another to your edge objects.

            var xmlDatas = [], edgeText=[sym.$("Text1"), sym.$("Text2"),...];

            $.ajax({

            type: "GET",

            url: "xml/yourFile.xml",

            datatype: "xml",

            success: function(xml){

            //here i load xml datas inside this array: xmlDatas.

            },

            error: function(){ },

            complete: function(){

            //here i fill edgeText with xmlDatas

            }

            });

            2 people found this helpful
            • 3. Re: how load text into dynamic text boxes from external file?
              lsatony Level 1

              thanks joel_pau !

               

              this is helpful in seeing how the array is created, but after giving it a go I became a little confused.

               

              i wound up trying it again based on the example i linked out to previously, but it's not adding the text from my xml file when previewing.

               

              here's the code i'm using in edge animate on my stage.  something must be wrong somewhere.  let me know if you have any suggestions on this.

               

              // insert code to be run when the composition is fully loaded here

               

              // here i'm assigning a variable to each one of my textboxes at they're named in my edge animate comp

               

              var outputField1 = $(this.lookupSelector("helps2"));

              var outputField2 = $(this.lookupSelector("communicate"));

              var outputField3 = $(this.lookupSelector("experience"));

              var outputField4 = $(this.lookupSelector("interact"));

              var outputField5 = $(this.lookupSelector("understand"));

              var outputField6 = $(this.lookupSelector("overcome"));

              var outputField7 = $(this.lookupSelector("flourish"));

              var outputField8 = $(this.lookupSelector("collab"));

              var outputField9 = $(this.lookupSelector("trust"));

              var outputField10 = $(this.lookupSelector("grow"));

              var outputField11 = $(this.lookupSelector("engage"));

              var outputField12 = $(this.lookupSelector("survive"));

              var outputField13 = $(this.lookupSelector("thrive"));

              var outputField14 = $(this.lookupSelector("evolve"));

              var outputField15 = $(this.lookupSelector("connect"));

              var outputField16 = $(this.lookupSelector("achieve"));

               

               

              $.ajax({   

               

               

                  type: "GET",

               

                  url: "myxmlfile.xml",

               

                  dataType: "xml",

               

                  success: function(xml) {

               

              //here i'm trying to load the the text in my xml file into my textboxes in edge animate.  'txt1, txt2, txt3' are the tags in my xml file

               

                      outputField1 = $(xml).find('txt1').text();

                      outputField2 = $(xml).find('txt2').text();

                      outputField3 = $(xml).find('txt3').text();

                      outputField4 = $(xml).find('txt4').text();

                      outputField5 = $(xml).find('txt5').text();

                      outputField6 = $(xml).find('txt6').text();

                      outputField7 = $(xml).find('txt7').text();

                      outputField8 = $(xml).find('txt8').text();

                      outputField9 = $(xml).find('txt9').text();

                      outputField10 = $(xml).find('txt10').text();

                      outputField11 = $(xml).find('txt11').text();

                      outputField12 = $(xml).find('txt12').text();

                      outputField13 = $(xml).find('txt13').text();

                      outputField14 = $(xml).find('txt14').text();

                      outputField15 = $(xml).find('txt15').text();

                      outputField16 = $(xml).find('txt16').text();

               

               

               

                              }

               

                  });

               

               

               

              but nothing happens on preview.  my textboxes still contain the original text that lives in my comp.

              • 4. Re: Re: how load text into dynamic text boxes from external file?
                joel_pau Level 5

                Here is how i use both arrays.

                 

                var txtFields = [sym.$("help2"),sym.$("communicate"),sym.$("experience"),sym.$("interact"),sym.$("understand")];// and so on...You have to add other textfields (11 are missing here).

                var xmlDatas = [];

                $.ajax({

                  type: "GET",

                  url: "myXML.xml",

                  datatype: "xml",

                  success: function(xml){

                  $(xml).find("root").children().each( function(index,item){ xmlDatas.push($(this).text()); } )

                  },

                  error: function(){ //write a message

                  },

                  complete: function(){

                  $.each( txtFields,function(index,item){ item.html(xmlDatas[index]); } )

                  }

                });

                 

                Explanations:

                1) success.

                I don't want to script 16 text tags. Therefore, i get root children using this code: $(xml).find("root").children()

                Then, i can browse this set using the jQuery function: .each()

                S(this).text() returns tag text. I put tag text in my array using this code: xmlDatas.push( $(this).text() );

                2) complete.

                i browse [ .each() ] the array provided by success [ xmlDatas ] to fill my stage elements. My stage elements are inside this array: txtFields[].

                 

                Note: You can use your browser console to check what happens.

                $(xml).find("root").children().each( function(index,item){ xmlDatas.push($(this).text()); console.log( $(this).text(), xmlDatas[index] ); } )

                $.each( txtFields,function(index,item){ item.html(xmlDatas[index]);  console.log( xmlDatas[index], item.html() );} )

                1 person found this helpful
                • 5. Re: Re: how load text into dynamic text boxes from external file?
                  joel_pau Level 5

                  About your code:

                  • i will replace var outputField1 = $(this.lookupSelector("helps2")); by var outputField1 = sym.$("helps2");
                  • i will replace outputField1 = $(xml).find('txt1').text(); by outputField1.html( $(xml).find('txt1').text() );


                  Another idea:

                  You can group your textfield as indicated above to avoid this array: txtFields.

                  StageElementsXml.jpg

                  It changes:

                  complete: function(){

                  var txtZone = sym.$("Group").children();

                  $.each( txtZone, function(index,item){ $(this).html(xmlDatas[index]); } )

                  }

                   

                  The first line is deleted: var txtFields = [sym.$("help2"),sym.$("communicate"),sym.$("experience"),sym.$("interact"),sym.$("underst and")];

                   

                  Did you try to create and use a symbol?

                  1 person found this helpful
                  • 6. Re: Re: how load text into dynamic text boxes from external file?
                    lsatony Level 1

                    thanks so much for your time in helping me with this!  i really appreciate it!

                     

                    my text boxes are grouped in a div called "txt-group-large" the individual text boxes are not symbols (i don't want to convert them to symbols for this particular project).

                     

                    in that case, i believe i can use

                    $(this.lookupSelector("helps2"))

                     

                    in place of

                    sym.$("help2")

                     

                    the "helps2" text box is not grouped - it lives outside the "txt-group-large" group (see it at the bottom of the screenshot).

                     

                    Screen Shot 2014-07-31 at 12.39.02 PM.png

                     

                     

                     

                    I've done this, and it's working:) - it gets the text from the 1st xml tag and places it correctly into the "helps2" div.

                     

                    for the others, it does grab the text from the xml, but displays them in reverse order for some reason.

                     

                    so it looks like everything is good, just the reverse order issue is the only problem now.

                     

                    here is my current code.

                     

                     

                    // insert code to be run when the composition is fully loaded here

                    var txtFields = [

                     

                    $(this.lookupSelector("helps2")),

                    $(this.lookupSelector("achieve")),

                    $(this.lookupSelector("connect")),

                    $(this.lookupSelector("evolve")),

                    $(this.lookupSelector("thrive")),

                    $(this.lookupSelector("survive")),

                    $(this.lookupSelector("engage")),

                    $(this.lookupSelector("grow")),

                    $(this.lookupSelector("trust")),

                    $(this.lookupSelector("collab")),

                    $(this.lookupSelector("flourish")),

                    $(this.lookupSelector("overcome")),

                    $(this.lookupSelector("understand")),

                    $(this.lookupSelector("interact")),

                    $(this.lookupSelector("experience")),

                    $(this.lookupSelector("communicate"))

                     

                     

                    ];

                     

                     

                    var xmlDatas = [];

                     

                    $.ajax({

                     

                      type: "GET",

                     

                      url: "txt-home.xml",

                     

                      datatype: "xml",

                     

                      success: function(xml){

                     

                      $(xml).find("root").children().each( function(index,item){ xmlDatas.push($(this).text()); } )

                     

                      },

                     

                      error: function(){ //write a message

                     

                      },

                     

                      complete: function(){

                     

                      $.each( txtFields,function(index,item){ item.html(xmlDatas[index]); } )

                     

                      }

                     

                    });