uninitialized constant Object::Element in Opal RB

Question 1

Trying my hand at Opal/JQuery. My app.rb file looks like this:

require 'opal'
require 'opal-jquery'
class HTMLObject
 def initialize
 end
 def write_to_body
 end
end
class HTMLParagraph < HTMLObject
 attr_accessor :inner_html
 def initialize(text)
 @inner_html= text
 end
 def write_to_body
 @body = Element.find("#body")
 @body.append(Element("<p>#{@inner_html}"))
 end
end
p = HTMLParagraph.new("hello world")
p.write_to_body

I compile it using the example from the site to app.js. I run it in my web browser with index.html:

<!DOCTYPE html>
<html>
<head>
 <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
 <script src="opal.js" type="text/javascript"></script>
 <script src="opal-jquery.min.js" type="text/javascript"></script>
 <script src="opal-parser.js" type="text/javascript"></script>
 <script src="app.js" type="text/javascript"></script>
 <title></title>
</head>
<body>
</body>
</html>

When I open the page I do not see anything. The console reveals this error trace:

Uncaught NameError: uninitialized constant Object::Element opal.js:1531
def.$backtrace.backtrace opal.js:1531
def.$raise opal.js:1279
def.$const_missing opal.js:575
Opal.cm opal.js:255
def.$write_to_body app.js:44
(anonymous function) app.js:51
(anonymous function)

The JS output file reads thus:

 function(__opal) {
 var p = nil, _a, _b, self = __opal.top, __scope = __opal, nil = __opal.nil, $mm = __opal.mm, __breaker = __opal.breaker, __slice = __opal.slice, __klass = __opal.klass;
 (function(__base, __super){
 function HTMLObject() {};
 HTMLObject = __klass(__base, __super, "HTMLObject", HTMLObject);
 var def = HTMLObject.prototype, __scope = HTMLObject._scope;
 def.$initialize = function() {
 return nil;
 };
 def.$write_to_body = function() {
 return nil;
 };
 return nil;
 })(self, null);
 (function(__base, __super){
 function HTMLParagraph() {};
 HTMLParagraph = __klass(__base, __super, "HTMLParagraph", HTMLParagraph);
 var def = HTMLParagraph.prototype, __scope = HTMLParagraph._scope;
 def.inner_html = def.body = nil;
 def.$inner_html = function() {
 return this.inner_html
 }, 
 def['$inner_html='] = function(val) {
 return this.inner_html = val
 }, nil;
 def.$initialize = function(text) {
 return this.inner_html = text;
 };
 def.$write_to_body = function() {
 var _a, _b, _c;
 this.body = ((_a = ((_b = __scope.Element) == null ? __opal.cm("Element") : _b)).$find || $mm('find')).call(_a, "#body");
 return ((_b = this.body).$append || $mm('append')).call(_b, ((_c = this).$Element || $mm('Element')).call(_c, "<p>" + (this.inner_html)));
 };
 return nil;
 })(self, ((_a = __scope.HTMLObject) == null ? __opal.cm("HTMLObject") : _a));
 p = ((_a = ((_b = __scope.HTMLParagraph) == null ? __opal.cm("HTMLParagraph") : _b)).$new || $mm('new')).call(_a, "hello world");
 return ((_b = p).$write_to_body || $mm('write_to_body')).call(_b);
})(Opal);

Any ideas?

Question 2

Try putting opal and opal-jquery directly inside your html, and leaving the requires out of app.rb, you can grab them from http://cdnjs.com.

Otherwise I'd like to see the compiled app.js (you can put it in a gist).

Question 3

when I search opal-jquery on cdnjs.com it returns no results. When I search opal it returns opal.js and opal-parser.js

Question 4

Would you upload opal-jquery.js to the CDN?

Question 5

Sure, I'll do a PR, note that it will take some time to be merged, I'll add a link with the source as soon as it's ready

Question 6

And here's the raw contents (please do not hotlink): raw.github.com/opal/cdnjs/…

Question 7

I removed the requires from app.rb, included opal-jquery in the html. Here is the js output gist.github.com/RedMage/5682298 Now, in addition to the previous error, it says, Uncaught "ReferenceError: jQuery is not defined". Must I include the original jquery in the HTML file?

Question 8

Originally, I thought this might be because you didn't require the opal-jquery gem (I'm assuming you have it installed). Another guess: maybe you need a <script src="opal-jquery.js"></script> in your HTML file?

Question 9

I originally had it required in my compiler file. I moved the "require 'opal-jquery'" line to app.rb after "require 'opal'" and it still threw the same console error after 'recompiling' and reloading index.html

Question 10

I do have the opal-jquery gem installed.

Question 11

I'll be sure to try that. I will have to grab the opal-jquery file. I will let you know what happens.

Question 12

I could not find any opal-jquery file in the libraries' github. I think I must hunt down the creator and pokes him about this.

Question 13

Take a look here: https://github.com/opal/opal-jquery/issues/26#issuecomment-25285375

I had exactly the same issues and got them sorted thanks to opal authors/mantainers.

Elia Schito 9897 silver badges18 bronze badges · Accepted Answer · 2013-05-23 16:44:04Z

2

Try putting opal and opal-jquery directly inside your html, and leaving the requires out of app.rb, you can grab them from http://cdnjs.com.

Otherwise I'd like to see the compiled app.js (you can put it in a gist).

Share

Improve this answer

answered May 23, 2013 at 16:44

Elia Schito's user avatar

Elia Schito

9897 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RedMage

RedMage Over a year ago

when I search opal-jquery on cdnjs.com it returns no results. When I search opal it returns opal.js and opal-parser.js

2013年05月24日T15:01:08.71Z+00:00

RedMage

RedMage Over a year ago

Would you upload opal-jquery.js to the CDN?

2013年05月28日T22:25:58.133Z+00:00

Elia Schito

Elia Schito Over a year ago

Sure, I'll do a PR, note that it will take some time to be merged, I'll add a link with the source as soon as it's ready

2013年05月29日T22:18:21.06Z+00:00

Elia Schito

Elia Schito Over a year ago

And here's the raw contents (please do not hotlink): raw.github.com/opal/cdnjs/…

2013年05月30日T11:15:50.773Z+00:00

RedMage

RedMage Over a year ago

I removed the requires from app.rb, included opal-jquery in the html. Here is the js output gist.github.com/RedMage/5682298 Now, in addition to the previous error, it says, Uncaught "ReferenceError: jQuery is not defined". Must I include the original jquery in the HTML file?

2013年05月31日T00:40:36.877Z+00:00

|

CollectivesTM on Stack Overflow

uninitialized constant Object::Element in Opal RB

3 Answers 3

6 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

3 Answers 3

6 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related