Trouble triggering javascript event from sketchup

thomthom · 9 Mar 2010, 22:08

hmm... turns out that the string thing is a legacy way of doing it.

I think that you need to append the element and then attach events.

todd burch · 10 Mar 2010, 03:15

I am trying to create a dynamic web page through javascript. Everything is working except for the "onclick" event for buttons.
...

does anyone have any ideas?

Yes. This works on a Mac: (Didn't test on IE)


class WebTest < UI;;WebDialog  

	def initialize 
		super("This is a test",true,"Test",250,250,250,250,true) ;
		html =<<HTML
<html>
<head>
<script>
function addButton() {
	alert('hi there'); 
	var body = document.body;
	var button = document.createElement('input');
	button.type = 'button';
	button.value = 'Click Me';
	button.id = 'btn1';
	var message = 'I am working';
	button.addEventListener("click", function() { alert(message);} , true ) ; 
	body.appendChild(button);
}
</script>
</head>
<body> 
Yo
</body>
</html>
HTML
		set_html(html)
		end

		def add_button 
			execute_script("addButton();") ; 
		end ; 

end

And, in the Ruby Console:


> load 'myscripts/webtest.rb'
true
> w = WebTest.new
#<WebTest;0x1d545b24>
> w.show
true
> w.add_button
true

MartinRinehart · 10 Mar 2010, 13:14

@cjthompson said:

I've edited the top post to reflect the changes you suggested.

Well, that sure is easier to read. To make it work, try my fourth suggestion. Have preliminary JS put up a big button that says "Start!" or whatever. That button's onclick() calls an action_callback in the Ruby. The action_callback can safely execute_script().

Another thing I see is the onclick() timing. The click will happen sometime after addButton() has run to completion. message will no longer exist. Move var message = ... outside the function. (No, you really don't have to worry about polluting the global namespace in a WebDialog.)

Pay attention to thomthom's remarks re attaching code to the event handler.

cjthompson · 10 Mar 2010, 13:18

@unknownuser said:

This works on a Mac: (Didn't test on IE)

For some reason, the alert box is popping up automatically, without adding the button.

However, this did work for me:

@thomthom said:

button.onclick = function() { alert(message); };

@thomthom said:

hmm... turns out that the string thing is a legacy way of doing it.

Yeah, I'm not the best keeping up with standards.

Anyways, I think that will do it for me. Thanks everyone for the replies.

todd burch · 10 Mar 2010, 14:30

Is the alert box that is popping up this one?


alert('hi there');

?

cjthompson · 10 Mar 2010, 15:42

ah, I completely missed that. Yes it is.

I'm getting an error "Object doesn't support this property or method." on this line:

button.addEventListener("click", function() { alert(message);} , true ) ;

Is anyone else with IE getting this?

thomthom · 10 Mar 2010, 16:20

what IE do you got? thing IE might have its own way to attach events...

Javascript - Introduction to Events

(www.quirksmode.org)

MartinRinehart · 10 Mar 2010, 16:51

Javascript - Advanced event registration models

(www.quirksmode.org)

ppk's conclusion: don't use addEventListener if you need to support MSIE.

todd burch · 10 Mar 2010, 17:36

Like I said, not tested on IE. If the browser does not respond to button.addEventListener, use button.attachEvent.

https://developer.mozilla.org/en/DOM/element.addEventListener

(By the way, I spent > 2 hours on this last night)

thomthom · 10 Mar 2010, 17:45

@unknownuser said:

button.attachEvent.

Yes -that jogged my memory - attachEvent was the IE way. (imagined that later IE (IE7 or IE8) used addEventListener as it's part of the DOM standard. But maybe I was wrong. ...or maybe it depends on the doctype....