I''m trying to create a class which creates form elements with event
handlers which are methods, and
can''t get the handlers to be called. In the below code the onkeydown
and onclick handlers aren''t
getting called.
Can anyone point me to the (stupid) thing I''m doing wrong? I
couldn''t find any examples of passing
event handlers using the new Element constructor.
Steve
Chat = Class.create({
initialize: function(container) {
this.container = container;
this.container.appendChild(this.createForm());
},
createForm: function(){
var table = new Element("table", {"border" :
"0", "cellspacing" : "5", "width" :
"500"});
var tbody = new Element("tbody"); table.appendChild(tbody);
{
var firstRecord = new Element("tr");
tbody.appendChild(firstRecord);
var youSaidTD = new Element("td", { "width":
"30%", "valign" : "top"});
firstRecord.appendChild(youSaidTD);
var youSaidP = new Element("p", {"class" :
"fieldlabel"}).update("You said:");
youSaidTD.appendChild(youSaidP);
var youSaid1TD = new Element("td", { "width":
"70%", "valign" : "top"});
firstRecord.appendChild(youSaid1TD);
var youSaid1P = new Element("p", {"id" :
"yousaid"}).update("");
youSaid1TD.appendChild(youSaid1P);
}
{
var secondRecord = new Element("tr");
tbody.appendChild(secondRecord);
var youSaidTD = new Element("td", { "width":
"30%", "valign" : "top"});
secondRecord.appendChild(youSaidTD);
var youSaidP = new Element("p", {"class" :
"fieldlabel"}).update("Smarthome said:");
youSaidTD.appendChild(youSaidP);
var youSaid1TD = new Element("td", { "width":
"70%", "valign" : "top"});
secondRecord.appendChild(youSaid1TD);
var youSaid1P = new Element("p", {"class" :
"botresponse", "id" :
"smarthomeresponse"}).update("");
youSaid1TD.appendChild(youSaid1P);
}
{
var thirdRecord = new Element("tr");
tbody.appendChild(thirdRecord);
var myInputTD = new Element("td", { "width":
"100%", "colspan" : "2", "valign" :
"top"});
thirdRecord.appendChild(myInputTD);
var myInput = new Element("input", {"type" :
"text", "size" : "50", "name" :
"myinput",
"id" : "myinput", ''onkeydown'' :
this.lookKey.bindAsEventListener(this)});
myInputTD.appendChild(myInput);
var myInputButton = new Element("input", {"type" :
"button", "value" : "Say",
''onclick'' :
this.doSend});
myInputTD.appendChild(myInputButton);
}
{
var fourthRecord = new Element("tr");
tbody.appendChild(fourthRecord);
var myInputTD = new Element("td", { "width":
"100%", "colspan" : "2", "valign" :
"top"});
fourthRecord.appendChild(myInputTD);
var youSaidP = new Element("p", {"class" :
"bottomtext"}).update("You are speaking with
smarthome.");
myInputTD.appendChild(youSaidP);
}
return table;
},
lookKey: function(e) {
alert("got in this.lookKey");
if (e.keyCode == 13) { // Enter pressed?
this.doSend();
} else if (e.keyCode == 38) {
$("myinput").value = $("yousaid").innerHTML;
}
},
doSend: function() {
alert("got in doSend()");
var input = $F("myinput");
$("yousaid").update(input);
$("myinput").value="";
$("smarthomeresponse").update(input); // temp
}
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I got the doSend part of it to work by changing to a call to observe, but the
onkeydown still isn''t
working. I''m using scripty 1.8.0 which contains prototype 1.6.0.
I''m still stumped on why
the event listener isn''t working.
var myInput = new Element("input", {"type" :
"text", "size" : "50", "name" :
"myinput", "id" :
"myinput"}).
observe(''onkeydown'',
this.lookKey.bindAsEventListener(this));
myInputTD.appendChild(myInput);
var myInputButton = new Element("input", {"type" :
"button", "value" : "Say"}).
observe(''click'', this.doSend.bind(this));
myInputTD.appendChild(myInputButton);
Steve Prior wrote:> I''m trying to create a class which creates form elements with
event handlers which are methods, and
> can''t get the handlers to be called. In the below code the
onkeydown and onclick handlers aren''t
> getting called.
>
> Can anyone point me to the (stupid) thing I''m doing wrong? I
couldn''t find any examples of passing
> event handlers using the new Element constructor.
>
> Steve
>
> Chat = Class.create({
>
> initialize: function(container) {
> this.container = container;
> this.container.appendChild(this.createForm());
> },
>
> createForm: function(){
> var table = new Element("table", {"border" :
"0", "cellspacing" : "5", "width" :
"500"});
> var tbody = new Element("tbody");
table.appendChild(tbody);
>
> {
> var firstRecord = new Element("tr");
tbody.appendChild(firstRecord);
> var youSaidTD = new Element("td", { "width":
"30%", "valign" : "top"});
> firstRecord.appendChild(youSaidTD);
> var youSaidP = new Element("p", {"class" :
"fieldlabel"}).update("You said:");
> youSaidTD.appendChild(youSaidP);
> var youSaid1TD = new Element("td", { "width":
"70%", "valign" : "top"});
> firstRecord.appendChild(youSaid1TD);
> var youSaid1P = new Element("p", {"id" :
"yousaid"}).update("");
> youSaid1TD.appendChild(youSaid1P);
> }
>
> {
> var secondRecord = new Element("tr");
tbody.appendChild(secondRecord);
> var youSaidTD = new Element("td", { "width":
"30%", "valign" : "top"});
> secondRecord.appendChild(youSaidTD);
> var youSaidP = new Element("p", {"class" :
"fieldlabel"}).update("Smarthome said:");
> youSaidTD.appendChild(youSaidP);
> var youSaid1TD = new Element("td", { "width":
"70%", "valign" : "top"});
> secondRecord.appendChild(youSaid1TD);
> var youSaid1P = new Element("p", {"class" :
"botresponse", "id" :
> "smarthomeresponse"}).update("");
youSaid1TD.appendChild(youSaid1P);
> }
>
> {
> var thirdRecord = new Element("tr");
tbody.appendChild(thirdRecord);
> var myInputTD = new Element("td", { "width":
"100%", "colspan" : "2", "valign" :
"top"});
> thirdRecord.appendChild(myInputTD);
> var myInput = new Element("input", {"type" :
"text", "size" : "50", "name" :
"myinput",
> "id" : "myinput", ''onkeydown'' :
this.lookKey.bindAsEventListener(this)});
> myInputTD.appendChild(myInput);
> var myInputButton = new Element("input",
{"type" : "button", "value" : "Say",
''onclick'' :
> this.doSend});
> myInputTD.appendChild(myInputButton);
> }
>
> {
> var fourthRecord = new Element("tr");
tbody.appendChild(fourthRecord);
> var myInputTD = new Element("td", { "width":
"100%", "colspan" : "2", "valign" :
"top"});
> fourthRecord.appendChild(myInputTD);
> var youSaidP = new Element("p", {"class" :
"bottomtext"}).update("You are speaking with
> smarthome.");
> myInputTD.appendChild(youSaidP);
> }
>
> return table;
> },
>
> lookKey: function(e) {
> alert("got in this.lookKey");
> if (e.keyCode == 13) { // Enter pressed?
> this.doSend();
> } else if (e.keyCode == 38) {
> $("myinput").value = $("yousaid").innerHTML;
> }
> },
>
> doSend: function() {
> alert("got in doSend()");
> var input = $F("myinput");
> $("yousaid").update(input);
>
> $("myinput").value="";
> $("smarthomeresponse").update(input); // temp
> }
> });
>
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
It''s "keydown" (without "on") --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
kangax wrote:> It''s "keydown" (without "on")Thanks, I knew this was going to be a "bang my head on the table" simple answer. I still haven''t found where in any documentation I could have found that though - can you point me towards the reference for allowed values? The Event.observe docs point to sect 1.6 of the DOM level 2 events, but keydown isn''t listed there. Steve --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
http://www.prototypejs.org/api/event/observe has a link to a list of allowed DOM level 2 events (http://www.w3.org/TR/DOM-Level-2-Events/ events.html) --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---