2

I am using jQuery to dynamically create a div and then pass the id of that div as the container of a renderer3D. When I do:

r.container = id

I see an error in the JS console reading "Couldn't find the given container". I have checked and the div is in the DOM and visible. The weird thing is that this was working fine, but I made a minor change to the timing of when I am loading the XTK library.

Jonas G. Drange
  • 8,749
  • 2
  • 27
  • 38
user1578214
  • 161
  • 1
  • 4

3 Answers3

2

After commit https://github.com/xtk/X/commit/77d6c1e6e3062465acc297f782f410cf5a470211 it should all work! The problem was that the Google Closure Compiler uses the $ to optimize code and this breaks the use of jQuery.

See example here http://jsfiddle.net/YLVPr/

var element = $(document.body);
//container.show();
var id = 'xtkwidget_' + 1;//utils.uuid();
var xtkdiv = $('<div/>').attr('id',id);
xtkdiv.css('background-color','#FFF').width(400).height(300);
element.append(xtkdiv);
var obj_c54ce3e329b84364b5542aeb4c303ece = new X.renderer3D();
obj_c54ce3e329b84364b5542aeb4c303ece.container = document.getElementById(id); // NOTE here we have to pass the original div, not the id or the jQuery object
obj_c54ce3e329b84364b5542aeb4c303ece.init();

var obj_bd99e35ed147423faa2a2d77cbc540af = new X.mesh();
obj_bd99e35ed147423faa2a2d77cbc540af.magicmode = true;
obj_bd99e35ed147423faa2a2d77cbc540af.opacity = 0.700000;
obj_bd99e35ed147423faa2a2d77cbc540af.color = [1.000000,1.000000,1.000000];
obj_bd99e35ed147423faa2a2d77cbc540af.file = "http://x.babymri.org/?avf.vtk";
obj_c54ce3e329b84364b5542aeb4c303ece.add(obj_bd99e35ed147423faa2a2d77cbc540af);
obj_c54ce3e329b84364b5542aeb4c303ece.render();​
haehn
  • 967
  • 1
  • 6
  • 19
  • Importing xtk.js after jQuery is not a problem, but we literally have thousands of lines of JS code that uses the $ for accessing jQuery. Are you saying our codebase simply won't work with XTK? – user1578214 Nov 02 '12 at 01:40
  • I think I can fix this.. will let you know! – haehn Nov 03 '12 at 19:18
  • this should be fixed in http://get.goXTK.com/xtk_edge.js (see https://github.com/xtk/X/commit/77d6c1e6e3062465acc297f782f410cf5a470211 ) – haehn Nov 06 '12 at 19:48
  • Did it get re-broken? Seems to fail for me now. I'm using @user1578214's github code for iPython xtk integration. – Carl F. Feb 13 '13 at 13:05
1

The code is part of a pretty complex web app. The actual JavaScript code is dynamically generated by the server, sent to the browser over JSON and passed to eval. Here is an example of what the code looks like:

container.show();
var id = 'xtkwidget_' + utils.uuid();
var xtkdiv = $('<div/>').attr('id',id);
xtkdiv.css('background-color','#FFF').width(400).height(300);
element.append(xtkdiv);
var obj_c54ce3e329b84364b5542aeb4c303ece = new X.renderer3D();
obj_c54ce3e329b84364b5542aeb4c303ece.container = id;
obj_c54ce3e329b84364b5542aeb4c303ece.init();

var obj_bd99e35ed147423faa2a2d77cbc540af = new X.mesh();
obj_bd99e35ed147423faa2a2d77cbc540af.magicmode = true;
obj_bd99e35ed147423faa2a2d77cbc540af.opacity = 0.700000;
obj_bd99e35ed147423faa2a2d77cbc540af.color = [1.000000,1.000000,1.000000];
obj_bd99e35ed147423faa2a2d77cbc540af.file = "files/smallsurface.vtk";
obj_c54ce3e329b84364b5542aeb4c303ece.add(obj_bd99e35ed147423faa2a2d77cbc540af);
obj_c54ce3e329b84364b5542aeb4c303ece.render();
user1578214
  • 161
  • 1
  • 4
0

Can you give more lines of code around this one ?

First possible issue : how did you write your id ? If must be 'xtkcontainer' and not '#xtkcontainer' unlike in jQuery.

Another possible issue : your line of code is executed before the end of the window loading. Is your code written after the body, written in a 'window.onload' function or executed after window loading by a user or timeout event ?

Ricola3D

Ricola3D
  • 2,402
  • 17
  • 16