Spry datasets before loading and when reloading

Posted on 2008-11-19
Last Modified: 2013-11-11

I have multiple spry datasets on a page. Is there any way I could get the spry framework to wait until all the data sets were ready and then do something (in this case it would be remove the display:none attribute from a div).

Also, is it possible to have the spry framework check if a certain element exists in the xml data set and do something if it doesn't everytime the data is reloaded (I have it set to reload every 10 seconds).

I have looked through the documentation but can't find anything covering these two areas so if anyone can point me in the right direction or pop me some sample code I'd be greatful.

Thanks a lot,

Question by:intechfs
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Hi intechfs,

    What you can do is add a loading state region to the spry regions:

    <div spry:state="loading" align="center">Please is loading now</div>

    Place the above code inside of the Spry region container.  The state:"loading" parameter tells Spry to display the contents of this div while the data is being generated.

    Author Comment

    Yes but that only works on a per data set basis. I want a global option that would be on the entire page and would be displayed whilst all the data sets loaded and when they had all loaded then the page content is shown.
    LVL 70

    Expert Comment

    by:Jason C. Levine
    I don't think that's possible.

    Accepted Solution

    I worked out a way of doing it.

    For anyone else interested you need to add observers to the data sets like this:
    var dsf = new Spry.Data.XMLDataSet( "../../test_data/favs.xml", "favs/fav", { useCache: false } );
    dsf.setColumnType("@id", "number");
    dsf.addObserver ( testDSF );

    Then I wrote some custom functions for each observer which set a flag to 1 when the set is loaded and then runs another function which tests to see if all the flags for all sets are at 1 and if they are it shows the page.

    Like this:
    function testDSF (notificationType, dataSet, data) {

          //check to see if the data has just been loaded
          if ( notificationType == "onPostLoad" ) {

                //if this is the first time this data set has been loaded
                if ( dsfLoad == 0 ) {
                      dsfLoad = 1;

          //if spry is reporting a data load error
          } else if (notificationType == "onLoadError") {
                window.location = "../../error?r=df";

    //little function to test if all data sets have been loaded for the first time, and if they have then we can display the page and remove the loading animation
    function allLoad () {

          //if all the data sets are loaded then we can do stuff!
          if ( ( dsvLoad == 1 ) && ( dsfLoad == 1 ) ) {
                document.getElementById('doneLoad').style.display = '';
                document.getElementById('preLoad').style.display = 'none';

    LVL 70

    Expert Comment

    by:Jason C. Levine
    Right, but you needed a custom function to handle it.  Spry alone does not support it...

    Great work, though!

    Author Comment

    Yes true.. there are quite a lot of things Spry can do, but there quite poorly documented.

    Adding observers for example, which only has very limited explanation.
    LVL 70

    Expert Comment

    by:Jason C. Levine
    >> but there quite poorly documented.

    One gets the feeling that the whole Spry project was started late and rushed to the table before it was really complete.  1.4 was awful and buggy and there was zero documentation.  1.6.1 is better, but the documentation is largely in the form of the examples at the Adobe labs.  

    You should send the above to them...

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Suggested Solutions

    Title # Comments Views Activity
    CFFILE upload help 98 86
    .dwt files not viewable in browser - why? 2 30
    Create a triangle 9 32
    GPS save in database 19 20
    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now