12 Replies Latest reply on May 9, 2013 12:29 PM by resdesign

    manipulate dynamic info

    shadowfax007 Level 1

      Hi all-

       

      Before I get started on this, I thought I better find out if it is possible first :-)

       

      I want to build an Edge project that brings in information from a JSON file to create a "checkbox" form list.

      I'm doing it more to see if it works and as my way of learning more about Edge :-)

       

      I've done this with a small "product" listing and it works great.

       

      What I want to try and accomplish now, however, is the following:

      1. import the information into a symbol.

           -This is how I did it last time and had no troubles.

      2. Once I have the information displaying in a list within the animation, I want to manipulate it like this:

           - The user clicks on a checkbox to the right of the displayed information.

           - The Information's opacity drops to, say 50%.

           - A line is drawn through the information (like a strikethrough effect).

       

      Unfortunately, I can't even begin to figure out how to manipulate the imported information!

       

      As I'm writing this, I'm thinking that I may be able to add the anmation within the symbol, along with a check to see if the checkbox is clicked - any ideas on how to make the information into a form to begin with?

       

      Thanks for any help or pointers :-)

       

      James

        • 1. Re: manipulate dynamic info
          resdesign Adobe Community Professional & MVP

          I would create a symbol with the text that receives the information. I suppose you want a way to make sure the information has been loaded.

          I would use the html list box and then add the check mark and the strick through with code. Gosh, I made a flash component doing just that in the past (several years ago). I wish I remembered how I did it.

           

          You could also look for a jquery plugin and add your own specs.

           

          http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

           

          I'll check if I could make a sample sometime soon.

          • 2. Re: manipulate dynamic info
            shadowfax007 Level 1

            redesign-

             

            Thanks for the input!

            I've got this "somewhat" working!

            -I have the info  and checkbot inside a symbol.

            -I have the submit button on the stage's "CompositionReady", after the code to pull info from the JSON file.

             

            I have the information from the JSON file displaying, with the checkbox (Although I couldn't figure out the CSS to get the text "Delete" to align with the checkbox - minor thing as I don't plan to use it anyway).  I can put a value into the checkbox and it sends the information just as it should.

             

            I'm stuck on two things:

             

            1. How to get the "dynamic" info into the checkbox "value" option (Right now I have a "hard-coded" value to test), yet I need to get the "event_id" from the pulled JSON file to populate each checkbot.

             

            2. How and where to add the formatting upon "checking" the checkbox (fade and strikethrough)?

             

            I added the submit button to the  main stage and that seems to work great, although I'm going to need to find a way to calculate where it will go based on the number of records in the JSON file and hte height of the symbol :-)

             

            That's about it - So close!!

             

            James

            • 3. Re: manipulate dynamic info
              shadowfax007 Level 1

              Oh, I forgot the code!!

               

              Here's the code on the "symbol's CompositionReady" Action:

               

              var checkbox = sym.$("checkbox")

              inputcheckbox = $('<input />').attr({'type':'checkbox', 'value':'25' , 'id':'checkbox'});

              inputcheckbox .css ('font-size', 14);

              inputcheckbox .css ('width', 20);

              inputcheckbox .appendTo(checkbox);

               

               

               

               

              Here's the code on the "main stage's CompositionReady" Action:

               

              $.getJSON('event_school_list.json', function(data) {

               

                        for(var i=0;  i<data.length;  i++)

                        {

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

                                            s.$("id").html(data[i].id);

                                            s.$("event_id").html(data[i].event_id);

                                            s.$("event_name").html(data[i].event_name);

                                            s.$("school_name").html(data[i].school_name);

                                            s.getSymbolElement().css({"top":"100px"});

                        }

              });

               

              var submitBtn = sym.$("btn");

              submitBtn.html("Submit");

              submitBtn.css("text-align", "center");

              submitBtn.css("font-size",14);

              submitBtn.css("font-weight","bold");

               

              function checkboxInfo(){

               

                                            var checkbox = inputcheckbox.attr("value");

               

                                  location = "http://higherpowered.com/edge/form_test.lasso?checkbox="+checkbox;

               

                  return true;

              }

               

              // send the info to server

              submitBtn.click(function(){

               

                       checkboxInfo();

              });

              • 4. Re: manipulate dynamic info
                shadowfax007 Level 1

                OK, I spoke to soon.  The effects are no problem - I was overcomplicatiog it on my head!

                Just added an "onClick" event to the checkbox and all is great!

                 

                Now all I need is to figure out how to get the dynamic info into the checkbot and do a little math to determine where the submit button goes (how far down the stage)!

                 

                James

                • 5. Re: manipulate dynamic info
                  resdesign Adobe Community Professional & MVP

                  Oops, I had not seen your code above. Let me check.

                  • 6. Re: manipulate dynamic info
                    resdesign Adobe Community Professional & MVP

                    Not sure, but it seems that  you need to put your data in the value. Could you try this and see what happens?

                    inputcheckbox = $('<input />').attr({'type':'checkbox', 'value':'data[i].school_name' , 'id':'checkbox'});

                    • 7. Re: manipulate dynamic info
                      shadowfax007 Level 1

                      Funny, I should have said the folllowing in my earlier post:

                      Here's YOUR(redesign!) code on the "main stage's CompositionReady" Action:

                       

                      I have gotten so much milage out of your email example from weeks ago it's incrediable!  I feel that I should pay royalties!

                       

                      [BAD JOKE]

                      As for the code I posted above:  I had set the opacity to "0" until the page was loaded three times - so it was hidden from you the first two times you tried to read my post - See, I'm learning Edge!!! :-)

                      [END BAD JOKE]

                      James

                      • 8. Re: manipulate dynamic info
                        shadowfax007 Level 1

                        Thanks redesign-

                         

                        Nothing - I tried the following and got a blank screen, so something broke (I also tried something similar earlier to no avail):

                         

                        inputcheckbox = $('<input />').attr({'type':'checkbox', 'value': 'data[i].school_name' , 'id':'checkbox'});

                        inputcheckbox = $('<input />').attr({'type':'checkbox', 'value': +  'data[i].school_name'  + , 'id':'checkbox'});

                        inputcheckbox = $('<input />').attr({'type':'checkbox', 'value': +  data[i].school_name  + , 'id':'checkbox'});

                         

                        Changing back, this still works:

                        inputcheckbox = $('<input />').attr({'type':'checkbox', 'value': '25' , 'id':'checkbox'});

                         

                        James

                        • 9. Re: manipulate dynamic info
                          shadowfax007 Level 1

                          Am I right to assume the following:

                           

                          The "stage" grabs the .JSON information first, then calls the symbol and populates the fields?

                           

                          If so, is it possible to create a variable with the school_id (actually it's event_id I need) and insert that into the value option of the checkbox?

                           

                          I've tried adding the following to the top of the symbol's CompositionReady action but got a blank page:

                           

                          var value_data = sym.$("event_id")

                          inputcheckbox = $('<input />').attr({'type':'checkbox', 'value': + value_data + , 'id':'checkbox'});

                           

                          James

                          • 10. Re: manipulate dynamic info
                            resdesign Adobe Community Professional & MVP

                            You basically need to retrieve the data you got from the jSon file and insert it in the value to replace the 25 your hardcoded. I will try tonight if I have time . Maybe someone else will help you before then.

                            • 11. Re: manipulate dynamic info
                              shadowfax007 Level 1

                              Thanks for the help!

                               

                              Looking at the full code, I get an error in the symbol compositionReady action when I try and put a variable ( + value_data  + in the input value):

                              Unexpected Token.

                               

                              I'm going to assume this means that whatever the solution, it doesn't involve adding a token to the symbol's checkbox HTML tag code...

                               

                              I'm trying to find a way to write it from the stage compositionReady but I don't see how that will populate each line returned from the JSON file like the symbol does...

                               

                              Onward and Upward :-)

                               

                              James

                              • 12. Re: manipulate dynamic info
                                resdesign Adobe Community Professional & MVP

                                That's what I am thinking.