lua.vm.js ajax callbacks firing but data not returned

Question

It's an issue I raised at https://github.com/kripken/lua.vm.js/issues/5 that I would like to submit to stackoverflow. I may get a faster answer here given the higher exposure. Just to make sure my question is clearly understood, I will restate it. How can I reach the callback data from the examples below?

The issue submitted:

(lua.vm.js is a) fantastic piece of software with a huge potential for replacing JavaScript in the browser!

A few snippets of code collected from the mailing list, wiki, issues, etc. Everything works out of the box with no perceived performance impact. I only have problems with callback return values on JQuery ajax calls and WebSocket returned message.

For example (see script_example.html below):

js.run('$.get("/glossary.json", function(data) { console.log(data); });') -- this works
jq.get("/glossary.json", function(data) print(data) end) -- the callback is firing, but data is not returned

A workaround using the load() function:

jq('#result').hide().load("/glossary.json", function() print(jq('#result').html()) end) -- this works because after the callback is fired, we just collect the result from the result div

The following goes into script_example.html (see lua.vm.js git repository):

<!-- begin script tag example -->

<script src="lua.vm.js"></script>
<script src="jquery-1.10.1.js"></script>

<!--
    Simplest web server for serving static files
    python -m SimpleHTTPServer 8080
-->

<script type="text/lua">
-- Print contents of `tbl`, with indentation.
-- `indent` sets the initial level of indentation.
function tprint (tbl, indent)
  if not indent then indent = 0 end
  for k, v in pairs(tbl) do
    formatting = string.rep("  ", indent) .. k .. ": "
    if type(v) == "table" then
      print(formatting)
      tprint(v, indent+1)
    else
      print(formatting .. tostring(v))
    end
  end
end

-- function test()
--   return 'ok'
-- end
-- for i=1,5 do
--   js.global.alert(test())
-- end

local jq = js.get("$")
-- jq('body').append("plop").click(function() js.global.alert("plop click") end)
-- local version = jq().jquery
-- js.global.alert(version)
-- jq('#result').load("/glossary.json")
jq('#result').hide().load("/glossary.json", function() print(jq('#result').html()) end)
-- jq.get("/glossary.json", function(data) print(data) end) -- callback is firing, but    data is not returned
-- js.run('$.get("/glossary.json", function(data) { console.log(data); });')

-- local ws = js.new.WebSocket("ws://echo.websocket.org/?encoding=text")
-- ws.onopen = function()
--   print("connected!")
--   ws.send("Rock it with HTML5 WebSocket")
-- end
-- ws.onclose = function()
--   print("disconnected")
-- end
-- ws.onerror = function(error)
--   print(error)
-- end
-- ws.onmessage = function(e)
--   tprint(e) -- using tprint() because an empty table is returned instead of the message
--   ws.close()
-- end
</script>

<!-- end script tag example -->

<div id="result"></div>

The glossary.json file loaded in the examples above:

{
  "glossary": {
    "title": "example glossary",
    "GlossDiv": {
        "title": "S",
        "GlossList": {
            "GlossEntry": {
                "ID": "SGML",
                "SortAs": "SGML",
                "GlossTerm": "Standard Generalized Markup Language",
                "Acronym": "SGML",
                "Abbrev": "ISO 8879:1986",
                "GlossDef": {
                    "para": "A meta-markup language, used to create markup languages such as DocBook.",
                    "GlossSeeAlso": ["GML", "XML"]
                },
                "GlossSee": "markup"
            }
        }
    }
  }
}

Answer 1

Sorry, I just realized I forgot to come back and report the solution.

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.get() implements the Promise interface, giving it all the properties, methods,...

For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method.

Based on this, the following code works and returns the callback data (responseText):

local jq = js.get("$")
local jqxhr = jq.get("/glossary.json")
jqxhr.done(function() print(jqxhr.responseText) end)

One could also bypass jQuery altogether with a direct XMLHTTPRequest wrapper function:

local xhr = function(method, url, callback)
  local xhr = js.new.XMLHttpRequest()
  xhr.onreadystatechange = function()
    if xhr.readyState == 4 and xhr.status == 200 then
      return callback(xhr.responseText)
    end
  end
  xhr.open(method, url)
  xhr.send()
end

xhr("GET", "/glossary.json", function(data) print(data) end)