possible rendering issue - duplicate html

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

possible rendering issue - duplicate html

larrry
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.
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

Bernat Romagosa
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.
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

larrry
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.
>
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

Nicolas Petton
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.
> >


Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

larrry
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.
>> >
>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

Nicolas Petton
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.
> >> >
> >
> >
> >


Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

larrry
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.
>> >> >
>> >
>> >
>> >
>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

Nicolas Petton
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.
> >> >> >
> >> >
> >> >
> >> >
> >
> >
> >


Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

larrry
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.
>> >> >> >
>> >> >
>> >> >
>> >> >
>> >
>> >
>> >
>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

Nicolas Petton
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.
> >> >> >> >
> >> >> >
> >> >> >
> >> >> >
> >> >
> >> >
> >> >
> >
> >
> >


Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

larrry
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.
>> >> >> >> >
>> >> >> >
>> >> >> >
>> >> >> >
>> >> >
>> >> >
>> >> >
>> >
>> >
>> >
>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: possible rendering issue - duplicate html

Sebastian Nozzi-2
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.