Trouble triggering javascript event from sketchup

cjthompson

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

It is showing the exact same behaviour, it adds the button properly, but doesn't trigger.

thomthom

button.onclick = 'alert(message);';

You are assigning a string to the event.

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

Maybe you can skip the function wrapper when you only do one method call - can't remember right now.
button.onclick = alert(message);

thomthom

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

@cjthompson said:

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

@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

@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

Is the alert box that is popping up this one?


alert('hi there');

?

cjthompson

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

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

Javascript - Introduction to Events

(www.quirksmode.org)

MartinRinehart

Javascript - Advanced event registration models

(www.quirksmode.org)

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

todd burch

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

@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....