How can i wait until the ajax request finishes when returning data to a meteor helpers method.

For example,

Template.item.helpers({

        itemName:function () {
            var user = Meteor.user();

            $.when(reallyLongAjaxRequest()).done(function (a1) {
               //tried using jquery when
                return "Item Name should have this because it waited";
            });

            return " Doesnt wait at all";
        }
    });

I have a reallyLongAjaxRequest() running and i would like it to finish before continuing on with my itemName helper. The log statement to console always shows undefined but that's because the ajax request hasn't finished. I tried using the jquery when with no luck. Any ideas

Edit:

I should mention that i am inside the helper function for a reason. I need the item 'id' being rendered so that i can run the ajax request with that paramater. Using reactive sessions would be perfect but i don't know of a way to get currently rendering items outside of the helpers method definition?

How can i wait until the ajax request finishes when returning data to a meteor helpers method.

For example,

Template.item.helpers({

        itemName:function () {
            var user = Meteor.user();

            $.when(reallyLongAjaxRequest()).done(function (a1) {
               //tried using jquery when
                return "Item Name should have this because it waited";
            });

            return " Doesnt wait at all";
        }
    });

I have a reallyLongAjaxRequest() running and i would like it to finish before continuing on with my itemName helper. The log statement to console always shows undefined but that's because the ajax request hasn't finished. I tried using the jquery when with no luck. Any ideas

Edit:

I should mention that i am inside the helper function for a reason. I need the item 'id' being rendered so that i can run the ajax request with that paramater. Using reactive sessions would be perfect but i don't know of a way to get currently rendering items outside of the helpers method definition?

• javascript
• ajax
• meteor

• You must divide your function. One part before the request and another after. On XMLHttpObject you can handle the events – Tomáš Zato Commented Apr 17, 2013 at 23:02
• not sure i follow you. Is this in conjunction with using the $.when method? – Warz Commented Apr 17, 2013 at 23:03
• I don't know Meteor Api, so I'm proposing workaround with bare XMLHTTP request. I may be very wrong. – Tomáš Zato Commented Apr 17, 2013 at 23:04

3 Answers 3

An unnamed collection is one where null is passed for the name. It is an in-memory data structure, not saved to the database. (http://docs.meteor./#meteor_collection)

OK, given a Meteor collection called "items" and wanting to do an ajax request for each item based on the item _id, and then being able to reference the ajax result in a template, this is what I'd do:

(roughly)

var Items = new Meteor.Collection('items');
var Results = new Meteor.Collection(null);

Items.find().observeChanges({
  added: function (id) {
    $.get(url, {id: id}, function (data) {
      if (Results.findOne(id))
        Results.update(id, {$set: {result: data}});
      else
        Results.insert({_id: id, result: data});
    });
  }
});

Template.item.itemName = function (id) {
  var doc = Results.findOne(id);
  if (doc)
    return doc.result;
  else
    return "";
};

inside your html you'll need to pass in the id to the helper:

{{itemName _id}}

Is there no way to just timeout for a few seconds when defining the helper so that my ajax request finishes without immediately returning.

No, with reactive programming things happen immediately, but you update when you have new stuff.

Make your ajax request separately, and when it pletes, have it store the result in a Session variable. Then have your template helper return the value of the Session variable. Roughly...

$.get(url, function (data) {
  Session.set('result', data);
});

Template.item.itemName = function () {
  return Session.get('result');
};

Session is a reactive data source, so your template will automatically updated when the result of the ajax call es in. (Naturally you can choose to call the Session variable anything you like, I just used "result" as an example).

This works and tested in MeteorJS > 1.3.x

Add the http package from the console meteor add http

Example POST call with data elements being sent to server and with custom headers.

HTTP.call('POST', tokenUri, {
    data: {
        "type": 'authorization_code',
        //"client_id": clientId,
        "code": code,
        "redirect_uri" : redirectUri,

    },
    headers: {
        "Access-Control-Allow-Origin" : "*",
        "Access-Control-Allow-Credentials" : "true",
        "Access-Control-Allow-Methods" : "GET,HEAD,OPTIONS,POST,PUT",
        "Access-Control-Allow-Headers" : "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers",
    }
},function(error, response) {
    if ( error ) {
        console.log( error );
    } else {
        console.log( response );
    }
});