Returning response from an asynchronous call

[20160530]

I've been messing about with TinyMCE which is a text editor you can use on web forms.

 

I've created a plugin which uses image from EmojiOne which allows me to insert SVG emojis into the text. It works okay so far.

 

This is a test - click an icon at the bottom to insert an emoji: https://oracle101.co.uk/test-mce.php

 

The emojis that are loaded under each icon are defined in a 2 dimensional javascript array - e.g. in the "var = d" bit here:

 

https://oracle101.co.uk/assets/includes/tinymce/plugins/emoticons_faces/plugin.min.js

 

I want to use AJAX to get that data from an an external page, which spits the data out in the right format - e.g.

 

view-source:https://oracle101.co.uk/emoji.php?cat=emoticons_travel_places

 

[["05_001","05_002","05_003","05_004","05_005"],

["05_006","05_007","05_008","05_009","05_010"],

["05_011","05_012","05_013","05_014","05_015"],

["05_016","05_017","05_018","05_019","05_020"]]

 

The problem I have hit up against is that when making an ajax call in JS it's not possible to assign the response from the call to a variable, at least, I can't work out how to do it.

 

I've read quite a bit about it on Stack Overflow - e.g.

 

http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call

 

I did get a solution via:

function getURL(url){
return $.ajax({
type: "GET",
url: url,
cache: false,
async: false
}).responseText;
}

var data = getURL("emoji.php?cat=emoticons_travel_places");
alert(data);

But found out that using async: false is deprecated and should not be used.

So I'm trying to work out how to do it the "proper" way, if one exists...

I can't rewrite the plugin code to sit inside the XHR.send either because then the plugin isn't recognised when TinyMCE loads - e.g.

// Sends a low level Ajax request

tinymce.util.XHR.send({

url: 'emoji.php?cat=emoticons_travel_places',

var foo = text;

tinymce.PluginManager.add("emoticons_travel_places", function(a, {

function c() {

var a;

return a = '<table role="list" class="mce-grid">', tinymce.each(d, function© {

a += "<tr>", tinymce.each(c, function© {

var d = b + "/img/" + c + ".svg";

a += '<td><a href="#" data-mce-url="' + d + '" data-mce-alt="' + c + '" tabindex="-1" role="option" aria-label="' + c + '"><img src="' + d + '" style="width:30px; height:30px" role="presentation" /></a></td>'

}), a += "</tr>"

}), a += "</table>"

}

var d = ...get from XHR.send;

a.addButton("emoticons_travel_places", {

type: "panelbutton",

panel: {

role: "application",

autohide: !0,

html: c,

onclick: function( {

var c = a.dom.getParent(b.target, "a");

c && (a.insertContent('<img src="' + c.getAttribute("data-mce-url") + '" width="30" height="30" title="' + c.getAttribute("data-mce-alt") + '" />'), this.hide())

}

},

tooltip: "Emoticons - Travel & Places"

})

});

}

});

The Stack Overflow thread talks about using "promises" and "callbacks" but I'm just about hitting the limit of my skills here and have tried asking elsewhere so I thought I'd ask here too!

Any advice much appreciated.

Thanks

[davej]

Seems to me that you need to simplify this question.

 

See...

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax

 

Are you saying that "result" isn't a variable?

 

http://www.w3schools.com/jquery/ajax_ajax.asp