How do I load dynamic content (ajax) for a surface in famo.us?

Question

My problem is the following:

I have many surfaces associated with one unique url. When I move to a particular surface the url has to be fired on realtime (ajax) and the response should be set as the content of the surface.

When I try to do the the above, it actually loads all url and its contents upfront while the app is initialising. This slows down the whole process and is not what I want. I want to load content only when the user is active on that surface.

var ajaxContent = "";
$.ajax({
  url: 'ajax/article.php?url='+escape(this.options.url),
  async: false,
  success: function(data) {
    ajaxContent = data;
  }
});

this.pageSurface = new Surface({
    size: [undefined, undefined],
    content: ajaxContent,
    classes: ["page"],
    properties: {
        backgroundColor: '#111111',
        fontSize: '16px'
    }
});

The above code is in a loop of surfaces.

Answer 1

I have no experience with Ajax, but as far as I can tell based on your description it is basically you're requesting data asynchronously... so I'll answer based on that assumption.

First of all, I would switch the order of operation a little bit around!

for (var i = 0; i < 10; i++) {
    var surface = new Surface({
        content : '',
        classes : ['page'],
        properties : {
            backgroundColor : '#111111',
            fontSize : '16px'
        }
    });

    var ajax_request = {
        url : 'ajax/article.php?url=' + escape(this.options.url),
        async : true,
        success : function(data) {
            //possibly validate the obtained data further
            this.setContent(data);
        }.bind(surface)
    }

    var load = function load() {
        this.removeListener('mouseover', load);
        $.ajax(ajax_request);
    }.bind(surface);

    surface.on('mouseover', load);
}

I bound the surface to all functions that are specific to that surface, as weird things might happen within a loop otherwise. This will ensure that only that one surface loads content and that the content is only assigned to that same surface!

Finally, you should pay attention to your single and double quotes, as you are using them both. Famo.us (the company) prefers single quotes, but if you use double quotes that's just fine. It is just a better practise to at least stick to either one of the two.