7 Replies Latest reply on Sep 29, 2014 8:10 PM by dharmk

    Save AJAX Load() Results As A Variable

    trumpetstyles

      Hi,

       

      I am building a fundraising progress bar in Adobe Edge which has gone mostly smoothly.  When I enter a number for the variable I have called "total" ( var total = 45; ) and run the project in a browser, it works exactly as I want it to and I have uploaded the project to the server where it will be used.  However, I am not much of a programmer and I am having a hard time getting the data I need to load the current percentage raised toward the fundraising goal into the project.  The data I need is on a page on the website that the animation will be embedded on.  The only content on that webpage is the number I need.  Using jQuery, I haven't been able to load that number into the variable that's necessary for stopping the counter and animation for the progress bar.  At first, I tried to pull the data from a single div based on the ID of the div, but I eventually gave up on that much granularity and just stripped the site template for that page until only the number was left.

       

      When I use this code:

      var total;
        $.get('http://www.mySite.org/restoftheurl?tmpl=minimal', function(data) {
        total = data;
        });
      

       

      The counter counts to 100, which is the max I have set and the animation doesn't play.  I don't know what causes the counter to go but clearly, that doesn't work.

       

      If I use this code:

      var total = $.load("http://www.mySite.org/restoftheurl?tmpl=minimal");
      
      

       

      Neither the counter nor the animation do anything, so that doesn't work either.

       

      I have scoured the internet for days reading post after post where someone has had great luck with this bit of code or that bit of code.  I have tried at least 4 dozen different ways to make this happen and nothing is doing it.  I'm sure I am overlooking something stupid, but if anyone has a solution, I would be very appreciative!  Here is the rest of my action code (it is all in compositionReady tied to the Stage layer).

       

      var counter_delay = 20;
      var max_count = 100;
      var present_count = 0;
      var total = arghghghghghghghghg!;
      
      var timer = window.setInterval(stepUp,counter_delay);
      function stepUp(){
      present_count++;
      sym.$("number").html(present_count);
      if(present_count==total)
      clearInterval(timer);
      if(present_count>=max_count){
        sym.$("Text").html(100);
        clearInterval(timer);
      }}
      
      var animation_ms = total*20;
      
      sym.play(0);
      setTimeout(function () {sym.stop()}, animation_ms);
      
      
      

       

      Hopefully, someone smarter than I am has an idea what I am missing.  Thanks!

        • 1. Re: Save AJAX Load() Results As A Variable
          dharmk Adobe Employee

          The data that you will get in the success callback in $.get is the entire JSON. For eg, if your JSON object is as follows:

           

          {"myArray":[

              {"attr1":"val11", "attr2":"val21"},

              {"attr1":"val21", "attr2":"val22"},

              {"attr1":"val31", "attr2":"val32"},

          ]}

           

          Then data will refer to the entire object. In this case, total = data.myArray.length; You will have to change your code according to your data format.

           

          Looking at the description which you have given above, it seems your data only contains the count. You can have this information represented as a JSON object as { count: actualValue } (for eg: {count: 45}). Then in your success handler you can initialize total as follows:

           

          total = data.count;

           

          -Dharmendra

          1 person found this helpful
          • 2. Re: Re: Save AJAX Load() Results As A Variable
            trumpetstyles Level 1

            Hi Dharmendra,

             

            Thank you for your quick and thorough reply.  I'm a lot more designer than I am coder and while I am working to learn coding, the process is still ongoing!  I'm sorry if some of my questions are dumb.  From your response, it sounds like I will have to find a way to successfully return just the div with the right id.  I've been trying to work out some of the specifics in your response; I tried using "total = data.count;" but changed to the HTML data format that the target page is in:

             

            $.get("http://www.mySite.org/restoftheurl?tmpl=minimal", function(data) {
            total = $("#thebar").text();
            });
            

             

            That and every variation of it I could think of or find online just returns an undefined alert.  I've used the longhand AJAX code and gotten the same alert.

             

            I just realized that I am trying to pull data that only exists once a web page is rendered and not as a static file.  Am I trying to do something that is impossible?  If so, how could I go about converting the rendered page (which is the only way to get the number I need) into a format I can access from Edge Animate?

             

            Thanks, again!

            • 3. Re: Save AJAX Load() Results As A Variable
              dharmk Adobe Employee

              Hi trumpetstyles,

               

              Is it possible for you to share your sample (or any simple version of it), with little more specific details? It will be helpful for me to understand the scenario completely. I should be able to suggest some solution after that.

              From what I can make out from above is you are not trying to fetch any JSON, but rather an HTML page and there is a piece of information on the result HTML, which drives the rest of your logic. However, I will need the URL (or the content of the URL), which you are trying to load and also some idea of what needs to be done, after we have the required information.

               

              Regards,

              Dharmendra

              • 4. Re: Re: Save AJAX Load() Results As A Variable
                trumpetstyles Level 1

                Hi Dharmendra,

                 

                Thanks for getting back to me.  I'm sorry for the delay in my reply, I was out over the weekend.  I can certainly share specifics.  I'm never sure whether to make a question specific to my unique need or generic to be useful to more users.  I am trying to scrape the number from this page: http://wcicfm.org/vis14-progress-edge?tmpl=minimal and set it as the "total" variable in my script.  The rest of the script uses that variable twice, once to stop the counter and again to calculate the millisecond for stopping the bar animation, both on this page: Progress Animation.  If I enter a number for the value of the "total" variable, everything works great, but I haven't been able to work out a script that sets the number on the first page above as the "total" variable value.  please let me know if there is any more information that would be helpful for you.

                 

                Thank you again for taking a look,

                Steve

                • 5. Re: Re: Save AJAX Load() Results As A Variable
                  dharmk Adobe Employee

                  Hi Steve,

                   

                  Its a good idea to keep the topics generic in nature, however sometimes we need to get the specific details to be able to understand the problem completely and work towards a solution. There are two basic problems in the code:

                   

                  1. $.get will return you data asynchronously. Thus any other operation which depends on it, should be called only after receiving the data. (In the success handler)

                  2. The URL you are trying to fetch, returns HTML. You will need to find the specific node which contains the required information and parse the result. (If you can somehow have a URL which returns a JSON, that will make your code easier and maintainable)

                   

                  Please note that the animation would be delayed till the first URL is loaded which populates the value of total. Given the current format, you can try the following:

                   

                  $.get("http://wcicfm.org/vis14-progress-edge?tmpl=minimal",

                    function (data) {

                    total = parseInt($(data).find("#thebar").html());  //As per the current structure

                    init();  //Call the handler only after total is initialized.

                    }

                  );

                   

                  function init() {

                  // Code which depends on total

                  //....

                  }

                   

                  I'm copying the entire snippet also for your reference, which is based on your above example.

                   

                  var counter_delay = 20;

                  var max_count = 100;

                  var present_count = 0;

                  var total;

                  $.get("http://wcicfm.org/vis14-progress-edge?tmpl=minimal",

                    function (data) {

                    total = parseInt($(data).find("#thebar").html());

                    init();

                    }

                  );

                   

                  function init() {

                    var timer = window.setInterval(stepUp, counter_delay);

                    function stepUp() {

                    present_count++;

                    // Change the text of an element

                    sym.$("number").html(present_count);

                    if (present_count == total)

                    clearInterval(timer);

                    if (present_count >= max_count) {

                    sym.$("Text").html(100);

                    clearInterval(timer);

                    }

                    }

                    var animation_ms = total * 20;

                   

                    sym.play(0);

                    setTimeout(function () {

                    sym.stop()

                    }, animation_ms);

                  }

                   

                  Regards,

                  Dharmendra

                  • 6. Re: Save AJAX Load() Results As A Variable
                    trumpetstyles Level 1

                    Hi Dharmendra,


                    That's exactly what I needed to make it work.  Thank you very much!  Trying to wrap my head around so much new stuff at once while remaining productive can be a challenge.  It makes sense now that I would have to make sure that the value is calculated before I try to use it.  I appreciate your help!


                    We are hoping to move to pulling this data via JSON or XML once our tracking software developers make it available in that format, but there's not been much progress from their end.


                    Thanks,

                    Steve

                    • 7. Re: Save AJAX Load() Results As A Variable
                      dharmk Adobe Employee

                      I understand that Glad to know it worked for you.

                       

                      -Dharmendra