Returning function content after AJAX call

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".

Possible duplicate: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — Andrey, Jun 03 '15 at 11:26
@Andrey Hi, none of the solutions provided in your link worked for me. I've checked it before. — user3343366, Jun 03 '15 at 11:27
Put `return template` _inside_ the callback function... Why outside? Or just `return Mustache.render(....` — Jeremy Thille, Jun 03 '15 at 11:40

score 1 · Accepted Answer · answered Jun 03 '15 at 11:47

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.

score 0 · Answer 2 · answered Jun 03 '15 at 11:44

0

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);
});

answered Jun 03 '15 at 11:44

Jeremy Thille

26,047
12
43
63

Thanks Jeremy! while it SHOULD work it didn't... looks like this plugin is pretty limited. Anyway thank you, now I know how it should be done in other cases! :) – user3343366 Jun 03 '15 at 11:51
1

The reason it won't fork for this particular case - the caller of the content function waits for synchronous return and will get undefined instead of real content. – Andrey Jun 03 '15 at 11:52

Returning function content after AJAX call

2 Answers2