Open psychemedia opened 4 years ago
I got it working with some effort. I think you need to use require to load ace
ace_test = jp_proxy_widget.JSProxyWidget()
def load_test():
ace_test.js_init("""
element.requirejs.config({
paths: {
d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
ace: '//cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace'
}
});
element.requirejs(["ace"], function() { // no argument to load function!
element.html("ace is loaded: " + ace)
var e = $('<div id="editor"></div>').appendTo(element);
e.width("500px");
e.height("300px");
var editor = ace.edit(e[0]);
});
""")
# You need to wrap the function in "uses_require" to make sure
# require is loaded properly
ace_test.uses_require(load_test)
ace_test
Ah, thanks...
I started exploring in another context and think I was getting a race condition too?
On Wed, 26 Feb 2020 at 14:36, Aaron Watters notifications@github.com wrote:
I got it working with some effort. I think you need to use require to load ace
ace_test = jp_proxy_widget.JSProxyWidget() def load_test(): ace_test.js_init(""" element.requirejs.config({ paths: { d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min', ace: '//cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace' } }); element.requirejs(["ace"], function() { // no argument to load function! element.html("ace is loaded: " + ace) var e = $('
').appendTo(element); e.width("500px"); e.height("300px"); var editor = ace.edit(e[0]); }); """)# You need to wrap the function in "uses_require" to make sure# require is loaded properly ace_test.uses_require(load_test) ace_test[image: image] https://user-images.githubusercontent.com/13857252/75354695-69f35d80-587b-11ea-9164-3310848a9163.png
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AaronWatters/jp_proxy_widget/issues/6?email_source=notifications&email_token=AAAUILG4ETKTTJQVTN26EE3REZ47ZA5CNFSM4K3S44F2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENAO3TY#issuecomment-591457743, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAUILAYHTRT2DAJ3LEADQLREZ47ZANCNFSM4K3S44FQ .
Actually, I got sporadic failures with the method given above.
This seems to work consistently in my tests:
ace_test = jp_proxy_widget.JSProxyWidget()
def load_test():
ace_test.js_init("""
// load ace from a CDN using require.js
element.requirejs.config({
paths: {
//d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
ace: '//pagecdn.io/lib/ace/1.4.8'
}
});
// Use require.js to attach ace to the window object.
element.requirejs(["ace/ace"], function(ace) { // no argument to load function!
element.html("ace is loaded: " + ace)
var e = $('<div id="editor"></div>').appendTo(element);
e.width("500px");
e.height("300px");
var editor = ace.edit(e[0]);
});
""")
# wrap the load operation in 'uses_require' to initialize require.js.
ace_test.uses_require(load_test)
ace_test
Thanks... one thing I notice if I run this is that I get the Uninitialized Proxy Widget
warning as if things were loaded twice?
I'm seem to be going round in circles on this one.
What's the trick for loading something like the ace editor?
If I try the following I get a
new error message: TypeError: define is not a function
error, which suggests I should be loading things in using require?If instead replace the script load with a require load, eg
test0.require_js("ace/ace", "ace-src-min/ace.js")
, then I get anew error message: ReferenceError: ace is not defined
error?It's probably something obvious but I don't see it?