{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Animai°情兽 的问题《p5.js functions not working on ajax success》','https://www.manongdao.com/q-433835.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm attempting to integrate a p5.js into a webpage that draws upon receipt of a successful response. I want to draw a tree based on a user entering information that becomes a certain node. I'm using Django as my backend.
views.py
def index(request):
if request.method != 'POST':
return render(request, 'index.html')
else:
if request.is_ajax():
parent = request.POST.get('parent')
child = request.POST.get('child')
try:
# various cases are run through...
# case 7: neither child nor parent saved to tree --
# create leaf from child and twig from parent
twig = Twig.objects.create(text=parent)
leaf = Leaf.objects.create(text=child)
leaf.twigs.add(twig)
data = {"twig_text" : twig.text,
"twig_drawing" : twig.drawing,
"twig_base_x" : 0,
"twig_base_y" : 20,
"twig_tip_x" : 20,
"twig_tip_y" : 25,
"leaf_text" : leaf.text,
"leaf_drawing" : leaf.drawing,
"leaf_base_x" : 20,
"leaf_base_y" : 25,
"leaf_tip_x" : 40,
"leaf_tip_y" : 50,
}
twig.drawing = "filled"
leaf.drawaing = "filled"
return JsonResponse(data)
else:
return render(request, 'index.html')
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/p5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="message" style="visibility: hidden;"></div>
<form method="POST">
{% csrf_token %}
<input type="text" id="txt" />
<input type="submit" id="grow" value="grow" style="color: grey;"/>
</form>
<script>
$("form").submit(function(e) {
e.preventDefault();
// ...
$.ajax({
url : window.location.href,
type : "POST",
data : { csrfmiddlewaretoken : csrftoken,
child : child,
parent : parent,
},
success : function(json) {
if (json["leaf_text"]){
console.log(json['leaf_text'] + " was retrieved.");
function setup(){
}
function draw(){
ellipse(random(20), random(50), random(10), random(20));
}
}
},
error : function(xhr, errmsg, err) {
console.log(xhr.status + ": " + xhr.responseText);
},
});
});
</script>
</body>
</html>
My console test is successful. I can't figure out why the next few functions in 'success' aren't doing anything. I don't get any error messages in firebug. I'm new to p5, but I don't think that part of the code is the problem as I am this example: http://p5js.org/get-started/
Your root problem is that while the functions
setup()anddraw()are defined, they are never beeing called.A more fundamental issue is that you are defining a function inside an
ifstatement. While Javascript will allow this, it's pretty bad practice. What you'd normally do is definesetup()anddraw()at top or object levels, then call them when you need them.