In [ ]:
import requests
from jinja2 import Template
from IPython.display import Javascript, HTML
from settings import FLICKR_KEY
In [ ]:
%%javascript
console.log("hello");
In [ ]:
%%javascript
// access of jquery
console.log($('body'));
In [ ]:
# jquery ajax, getJSON, especially with promises
# https://www.flickr.com/services/api/explore/flickr.photos.search
flickr_url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={key}&tags={tag}&format=json&nojsoncallback=1"
url = flickr_url.format(key=FLICKR_KEY, tag='tiger')
In [ ]:
# in Python, can retrieve Flickr output
r = requests.get(url)
r.json()
In [ ]:
JS = """
<script>
$.getJSON('{{url}}', function (data) {
console.log(data.photos.photo.length);
console.log(element);
})
</script>
"""
template = Template(JS)
HTML(template.render(url=url))
In [ ]:
import uuid
div_id = str(uuid.uuid4())
div_id
In [ ]:
# unfinished idea...easier to know that in JS, we have element to work with
import uuid
def _HTML (html, css='', js='', div_id=None, template_vars=None):
if div_id is None:
div_id = "i-"+str(uuid.uuid4())
if template_vars is None:
template_vars = {}
html = "<div id={}>{}</div>".format(div_id, html)
# wrap css to apply to this div
if css:
css = """
<style>
#{div_id} * {{
{css}
}}
</style>""".format(div_id=div_id, css=css)
# wrap js in <script>
if js:
js = """
<script>
var element = $('#{div_id}');
{js}
</script>""".format(div_id=div_id, js=js)
net_html = html + css + js
template = Template(net_html)
return HTML(template.render(template_vars))
In [ ]:
js = """
console.log(element);
"""
_HTML("<b>hi</b>", css='color:red', js=js)
In [ ]:
# deferred.done()
In [ ]:
%%javascript
//http://stackoverflow.com/a/28713427
element.html('<b>Hi</b>')
console.log(element)
Hypothesis --> full implementation of promises coming in jQuery 3.0
In [ ]:
%%javascript
// version of jQuery
element.text($.fn.jquery)
In [ ]:
%%javascript
{
// incorrect attempt to compute element independently...
// just use element: http://stackoverflow.com/a/20020566/
var _e = IPython.notebook.get_selected_cell().output_area.element;
var _element = _e.find(".rendered_html");
element.text("hello");
console.log(element);
console.log(element.text());
}
https://www.flickr.com/services/api/explore/flickr.photos.search
In [ ]:
from IPython.display import Javascript
import requests
from jinja2 import Template
flickr_url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={key}&tags={tag}&format=json&nojsoncallback=1"
url = flickr_url.format(key=FLICKR_KEY, tag='tiger')
In [ ]:
js_template = Template("""
$.getJSON('{{url}}', function (data) {
element.text(data.photos.photo.length);
})
""")
Javascript(js_template.render(url=url))
In [ ]:
# use done
js_template = Template("""
var p = $.getJSON('{{url}}');
p.done(function(data){
element.text(data.photos.photo.length);
})
""")
Javascript(js_template.render(url=url))
In [ ]:
# use then
# https://api.jquery.com/deferred.then/
js_template = Template("""
var p = $.getJSON('{{url}}');
var done = function(data){
element.text(data.photos.photo.length);
};
var fail = function (jqXHR, status, error) {};
p.then(done, fail);
""")
Javascript(js_template.render(url=url))
ideas behind promises and deferred.
Wikipedia article: Futures and promises - Wikipedia, the free encyclopedia:
Specifically, when usage is distinguished, a future is a read-only placeholder view of a variable, while a promise is a writable, single assignment container which sets the value of the future." Notably, a future may be defined without specifying which specific promise will set its value, and different possible promises may set the value of a given future, though this can be done only once for a given future. In other cases a future and a promise are created together and associated with each other: the future is the value, the promise is the function that sets the value – essentially the return value (future) of an asynchronous function (promise). Setting the value of a future is also called resolving, fulfilling, or binding it.
Gold standard in the JavaScript world: Promises/A+
what I've understood, explained well in cosdev --> moving from callback/continuation style programmging to done and fail.
Things to figure out:
In [ ]:
%%javascript
var d = $.Deferred();
var p = d.promise();
p.then (function (value) {console.log("p: " + value)});
rdhyee.d = d;
In [ ]:
%%javascript
// thinking that you would pass a value
rdhyee.d.resolve(10);
In [ ]:
%%javascript
// kinda ugly -- must be a better way
// how to express
// b = a +1
// c = 2*b
var a = $.Deferred();
a.then(function(value){console.log('a: '+value)})
var b = $.Deferred();
b.then(function(value){console.log('b: '+value)})
var c = $.Deferred();
c.then(function(value){console.log('c: '+value)})
// b = a + 1
var a0 = a.promise();
a0.then( function(value) {b.resolve(value + 1)})
// c = 2*b
var b0 = b.promise();
b0.then(function(value) {c.resolve(2*value)})
a.resolve(2);
In [ ]:
%%javascript
// better way?
// https://api.jquery.com/deferred.then/
var a = $.Deferred();
a.then(function(value){console.log('a: '+value)})
// Deferred.then returns a Promise
var b = a.then(function(value){return value + 1});
var c = b.then(function(value){return 2*value});
b.done(function(value) {console.log('b: '+ value)});
c.done(function(value) {console.log('c: '+ value)});
a.resolve(2);
In [ ]:
%%javascript
// bug
// x, y are Deferred
// c = x + y
var x = $.Deferred();
var y = $.Deferred();
var c = $.when(x,y).then(function(x,y) {
console.log('c.done x:' + x);
console.log('c.done y:' + y);
return (x+y);
})
var d = c.then(function(value){return value})
d.done(function(value){console.log(value)})
y.resolve(2);
x.resolve(27);
Possible Next steps:
Learn about Python analogs:
In [ ]: