possible rendering issue - duplicate html
Locked
 
|
I have a custom Widget with this renderOn: method.
renderOn:html (CTMainHeader new appendToJQuery: 'body' asJQuery). html div class: 'container-fluid'; with: [ html div class: 'sidebar'; with: [ html div with: (CTLeftNav new appendToJQuery: 'body' asJQuery). ]. html div class: 'content'; with: [ html div style: 'float:left;'; with:[ CTMainBody new appendToJQuery: 'body' asJQuery. CTMainFooter new appendToJQuery: 'body' asJQuery ] ] ]. the class CTLeftNav includes this renderOn: renderOn: html html div with: 'Left nav'. The other classes CTMainBody, CTMainFooter, etc. are similar. What I see in the browser when it renders is this: Header Left nav Left nav Body Footer In other words, the CTLeftNav component gets rendered twice. Can anyone see what I'm doing wrong? Thanks. |
Re: possible rendering issue - duplicate html
|
You shouldn't create or append the widgets inside their rendering methods. Rendering methods should ideally do nothing but render stuff.
Instead, if you want the widget to automatically add itself to the page upon loading, you can do the following:
Then we you want to embed a widget inside another one:
otherWidget is an instance variable of MyWidget. MyOtherWidget is... another Widget ;)
Cheers, 2011/10/20 jones34 <[hidden email]> I have a custom Widget with this renderOn: method. Bernat Romagosa. |
|
|
thanks. That worked fine (and now I 'get it' at least for that part of Amber.
Second problem I'm having is that I can't get the script to run when the page is loaded. The same code executes fine when invoked by a button click, though: I have this for an index.html: <!DOCTYPE html> <html> <head> <title>CodeTalkers</title> <script src="../../js/amber.js" type="text/javascript"></script> <script type="text/javascript"> loadAmber({ files: ['Codetalkers.js'], prefix: 'projects/codetalkers/js', ready: function() { smalltalk.CTCodeTalkers._open(); }}); </script> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> </head> <body> <article> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> </article> </body> </html> As you can see, the button's onclick and the code in the ready: function() are the same, but it only works called from onclick. Following Nico's suggestion in another thread, I tried changing the jQuery.ready() function to this: ready: function() { 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); } Didn't work. Again any suggestions greatly appreciated. On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa <[hidden email]> wrote: > You shouldn't create or append the widgets inside their rendering methods. > Rendering methods should ideally do nothing but render stuff. > Instead, if you want the widget to automatically add itself to the page upon > loading, you can do the following: > > MyWidget class >> new > ^ super new appendToJQuery: 'body' asJQuery > > Then we you want to embed a widget inside another one: > > MyWidget >> renderOn: html > html div with: self otherWidget > MyWidget >> otherWidget > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] > > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another > Widget ;) > Cheers, > 2011/10/20 jones34 <[hidden email]> >> >> I have a custom Widget with this renderOn: method. >> >> renderOn:html >> (CTMainHeader new appendToJQuery: 'body' asJQuery). >> html div >> class: 'container-fluid'; >> with: [ >> html div >> class: 'sidebar'; >> with: [ html div >> with: (CTLeftNav new >> appendToJQuery: 'body' asJQuery). ]. >> html div >> class: 'content'; >> with: [ >> html div >> style: 'float:left;'; >> with:[ >> CTMainBody new >> appendToJQuery: 'body' asJQuery. >> CTMainFooter new >> appendToJQuery: 'body' asJQuery >> ] >> ] >> ]. >> >> the class CTLeftNav includes this renderOn: >> renderOn: html >> html div with: 'Left nav'. >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I >> see in the browser when it renders is this: >> Header >> Left nav >> Left nav >> Body >> Footer >> In other words, the CTLeftNav component gets rendered twice. Can >> anyone see what I'm doing wrong? >> Thanks. > > > -- > Bernat Romagosa. > |
Re: possible rendering issue - duplicate html
|
|
That looks like a bug in amber.js
can you try with: loadAmber({ files: ['Codetalkers.js'], prefix: 'projects/codetalkers/js', ready: function() { smalltalk.Browser._open(); }}); Cheers, Nico On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: > thanks. That worked fine (and now I 'get it' at least for that part of Amber. > > Second problem I'm having is that I can't get the script to run when > the page is loaded. The same code executes fine when invoked by a > button click, though: I have this for an index.html: > > <!DOCTYPE html> > <html> > <head> > <title>CodeTalkers</title> > <script src="../../js/amber.js" type="text/javascript"></script> > <script type="text/javascript"> > loadAmber({ > files: ['Codetalkers.js'], > prefix: 'projects/codetalkers/js', > ready: function() { > smalltalk.CTCodeTalkers._open(); > }}); > </script> > <link rel="stylesheet" > href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > </head> > <body> > <article> > <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > </article> > </body> > </html> > > As you can see, the button's onclick and the code in the ready: > function() are the same, but it only works called from onclick. > > Following Nico's suggestion in another thread, I tried changing the > jQuery.ready() function to this: > > ready: function() { > 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); > } > Didn't work. > Again any suggestions greatly appreciated. > > On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa > <[hidden email]> wrote: > > You shouldn't create or append the widgets inside their rendering methods. > > Rendering methods should ideally do nothing but render stuff. > > Instead, if you want the widget to automatically add itself to the page upon > > loading, you can do the following: > > > > MyWidget class >> new > > ^ super new appendToJQuery: 'body' asJQuery > > > > Then we you want to embed a widget inside another one: > > > > MyWidget >> renderOn: html > > html div with: self otherWidget > > MyWidget >> otherWidget > > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] > > > > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another > > Widget ;) > > Cheers, > > 2011/10/20 jones34 <[hidden email]> > >> > >> I have a custom Widget with this renderOn: method. > >> > >> renderOn:html > >> (CTMainHeader new appendToJQuery: 'body' asJQuery). > >> html div > >> class: 'container-fluid'; > >> with: [ > >> html div > >> class: 'sidebar'; > >> with: [ html div > >> with: (CTLeftNav new > >> appendToJQuery: 'body' asJQuery). ]. > >> html div > >> class: 'content'; > >> with: [ > >> html div > >> style: 'float:left;'; > >> with:[ > >> CTMainBody new > >> appendToJQuery: 'body' asJQuery. > >> CTMainFooter new > >> appendToJQuery: 'body' asJQuery > >> ] > >> ] > >> ]. > >> > >> the class CTLeftNav includes this renderOn: > >> renderOn: html > >> html div with: 'Left nav'. > >> > >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I > >> see in the browser when it renders is this: > >> Header > >> Left nav > >> Left nav > >> Body > >> Footer > >> In other words, the CTLeftNav component gets rendered twice. Can > >> anyone see what I'm doing wrong? > >> Thanks. > > > > > > -- > > Bernat Romagosa. > > |
|
|
That also doesn't work.
On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton <[hidden email]> wrote: > That looks like a bug in amber.js > can you try with: > > loadAmber({ > files: ['Codetalkers.js'], > prefix: 'projects/codetalkers/js', > ready: function() { > smalltalk.Browser._open(); > }}); > > Cheers, > Nico > > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. >> >> Second problem I'm having is that I can't get the script to run when >> the page is loaded. The same code executes fine when invoked by a >> button click, though: I have this for an index.html: >> >> <!DOCTYPE html> >> <html> >> <head> >> <title>CodeTalkers</title> >> <script src="../../js/amber.js" type="text/javascript"></script> >> <script type="text/javascript"> >> loadAmber({ >> files: ['Codetalkers.js'], >> prefix: 'projects/codetalkers/js', >> ready: function() { >> smalltalk.CTCodeTalkers._open(); >> }}); >> </script> >> <link rel="stylesheet" >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> >> </head> >> <body> >> <article> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> >> </article> >> </body> >> </html> >> >> As you can see, the button's onclick and the code in the ready: >> function() are the same, but it only works called from onclick. >> >> Following Nico's suggestion in another thread, I tried changing the >> jQuery.ready() function to this: >> >> ready: function() { >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); >> } >> Didn't work. >> Again any suggestions greatly appreciated. >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa >> <[hidden email]> wrote: >> > You shouldn't create or append the widgets inside their rendering methods. >> > Rendering methods should ideally do nothing but render stuff. >> > Instead, if you want the widget to automatically add itself to the page upon >> > loading, you can do the following: >> > >> > MyWidget class >> new >> > ^ super new appendToJQuery: 'body' asJQuery >> > >> > Then we you want to embed a widget inside another one: >> > >> > MyWidget >> renderOn: html >> > html div with: self otherWidget >> > MyWidget >> otherWidget >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] >> > >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another >> > Widget ;) >> > Cheers, >> > 2011/10/20 jones34 <[hidden email]> >> >> >> >> I have a custom Widget with this renderOn: method. >> >> >> >> renderOn:html >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). >> >> html div >> >> class: 'container-fluid'; >> >> with: [ >> >> html div >> >> class: 'sidebar'; >> >> with: [ html div >> >> with: (CTLeftNav new >> >> appendToJQuery: 'body' asJQuery). ]. >> >> html div >> >> class: 'content'; >> >> with: [ >> >> html div >> >> style: 'float:left;'; >> >> with:[ >> >> CTMainBody new >> >> appendToJQuery: 'body' asJQuery. >> >> CTMainFooter new >> >> appendToJQuery: 'body' asJQuery >> >> ] >> >> ] >> >> ]. >> >> >> >> the class CTLeftNav includes this renderOn: >> >> renderOn: html >> >> html div with: 'Left nav'. >> >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I >> >> see in the browser when it renders is this: >> >> Header >> >> Left nav >> >> Left nav >> >> Body >> >> Footer >> >> In other words, the CTLeftNav component gets rendered twice. Can >> >> anyone see what I'm doing wrong? >> >> Thanks. >> > >> > >> > -- >> > Bernat Romagosa. >> > > > > |
Re: possible rendering issue - duplicate html
|
|
it's strange, I just checked with examples/trysmalltalk/index.html
There's a similar ready function and it works fine. Does it fail to load the tutorial and the browser for you? Nico On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: > That also doesn't work. > > On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton > <[hidden email]> wrote: > > That looks like a bug in amber.js > > can you try with: > > > > loadAmber({ > > files: ['Codetalkers.js'], > > prefix: 'projects/codetalkers/js', > > ready: function() { > > smalltalk.Browser._open(); > > }}); > > > > Cheers, > > Nico > > > > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: > >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. > >> > >> Second problem I'm having is that I can't get the script to run when > >> the page is loaded. The same code executes fine when invoked by a > >> button click, though: I have this for an index.html: > >> > >> <!DOCTYPE html> > >> <html> > >> <head> > >> <title>CodeTalkers</title> > >> <script src="../../js/amber.js" type="text/javascript"></script> > >> <script type="text/javascript"> > >> loadAmber({ > >> files: ['Codetalkers.js'], > >> prefix: 'projects/codetalkers/js', > >> ready: function() { > >> smalltalk.CTCodeTalkers._open(); > >> }}); > >> </script> > >> <link rel="stylesheet" > >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > >> </head> > >> <body> > >> <article> > >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > >> </article> > >> </body> > >> </html> > >> > >> As you can see, the button's onclick and the code in the ready: > >> function() are the same, but it only works called from onclick. > >> > >> Following Nico's suggestion in another thread, I tried changing the > >> jQuery.ready() function to this: > >> > >> ready: function() { > >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); > >> } > >> Didn't work. > >> Again any suggestions greatly appreciated. > >> > >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa > >> <[hidden email]> wrote: > >> > You shouldn't create or append the widgets inside their rendering methods. > >> > Rendering methods should ideally do nothing but render stuff. > >> > Instead, if you want the widget to automatically add itself to the page upon > >> > loading, you can do the following: > >> > > >> > MyWidget class >> new > >> > ^ super new appendToJQuery: 'body' asJQuery > >> > > >> > Then we you want to embed a widget inside another one: > >> > > >> > MyWidget >> renderOn: html > >> > html div with: self otherWidget > >> > MyWidget >> otherWidget > >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] > >> > > >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another > >> > Widget ;) > >> > Cheers, > >> > 2011/10/20 jones34 <[hidden email]> > >> >> > >> >> I have a custom Widget with this renderOn: method. > >> >> > >> >> renderOn:html > >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). > >> >> html div > >> >> class: 'container-fluid'; > >> >> with: [ > >> >> html div > >> >> class: 'sidebar'; > >> >> with: [ html div > >> >> with: (CTLeftNav new > >> >> appendToJQuery: 'body' asJQuery). ]. > >> >> html div > >> >> class: 'content'; > >> >> with: [ > >> >> html div > >> >> style: 'float:left;'; > >> >> with:[ > >> >> CTMainBody new > >> >> appendToJQuery: 'body' asJQuery. > >> >> CTMainFooter new > >> >> appendToJQuery: 'body' asJQuery > >> >> ] > >> >> ] > >> >> ]. > >> >> > >> >> the class CTLeftNav includes this renderOn: > >> >> renderOn: html > >> >> html div with: 'Left nav'. > >> >> > >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I > >> >> see in the browser when it renders is this: > >> >> Header > >> >> Left nav > >> >> Left nav > >> >> Body > >> >> Footer > >> >> In other words, the CTLeftNav component gets rendered twice. Can > >> >> anyone see what I'm doing wrong? > >> >> Thanks. > >> > > >> > > >> > -- > >> > Bernat Romagosa. > >> > > > > > > > |
|
|
I had the following two lines in my html and they both work when
invoked by a button click, but neither works in the ready: function. <button onclick="smalltalk.Browser._open()">class browser</button> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> On Thu, Oct 20, 2011 at 5:26 PM, Nicolas Petton <[hidden email]> wrote: > it's strange, I just checked with examples/trysmalltalk/index.html > There's a similar ready function and it works fine. > > Does it fail to load the tutorial and the browser for you? > > Nico > > On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: >> That also doesn't work. >> >> On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton >> <[hidden email]> wrote: >> > That looks like a bug in amber.js >> > can you try with: >> > >> > loadAmber({ >> > files: ['Codetalkers.js'], >> > prefix: 'projects/codetalkers/js', >> > ready: function() { >> > smalltalk.Browser._open(); >> > }}); >> > >> > Cheers, >> > Nico >> > >> > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: >> >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. >> >> >> >> Second problem I'm having is that I can't get the script to run when >> >> the page is loaded. The same code executes fine when invoked by a >> >> button click, though: I have this for an index.html: >> >> >> >> <!DOCTYPE html> >> >> <html> >> >> <head> >> >> <title>CodeTalkers</title> >> >> <script src="../../js/amber.js" type="text/javascript"></script> >> >> <script type="text/javascript"> >> >> loadAmber({ >> >> files: ['Codetalkers.js'], >> >> prefix: 'projects/codetalkers/js', >> >> ready: function() { >> >> smalltalk.CTCodeTalkers._open(); >> >> }}); >> >> </script> >> >> <link rel="stylesheet" >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> >> >> </head> >> >> <body> >> >> <article> >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> >> >> </article> >> >> </body> >> >> </html> >> >> >> >> As you can see, the button's onclick and the code in the ready: >> >> function() are the same, but it only works called from onclick. >> >> >> >> Following Nico's suggestion in another thread, I tried changing the >> >> jQuery.ready() function to this: >> >> >> >> ready: function() { >> >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); >> >> } >> >> Didn't work. >> >> Again any suggestions greatly appreciated. >> >> >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa >> >> <[hidden email]> wrote: >> >> > You shouldn't create or append the widgets inside their rendering methods. >> >> > Rendering methods should ideally do nothing but render stuff. >> >> > Instead, if you want the widget to automatically add itself to the page upon >> >> > loading, you can do the following: >> >> > >> >> > MyWidget class >> new >> >> > ^ super new appendToJQuery: 'body' asJQuery >> >> > >> >> > Then we you want to embed a widget inside another one: >> >> > >> >> > MyWidget >> renderOn: html >> >> > html div with: self otherWidget >> >> > MyWidget >> otherWidget >> >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] >> >> > >> >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another >> >> > Widget ;) >> >> > Cheers, >> >> > 2011/10/20 jones34 <[hidden email]> >> >> >> >> >> >> I have a custom Widget with this renderOn: method. >> >> >> >> >> >> renderOn:html >> >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). >> >> >> html div >> >> >> class: 'container-fluid'; >> >> >> with: [ >> >> >> html div >> >> >> class: 'sidebar'; >> >> >> with: [ html div >> >> >> with: (CTLeftNav new >> >> >> appendToJQuery: 'body' asJQuery). ]. >> >> >> html div >> >> >> class: 'content'; >> >> >> with: [ >> >> >> html div >> >> >> style: 'float:left;'; >> >> >> with:[ >> >> >> CTMainBody new >> >> >> appendToJQuery: 'body' asJQuery. >> >> >> CTMainFooter new >> >> >> appendToJQuery: 'body' asJQuery >> >> >> ] >> >> >> ] >> >> >> ]. >> >> >> >> >> >> the class CTLeftNav includes this renderOn: >> >> >> renderOn: html >> >> >> html div with: 'Left nav'. >> >> >> >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I >> >> >> see in the browser when it renders is this: >> >> >> Header >> >> >> Left nav >> >> >> Left nav >> >> >> Body >> >> >> Footer >> >> >> In other words, the CTLeftNav component gets rendered twice. Can >> >> >> anyone see what I'm doing wrong? >> >> >> Thanks. >> >> > >> >> > >> >> > -- >> >> > Bernat Romagosa. >> >> > >> > >> > >> > > > > |
Re: possible rendering issue - duplicate html
|
|
Where in the html page is your script?
On Thu, 2011-10-20 at 17:58 -0400, Larry White wrote: > I had the following two lines in my html and they both work when > invoked by a button click, but neither works in the ready: function. > <button onclick="smalltalk.Browser._open()">class browser</button> > <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > > On Thu, Oct 20, 2011 at 5:26 PM, Nicolas Petton > <[hidden email]> wrote: > > it's strange, I just checked with examples/trysmalltalk/index.html > > There's a similar ready function and it works fine. > > > > Does it fail to load the tutorial and the browser for you? > > > > Nico > > > > On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: > >> That also doesn't work. > >> > >> On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton > >> <[hidden email]> wrote: > >> > That looks like a bug in amber.js > >> > can you try with: > >> > > >> > loadAmber({ > >> > files: ['Codetalkers.js'], > >> > prefix: 'projects/codetalkers/js', > >> > ready: function() { > >> > smalltalk.Browser._open(); > >> > }}); > >> > > >> > Cheers, > >> > Nico > >> > > >> > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: > >> >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. > >> >> > >> >> Second problem I'm having is that I can't get the script to run when > >> >> the page is loaded. The same code executes fine when invoked by a > >> >> button click, though: I have this for an index.html: > >> >> > >> >> <!DOCTYPE html> > >> >> <html> > >> >> <head> > >> >> <title>CodeTalkers</title> > >> >> <script src="../../js/amber.js" type="text/javascript"></script> > >> >> <script type="text/javascript"> > >> >> loadAmber({ > >> >> files: ['Codetalkers.js'], > >> >> prefix: 'projects/codetalkers/js', > >> >> ready: function() { > >> >> smalltalk.CTCodeTalkers._open(); > >> >> }}); > >> >> </script> > >> >> <link rel="stylesheet" > >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > >> >> </head> > >> >> <body> > >> >> <article> > >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > >> >> </article> > >> >> </body> > >> >> </html> > >> >> > >> >> As you can see, the button's onclick and the code in the ready: > >> >> function() are the same, but it only works called from onclick. > >> >> > >> >> Following Nico's suggestion in another thread, I tried changing the > >> >> jQuery.ready() function to this: > >> >> > >> >> ready: function() { > >> >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); > >> >> } > >> >> Didn't work. > >> >> Again any suggestions greatly appreciated. > >> >> > >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa > >> >> <[hidden email]> wrote: > >> >> > You shouldn't create or append the widgets inside their rendering methods. > >> >> > Rendering methods should ideally do nothing but render stuff. > >> >> > Instead, if you want the widget to automatically add itself to the page upon > >> >> > loading, you can do the following: > >> >> > > >> >> > MyWidget class >> new > >> >> > ^ super new appendToJQuery: 'body' asJQuery > >> >> > > >> >> > Then we you want to embed a widget inside another one: > >> >> > > >> >> > MyWidget >> renderOn: html > >> >> > html div with: self otherWidget > >> >> > MyWidget >> otherWidget > >> >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] > >> >> > > >> >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another > >> >> > Widget ;) > >> >> > Cheers, > >> >> > 2011/10/20 jones34 <[hidden email]> > >> >> >> > >> >> >> I have a custom Widget with this renderOn: method. > >> >> >> > >> >> >> renderOn:html > >> >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). > >> >> >> html div > >> >> >> class: 'container-fluid'; > >> >> >> with: [ > >> >> >> html div > >> >> >> class: 'sidebar'; > >> >> >> with: [ html div > >> >> >> with: (CTLeftNav new > >> >> >> appendToJQuery: 'body' asJQuery). ]. > >> >> >> html div > >> >> >> class: 'content'; > >> >> >> with: [ > >> >> >> html div > >> >> >> style: 'float:left;'; > >> >> >> with:[ > >> >> >> CTMainBody new > >> >> >> appendToJQuery: 'body' asJQuery. > >> >> >> CTMainFooter new > >> >> >> appendToJQuery: 'body' asJQuery > >> >> >> ] > >> >> >> ] > >> >> >> ]. > >> >> >> > >> >> >> the class CTLeftNav includes this renderOn: > >> >> >> renderOn: html > >> >> >> html div with: 'Left nav'. > >> >> >> > >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I > >> >> >> see in the browser when it renders is this: > >> >> >> Header > >> >> >> Left nav > >> >> >> Left nav > >> >> >> Body > >> >> >> Footer > >> >> >> In other words, the CTLeftNav component gets rendered twice. Can > >> >> >> anyone see what I'm doing wrong? > >> >> >> Thanks. > >> >> > > >> >> > > >> >> > -- > >> >> > Bernat Romagosa. > >> >> > > >> > > >> > > >> > > > > > > > |
|
|
in the head section.
<html> >> >> >> <head> >> >> >> <title>CodeTalkers</title> >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> >> >> >> <script type="text/javascript"> >> >> >> loadAmber({ >> >> >> files: ['Codetalkers.js'], >> >> >> prefix: 'projects/codetalkers/js', >> >> >> ready: function() { >> >> >> smalltalk.CTCodeTalkers._open(); >> >> >> }}); >> >> >> </script> >> >> >> <link rel="stylesheet" >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> >> >> >> </head> On Thu, Oct 20, 2011 at 6:09 PM, Nicolas Petton <[hidden email]> wrote: > Where in the html page is your script? > > On Thu, 2011-10-20 at 17:58 -0400, Larry White wrote: >> I had the following two lines in my html and they both work when >> invoked by a button click, but neither works in the ready: function. >> <button onclick="smalltalk.Browser._open()">class browser</button> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> >> >> On Thu, Oct 20, 2011 at 5:26 PM, Nicolas Petton >> <[hidden email]> wrote: >> > it's strange, I just checked with examples/trysmalltalk/index.html >> > There's a similar ready function and it works fine. >> > >> > Does it fail to load the tutorial and the browser for you? >> > >> > Nico >> > >> > On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: >> >> That also doesn't work. >> >> >> >> On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton >> >> <[hidden email]> wrote: >> >> > That looks like a bug in amber.js >> >> > can you try with: >> >> > >> >> > loadAmber({ >> >> > files: ['Codetalkers.js'], >> >> > prefix: 'projects/codetalkers/js', >> >> > ready: function() { >> >> > smalltalk.Browser._open(); >> >> > }}); >> >> > >> >> > Cheers, >> >> > Nico >> >> > >> >> > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: >> >> >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. >> >> >> >> >> >> Second problem I'm having is that I can't get the script to run when >> >> >> the page is loaded. The same code executes fine when invoked by a >> >> >> button click, though: I have this for an index.html: >> >> >> >> >> >> <!DOCTYPE html> >> >> >> <html> >> >> >> <head> >> >> >> <title>CodeTalkers</title> >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> >> >> >> <script type="text/javascript"> >> >> >> loadAmber({ >> >> >> files: ['Codetalkers.js'], >> >> >> prefix: 'projects/codetalkers/js', >> >> >> ready: function() { >> >> >> smalltalk.CTCodeTalkers._open(); >> >> >> }}); >> >> >> </script> >> >> >> <link rel="stylesheet" >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> >> >> >> </head> >> >> >> <body> >> >> >> <article> >> >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> >> >> >> </article> >> >> >> </body> >> >> >> </html> >> >> >> >> >> >> As you can see, the button's onclick and the code in the ready: >> >> >> function() are the same, but it only works called from onclick. >> >> >> >> >> >> Following Nico's suggestion in another thread, I tried changing the >> >> >> jQuery.ready() function to this: >> >> >> >> >> >> ready: function() { >> >> >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); >> >> >> } >> >> >> Didn't work. >> >> >> Again any suggestions greatly appreciated. >> >> >> >> >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa >> >> >> <[hidden email]> wrote: >> >> >> > You shouldn't create or append the widgets inside their rendering methods. >> >> >> > Rendering methods should ideally do nothing but render stuff. >> >> >> > Instead, if you want the widget to automatically add itself to the page upon >> >> >> > loading, you can do the following: >> >> >> > >> >> >> > MyWidget class >> new >> >> >> > ^ super new appendToJQuery: 'body' asJQuery >> >> >> > >> >> >> > Then we you want to embed a widget inside another one: >> >> >> > >> >> >> > MyWidget >> renderOn: html >> >> >> > html div with: self otherWidget >> >> >> > MyWidget >> otherWidget >> >> >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] >> >> >> > >> >> >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another >> >> >> > Widget ;) >> >> >> > Cheers, >> >> >> > 2011/10/20 jones34 <[hidden email]> >> >> >> >> >> >> >> >> I have a custom Widget with this renderOn: method. >> >> >> >> >> >> >> >> renderOn:html >> >> >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). >> >> >> >> html div >> >> >> >> class: 'container-fluid'; >> >> >> >> with: [ >> >> >> >> html div >> >> >> >> class: 'sidebar'; >> >> >> >> with: [ html div >> >> >> >> with: (CTLeftNav new >> >> >> >> appendToJQuery: 'body' asJQuery). ]. >> >> >> >> html div >> >> >> >> class: 'content'; >> >> >> >> with: [ >> >> >> >> html div >> >> >> >> style: 'float:left;'; >> >> >> >> with:[ >> >> >> >> CTMainBody new >> >> >> >> appendToJQuery: 'body' asJQuery. >> >> >> >> CTMainFooter new >> >> >> >> appendToJQuery: 'body' asJQuery >> >> >> >> ] >> >> >> >> ] >> >> >> >> ]. >> >> >> >> >> >> >> >> the class CTLeftNav includes this renderOn: >> >> >> >> renderOn: html >> >> >> >> html div with: 'Left nav'. >> >> >> >> >> >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I >> >> >> >> see in the browser when it renders is this: >> >> >> >> Header >> >> >> >> Left nav >> >> >> >> Left nav >> >> >> >> Body >> >> >> >> Footer >> >> >> >> In other words, the CTLeftNav component gets rendered twice. Can >> >> >> >> anyone see what I'm doing wrong? >> >> >> >> Thanks. >> >> >> > >> >> >> > >> >> >> > -- >> >> >> > Bernat Romagosa. >> >> >> > >> >> > >> >> > >> >> > >> > >> > >> > > > > |
Re: possible rendering issue - duplicate html
|
|
can you try inside the body?
On Thu, 2011-10-20 at 18:17 -0400, Larry White wrote: > in the head section. > > <html> > >> >> >> <head> > >> >> >> <title>CodeTalkers</title> > >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> > >> >> >> <script type="text/javascript"> > >> >> >> loadAmber({ > >> >> >> files: ['Codetalkers.js'], > >> >> >> prefix: 'projects/codetalkers/js', > >> >> >> ready: function() { > >> >> >> smalltalk.CTCodeTalkers._open(); > >> >> >> }}); > >> >> >> </script> > >> >> >> <link rel="stylesheet" > >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > >> >> >> </head> > > On Thu, Oct 20, 2011 at 6:09 PM, Nicolas Petton > <[hidden email]> wrote: > > Where in the html page is your script? > > > > On Thu, 2011-10-20 at 17:58 -0400, Larry White wrote: > >> I had the following two lines in my html and they both work when > >> invoked by a button click, but neither works in the ready: function. > >> <button onclick="smalltalk.Browser._open()">class browser</button> > >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > >> > >> On Thu, Oct 20, 2011 at 5:26 PM, Nicolas Petton > >> <[hidden email]> wrote: > >> > it's strange, I just checked with examples/trysmalltalk/index.html > >> > There's a similar ready function and it works fine. > >> > > >> > Does it fail to load the tutorial and the browser for you? > >> > > >> > Nico > >> > > >> > On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: > >> >> That also doesn't work. > >> >> > >> >> On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton > >> >> <[hidden email]> wrote: > >> >> > That looks like a bug in amber.js > >> >> > can you try with: > >> >> > > >> >> > loadAmber({ > >> >> > files: ['Codetalkers.js'], > >> >> > prefix: 'projects/codetalkers/js', > >> >> > ready: function() { > >> >> > smalltalk.Browser._open(); > >> >> > }}); > >> >> > > >> >> > Cheers, > >> >> > Nico > >> >> > > >> >> > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: > >> >> >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. > >> >> >> > >> >> >> Second problem I'm having is that I can't get the script to run when > >> >> >> the page is loaded. The same code executes fine when invoked by a > >> >> >> button click, though: I have this for an index.html: > >> >> >> > >> >> >> <!DOCTYPE html> > >> >> >> <html> > >> >> >> <head> > >> >> >> <title>CodeTalkers</title> > >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> > >> >> >> <script type="text/javascript"> > >> >> >> loadAmber({ > >> >> >> files: ['Codetalkers.js'], > >> >> >> prefix: 'projects/codetalkers/js', > >> >> >> ready: function() { > >> >> >> smalltalk.CTCodeTalkers._open(); > >> >> >> }}); > >> >> >> </script> > >> >> >> <link rel="stylesheet" > >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > >> >> >> </head> > >> >> >> <body> > >> >> >> <article> > >> >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > >> >> >> </article> > >> >> >> </body> > >> >> >> </html> > >> >> >> > >> >> >> As you can see, the button's onclick and the code in the ready: > >> >> >> function() are the same, but it only works called from onclick. > >> >> >> > >> >> >> Following Nico's suggestion in another thread, I tried changing the > >> >> >> jQuery.ready() function to this: > >> >> >> > >> >> >> ready: function() { > >> >> >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); > >> >> >> } > >> >> >> Didn't work. > >> >> >> Again any suggestions greatly appreciated. > >> >> >> > >> >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa > >> >> >> <[hidden email]> wrote: > >> >> >> > You shouldn't create or append the widgets inside their rendering methods. > >> >> >> > Rendering methods should ideally do nothing but render stuff. > >> >> >> > Instead, if you want the widget to automatically add itself to the page upon > >> >> >> > loading, you can do the following: > >> >> >> > > >> >> >> > MyWidget class >> new > >> >> >> > ^ super new appendToJQuery: 'body' asJQuery > >> >> >> > > >> >> >> > Then we you want to embed a widget inside another one: > >> >> >> > > >> >> >> > MyWidget >> renderOn: html > >> >> >> > html div with: self otherWidget > >> >> >> > MyWidget >> otherWidget > >> >> >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] > >> >> >> > > >> >> >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another > >> >> >> > Widget ;) > >> >> >> > Cheers, > >> >> >> > 2011/10/20 jones34 <[hidden email]> > >> >> >> >> > >> >> >> >> I have a custom Widget with this renderOn: method. > >> >> >> >> > >> >> >> >> renderOn:html > >> >> >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). > >> >> >> >> html div > >> >> >> >> class: 'container-fluid'; > >> >> >> >> with: [ > >> >> >> >> html div > >> >> >> >> class: 'sidebar'; > >> >> >> >> with: [ html div > >> >> >> >> with: (CTLeftNav new > >> >> >> >> appendToJQuery: 'body' asJQuery). ]. > >> >> >> >> html div > >> >> >> >> class: 'content'; > >> >> >> >> with: [ > >> >> >> >> html div > >> >> >> >> style: 'float:left;'; > >> >> >> >> with:[ > >> >> >> >> CTMainBody new > >> >> >> >> appendToJQuery: 'body' asJQuery. > >> >> >> >> CTMainFooter new > >> >> >> >> appendToJQuery: 'body' asJQuery > >> >> >> >> ] > >> >> >> >> ] > >> >> >> >> ]. > >> >> >> >> > >> >> >> >> the class CTLeftNav includes this renderOn: > >> >> >> >> renderOn: html > >> >> >> >> html div with: 'Left nav'. > >> >> >> >> > >> >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I > >> >> >> >> see in the browser when it renders is this: > >> >> >> >> Header > >> >> >> >> Left nav > >> >> >> >> Left nav > >> >> >> >> Body > >> >> >> >> Footer > >> >> >> >> In other words, the CTLeftNav component gets rendered twice. Can > >> >> >> >> anyone see what I'm doing wrong? > >> >> >> >> Thanks. > >> >> >> > > >> >> >> > > >> >> >> > -- > >> >> >> > Bernat Romagosa. > >> >> >> > > >> >> > > >> >> > > >> >> > > >> > > >> > > >> > > > > > > > |
|
|
That worked!
Was it incorrect to put it in the head? Thanks very much for your help. Really appreciated. On Thu, Oct 20, 2011 at 6:47 PM, Nicolas Petton <[hidden email]> wrote: > can you try inside the body? > > On Thu, 2011-10-20 at 18:17 -0400, Larry White wrote: >> in the head section. >> >> <html> >> >> >> >> <head> >> >> >> >> <title>CodeTalkers</title> >> >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> >> >> >> >> <script type="text/javascript"> >> >> >> >> loadAmber({ >> >> >> >> files: ['Codetalkers.js'], >> >> >> >> prefix: 'projects/codetalkers/js', >> >> >> >> ready: function() { >> >> >> >> smalltalk.CTCodeTalkers._open(); >> >> >> >> }}); >> >> >> >> </script> >> >> >> >> <link rel="stylesheet" >> >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> >> >> >> >> </head> >> >> On Thu, Oct 20, 2011 at 6:09 PM, Nicolas Petton >> <[hidden email]> wrote: >> > Where in the html page is your script? >> > >> > On Thu, 2011-10-20 at 17:58 -0400, Larry White wrote: >> >> I had the following two lines in my html and they both work when >> >> invoked by a button click, but neither works in the ready: function. >> >> <button onclick="smalltalk.Browser._open()">class browser</button> >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> >> >> >> >> On Thu, Oct 20, 2011 at 5:26 PM, Nicolas Petton >> >> <[hidden email]> wrote: >> >> > it's strange, I just checked with examples/trysmalltalk/index.html >> >> > There's a similar ready function and it works fine. >> >> > >> >> > Does it fail to load the tutorial and the browser for you? >> >> > >> >> > Nico >> >> > >> >> > On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: >> >> >> That also doesn't work. >> >> >> >> >> >> On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton >> >> >> <[hidden email]> wrote: >> >> >> > That looks like a bug in amber.js >> >> >> > can you try with: >> >> >> > >> >> >> > loadAmber({ >> >> >> > files: ['Codetalkers.js'], >> >> >> > prefix: 'projects/codetalkers/js', >> >> >> > ready: function() { >> >> >> > smalltalk.Browser._open(); >> >> >> > }}); >> >> >> > >> >> >> > Cheers, >> >> >> > Nico >> >> >> > >> >> >> > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: >> >> >> >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. >> >> >> >> >> >> >> >> Second problem I'm having is that I can't get the script to run when >> >> >> >> the page is loaded. The same code executes fine when invoked by a >> >> >> >> button click, though: I have this for an index.html: >> >> >> >> >> >> >> >> <!DOCTYPE html> >> >> >> >> <html> >> >> >> >> <head> >> >> >> >> <title>CodeTalkers</title> >> >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> >> >> >> >> <script type="text/javascript"> >> >> >> >> loadAmber({ >> >> >> >> files: ['Codetalkers.js'], >> >> >> >> prefix: 'projects/codetalkers/js', >> >> >> >> ready: function() { >> >> >> >> smalltalk.CTCodeTalkers._open(); >> >> >> >> }}); >> >> >> >> </script> >> >> >> >> <link rel="stylesheet" >> >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> >> >> >> >> </head> >> >> >> >> <body> >> >> >> >> <article> >> >> >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> >> >> >> >> </article> >> >> >> >> </body> >> >> >> >> </html> >> >> >> >> >> >> >> >> As you can see, the button's onclick and the code in the ready: >> >> >> >> function() are the same, but it only works called from onclick. >> >> >> >> >> >> >> >> Following Nico's suggestion in another thread, I tried changing the >> >> >> >> jQuery.ready() function to this: >> >> >> >> >> >> >> >> ready: function() { >> >> >> >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); >> >> >> >> } >> >> >> >> Didn't work. >> >> >> >> Again any suggestions greatly appreciated. >> >> >> >> >> >> >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa >> >> >> >> <[hidden email]> wrote: >> >> >> >> > You shouldn't create or append the widgets inside their rendering methods. >> >> >> >> > Rendering methods should ideally do nothing but render stuff. >> >> >> >> > Instead, if you want the widget to automatically add itself to the page upon >> >> >> >> > loading, you can do the following: >> >> >> >> > >> >> >> >> > MyWidget class >> new >> >> >> >> > ^ super new appendToJQuery: 'body' asJQuery >> >> >> >> > >> >> >> >> > Then we you want to embed a widget inside another one: >> >> >> >> > >> >> >> >> > MyWidget >> renderOn: html >> >> >> >> > html div with: self otherWidget >> >> >> >> > MyWidget >> otherWidget >> >> >> >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] >> >> >> >> > >> >> >> >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another >> >> >> >> > Widget ;) >> >> >> >> > Cheers, >> >> >> >> > 2011/10/20 jones34 <[hidden email]> >> >> >> >> >> >> >> >> >> >> I have a custom Widget with this renderOn: method. >> >> >> >> >> >> >> >> >> >> renderOn:html >> >> >> >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). >> >> >> >> >> html div >> >> >> >> >> class: 'container-fluid'; >> >> >> >> >> with: [ >> >> >> >> >> html div >> >> >> >> >> class: 'sidebar'; >> >> >> >> >> with: [ html div >> >> >> >> >> with: (CTLeftNav new >> >> >> >> >> appendToJQuery: 'body' asJQuery). ]. >> >> >> >> >> html div >> >> >> >> >> class: 'content'; >> >> >> >> >> with: [ >> >> >> >> >> html div >> >> >> >> >> style: 'float:left;'; >> >> >> >> >> with:[ >> >> >> >> >> CTMainBody new >> >> >> >> >> appendToJQuery: 'body' asJQuery. >> >> >> >> >> CTMainFooter new >> >> >> >> >> appendToJQuery: 'body' asJQuery >> >> >> >> >> ] >> >> >> >> >> ] >> >> >> >> >> ]. >> >> >> >> >> >> >> >> >> >> the class CTLeftNav includes this renderOn: >> >> >> >> >> renderOn: html >> >> >> >> >> html div with: 'Left nav'. >> >> >> >> >> >> >> >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I >> >> >> >> >> see in the browser when it renders is this: >> >> >> >> >> Header >> >> >> >> >> Left nav >> >> >> >> >> Left nav >> >> >> >> >> Body >> >> >> >> >> Footer >> >> >> >> >> In other words, the CTLeftNav component gets rendered twice. Can >> >> >> >> >> anyone see what I'm doing wrong? >> >> >> >> >> Thanks. >> >> >> >> > >> >> >> >> > >> >> >> >> > -- >> >> >> >> > Bernat Romagosa. >> >> >> >> > >> >> >> > >> >> >> > >> >> >> > >> >> > >> >> > >> >> > >> > >> > >> > > > > |
Re: possible rendering issue - duplicate html
|
|
Hi everyone,
I once had a similar issue. It seems the place where you load Amber in the host-HTML page is very important. If it's put in the head, the code does not find (some? any?) of the DOM-Elements of the "body". Strange indeed. The solution for me was to put the "<script>" section that loads amber at the very end of "body". Cheers, Sebastian On Oct 21, 1:12 am, Larry White <[hidden email]> wrote: > That worked! > Was it incorrect to put it in the head? > > Thanks very much for your help. Really appreciated. > > On Thu, Oct 20, 2011 at 6:47 PM, Nicolas Petton > > > > > > > > <[hidden email]> wrote: > > can you try inside the body? > > > On Thu, 2011-10-20 at 18:17 -0400, Larry White wrote: > >> in the head section. > > >> <html> > >> >> >> >> <head> > >> >> >> >> <title>CodeTalkers</title> > >> >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> > >> >> >> >> <script type="text/javascript"> > >> >> >> >> loadAmber({ > >> >> >> >> files: ['Codetalkers.js'], > >> >> >> >> prefix: 'projects/codetalkers/js', > >> >> >> >> ready: function() { > >> >> >> >> smalltalk.CTCodeTalkers._open(); > >> >> >> >> }}); > >> >> >> >> </script> > >> >> >> >> <link rel="stylesheet" > >> >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > >> >> >> >> </head> > > >> On Thu, Oct 20, 2011 at 6:09 PM, Nicolas Petton > >> <[hidden email]> wrote: > >> > Where in the html page is your script? > > >> > On Thu, 2011-10-20 at 17:58 -0400, Larry White wrote: > >> >> I had the following two lines in my html and they both work when > >> >> invoked by a button click, but neither works in the ready: function. > >> >> <button onclick="smalltalk.Browser._open()">class browser</button> > >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > > >> >> On Thu, Oct 20, 2011 at 5:26 PM, Nicolas Petton > >> >> <[hidden email]> wrote: > >> >> > it's strange, I just checked with examples/trysmalltalk/index.html > >> >> > There's a similar ready function and it works fine. > > >> >> > Does it fail to load the tutorial and the browser for you? > > >> >> > Nico > > >> >> > On Thu, 2011-10-20 at 17:23 -0400, Larry White wrote: > >> >> >> That also doesn't work. > > >> >> >> On Thu, Oct 20, 2011 at 5:02 PM, Nicolas Petton > >> >> >> <[hidden email]> wrote: > >> >> >> > That looks like a bug in amber.js > >> >> >> > can you try with: > > >> >> >> > loadAmber({ > >> >> >> > files: ['Codetalkers.js'], > >> >> >> > prefix: 'projects/codetalkers/js', > >> >> >> > ready: function() { > >> >> >> > smalltalk.Browser._open(); > >> >> >> > }}); > > >> >> >> > Cheers, > >> >> >> > Nico > > >> >> >> > On Thu, 2011-10-20 at 16:51 -0400, Larry White wrote: > >> >> >> >> thanks. That worked fine (and now I 'get it' at least for that part of Amber. > > >> >> >> >> Second problem I'm having is that I can't get the script to run when > >> >> >> >> the page is loaded. The same code executes fine when invoked by a > >> >> >> >> button click, though: I have this for an index.html: > > >> >> >> >> <!DOCTYPE html> > >> >> >> >> <html> > >> >> >> >> <head> > >> >> >> >> <title>CodeTalkers</title> > >> >> >> >> <script src="../../js/amber.js" type="text/javascript"></script> > >> >> >> >> <script type="text/javascript"> > >> >> >> >> loadAmber({ > >> >> >> >> files: ['Codetalkers.js'], > >> >> >> >> prefix: 'projects/codetalkers/js', > >> >> >> >> ready: function() { > >> >> >> >> smalltalk.CTCodeTalkers._open(); > >> >> >> >> }}); > >> >> >> >> </script> > >> >> >> >> <link rel="stylesheet" > >> >> >> >> href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> > >> >> >> >> </head> > >> >> >> >> <body> > >> >> >> >> <article> > >> >> >> >> <button onclick="smalltalk.CTCodeTalkers._open()">say hi</button> > >> >> >> >> </article> > >> >> >> >> </body> > >> >> >> >> </html> > > >> >> >> >> As you can see, the button's onclick and the code in the ready: > >> >> >> >> function() are the same, but it only works called from onclick. > > >> >> >> >> Following Nico's suggestion in another thread, I tried changing the > >> >> >> >> jQuery.ready() function to this: > > >> >> >> >> ready: function() { > >> >> >> >> 'body'._asJQuery()._append_(smalltalk.CTCodeTalkers._new()); > >> >> >> >> } > >> >> >> >> Didn't work. > >> >> >> >> Again any suggestions greatly appreciated. > > >> >> >> >> On Thu, Oct 20, 2011 at 1:59 PM, Bernat Romagosa > >> >> >> >> <[hidden email]> wrote: > >> >> >> >> > You shouldn't create or append the widgets inside their rendering methods. > >> >> >> >> > Rendering methods should ideally do nothing but render stuff. > >> >> >> >> > Instead, if you want the widget to automatically add itself to the page upon > >> >> >> >> > loading, you can do the following: > > >> >> >> >> > MyWidget class >> new > >> >> >> >> > ^ super new appendToJQuery: 'body' asJQuery > > >> >> >> >> > Then we you want to embed a widget inside another one: > > >> >> >> >> > MyWidget >> renderOn: html > >> >> >> >> > html div with: self otherWidget > >> >> >> >> > MyWidget >> otherWidget > >> >> >> >> > ^ otherWidget ifNil: [ otherWidget := MyOtherWidget new ] > > >> >> >> >> > otherWidget is an instance variable of MyWidget. MyOtherWidget is... another > >> >> >> >> > Widget ;) > >> >> >> >> > Cheers, > >> >> >> >> > 2011/10/20 jones34 <[hidden email]> > > >> >> >> >> >> I have a custom Widget with this renderOn: method. > > >> >> >> >> >> renderOn:html > >> >> >> >> >> (CTMainHeader new appendToJQuery: 'body' asJQuery). > >> >> >> >> >> html div > >> >> >> >> >> class: 'container-fluid'; > >> >> >> >> >> with: [ > >> >> >> >> >> html div > >> >> >> >> >> class: 'sidebar'; > >> >> >> >> >> with: [ html div > >> >> >> >> >> with: (CTLeftNav new > >> >> >> >> >> appendToJQuery: 'body' asJQuery). ]. > >> >> >> >> >> html div > >> >> >> >> >> class: 'content'; > >> >> >> >> >> with: [ > >> >> >> >> >> html div > >> >> >> >> >> style: 'float:left;'; > >> >> >> >> >> with:[ > >> >> >> >> >> CTMainBody new > >> >> >> >> >> appendToJQuery: 'body' asJQuery. > >> >> >> >> >> CTMainFooter new > >> >> >> >> >> appendToJQuery: 'body' asJQuery > >> >> >> >> >> ] > >> >> >> >> >> ] > >> >> >> >> >> ]. > > >> >> >> >> >> the class CTLeftNav includes this renderOn: > >> >> >> >> >> renderOn: html > >> >> >> >> >> html div with: 'Left nav'. > > >> >> >> >> >> The other classes CTMainBody, CTMainFooter, etc. are similar. What I > >> >> >> >> >> see in the browser when it renders is this: > >> >> >> >> >> Header > >> >> >> >> >> Left nav > >> >> >> >> >> Left nav > >> >> >> >> >> Body > >> >> >> >> >> Footer > >> >> >> >> >> In other words, the CTLeftNav component gets rendered twice. Can > >> >> >> >> >> anyone see what I'm doing wrong? > >> >> >> >> >> Thanks. > > >> >> >> >> > -- > >> >> >> >> > Bernat Romagosa. |
«
Return to Amber Smalltalk
|
1 view|%1 views
| Free forum by Nabble | Edit this page |