调用AJAX后返回函数内容

Question

I'm using webuiPopover plugin, to set popover content, i'm using a function

$('.blob a').webuiPopover({
    template: template,
    trigger: 'hover',
    type: 'async',
    url: '/ajax/getprofileinfo.php?user=433',
    content:  function(requestData) {
          //executed after successful ajax request. 
         //How I can make another ajax call and then return everything to content?

    }
});

Now... I can do any kind of things inside this callback. But what if I want to make another AJAX request inside this function (in this case i want to download Mustache template so i can render it with requestData and THEN return its output from the function

I tried something like this

 content:  function(requestData) {

     var template = '';
     $.get('/tpl/usertemplate.mustache').done(function(templateData) {

         template = Mustache.render(templateData, requestData);
     });

   return template;
}

Without any luck. How to do it correctly? I know i could just set async to false, but it isn't "the right way".

Answer 1

Looking at this plugin API, I can't see the way to do what you want. There is async.before and async.after properties. You can try to use them, also you can try to call setContent mannually after second request is done, like

content:  function(requestData) {
    vat that = this;
    $.get(url).done(function (data){
        that.setContent(Mustache.render(templateData, data));
    });
}

But i'm not sure if it will work.

Answer 2

Newbie mistake :) Javascript is asynchronous !

What's wrong with your code :

$.get('/tpl/usertemplate.mustache').done(function(templateData) { // This is done FIRST
     template = Mustache.render(templateData, requestData); // This is done whenever the GET is finished, so... THIRD
});
return template; // This is done SECOND - At this point, template is empty.

What you should do :

$.get('/tpl/usertemplate.mustache').done(function(templateData) {
     template = Mustache.render(templateData, requestData);
     return template;
});

Or even simpler :

$.get('/tpl/usertemplate.mustache').done(function(templateData) {
     return Mustache.render(templateData, requestData);
});