Refreshing a canvas
Locked
 
|
This is probably a dumb question, but is there an easy way to refresh
the HTMLCanvas ? I just want to do the same thing again starting at the renderOn:, but I don't know how to get the "html" argument. Does that make any sense ? |
|
|
Possible ways:
1. Save a reference to your root object, then destroy the content and re-create it: renderOn: html root := html div with: [ self renderContentOn: html ]. renderContentOn: html html div with: 'Here what you want to rerender…'. refresh [:html | self renderContentOn: html ] appendToJQuery: (root empty).
2. Query your root object, destroy the content and re-create it: renderOn: html root := html div id: self id; with: [ self renderContentOn: html ]. renderContentOn: html
html div with: 'Here what you want to rerender…'. refresh [:html | self renderContentOn: html ] appendToJQuery: (window jQuery: self id). On Mon, Jan 30, 2012 at 8:37 PM, leonsmith <[hidden email]> wrote: This is probably a dumb question, but is there an easy way to refresh |
|
|
Thank you Amber. Now I'm realizing I need to brush up on AJAX with
Amber so I can just refresh a portion, but you pointed me in the right direction. On Jan 31, 7:20 am, Amber Milan Eskridge <[hidden email]> wrote: > Possible ways: > > 1. Save a reference to your root object, then destroy the content and > re-create it: > renderOn: html > root := html div with: [ self renderContentOn: html ]. > > renderContentOn: html > html div with: 'Here what you want to rerender…'. > > refresh > [:html | self renderContentOn: html ] appendToJQuery: (root empty). > > 2. Query your root object, destroy the content and re-create it: > renderOn: html > root := html div id: self id; with: [ self renderContentOn: html ]. > > renderContentOn: html > html div with: 'Here what you want to rerender…'. > > refresh > [:html | self renderContentOn: html ] appendToJQuery: (window jQuery: > self id). > > > > > > > > On Mon, Jan 30, 2012 at 8:37 PM, leonsmith <[hidden email]> wrote: > > This is probably a dumb question, but is there an easy way to refresh > > the HTMLCanvas ? I just want to do the same thing again starting at > > the renderOn:, but I don't know how to get the "html" argument. Does > > that make any sense ? |
|
|
I am able to control the contents of an HTML element if I create it in
my Amber code, but I can't figure out how to access an element that has already been rendered (like when using a template). I created this index.html code: <html> <head> <title>Test of Elements in Amber</title> <script src="../../js/amber.js" type="text/javascript"></script> </head> <body> <div id="foo">123</div> <article> <h1>Element manipulation in Amber</h1> <script type="text/javascript"> loadAmber({ files: ['Dice.js'], prefix: 'projects/dice/js', ready: function() { smalltalk.Browser._open(); }}); </script> </article> </body> </html> ------------------------------- so what I want to do is grab the div with the id of 'foo' and replace its contents. When I load this page locally and open a workspace, I have tried to access that element using all kinds of javascript/JQuery syntax but can't find the right combination. Is it 'html.body.foo' or 'window.html.body > foo', or any of the many other combinations ? I think in jQuery it is something like $(".foo"). Should I be using the "class" or "id" attributes ? Sorry about being a pest, but I am not very JS fluent and a complete newbie to jQuery. I understand XML well enough. If someone could point me in the right direction I would really appreciate it. |
|
|
Hello,
You can address your div of choice like... '#foo' asJQuery So, let's say You wan to load a new content into that div, all You need is... '#foo' asJQuery load: 'http://...' Good luck... On 10 Feb., 19:43, leonsmith <[hidden email]> wrote: > I am able to control the contents of an HTML element if I create it in > my Amber code, but I can't figure out how to access an element that > has already been rendered (like when using a template). I created this > index.html code: > > <html> > <head> > <title>Test of Elements in Amber</title> > <script src="../../js/amber.js" type="text/javascript"></script> > </head> > <body> > <div id="foo">123</div> > <article> > <h1>Element manipulation in Amber</h1> > <script type="text/javascript"> > loadAmber({ > files: ['Dice.js'], > prefix: 'projects/dice/js', > ready: function() { > smalltalk.Browser._open(); > }}); > </script> > </article> > </body> > </html> > ------------------------------- > so what I want to do is grab the div with the id of 'foo' and replace > its contents. When I load this page locally and open a workspace, I > have tried to access that element using all kinds of javascript/JQuery > syntax but can't find the right combination. Is it > > 'html.body.foo' or 'window.html.body > foo', or any of the many other > combinations ? I think in jQuery it is something like $(".foo"). > Should I be using the "class" or "id" attributes ? > > Sorry about being a pest, but I am not very JS fluent and a complete > newbie to jQuery. I understand XML well enough. > > If someone could point me in the right direction I would really > appreciate it. |
|
|
Thanks a lot Tom. I'll try this as soon as I get back to work.
On Feb 10, 12:01 pm, Tom <[hidden email]> wrote: > Hello, > You can address your div of choice like... > > '#foo' asJQuery > > So, let's say You wan to load a new content into that div, all You > need is... > > '#foo' asJQuery load: 'http://...' > > Good luck... > > On 10 Feb., 19:43, leonsmith <[hidden email]> wrote: > > > > > > > > > I am able to control the contents of an HTML element if I create it in > > my Amber code, but I can't figure out how to access an element that > > has already been rendered (like when using a template). I created this > > index.html code: > > > <html> > > <head> > > <title>Test of Elements in Amber</title> > > <script src="../../js/amber.js" type="text/javascript"></script> > > </head> > > <body> > > <div id="foo">123</div> > > <article> > > <h1>Element manipulation in Amber</h1> > > <script type="text/javascript"> > > loadAmber({ > > files: ['Dice.js'], > > prefix: 'projects/dice/js', > > ready: function() { > > smalltalk.Browser._open(); > > }}); > > </script> > > </article> > > </body> > > </html> > > ------------------------------- > > so what I want to do is grab the div with the id of 'foo' and replace > > its contents. When I load this page locally and open a workspace, I > > have tried to access that element using all kinds of javascript/JQuery > > syntax but can't find the right combination. Is it > > > 'html.body.foo' or 'window.html.body > foo', or any of the many other > > combinations ? I think in jQuery it is something like $(".foo"). > > Should I be using the "class" or "id" attributes ? > > > Sorry about being a pest, but I am not very JS fluent and a complete > > newbie to jQuery. I understand XML well enough. > > > If someone could point me in the right direction I would really > > appreciate it. |
|
|
Nicolas has written a generic update function in the widget-framework he is helping us in js, it is very similar. Perhaps he can add those methods to the Widget class in Amber.
regards, Göran -- Sent from my Palm Pre 2, wohoo! On Feb 10, 2012 21:56, leonsmith <[hidden email]> wrote: Thanks a lot Tom. I'll try this as soon as I get back to work. On Feb 10, 12:01 pm, Tom <[hidden email]> wrote: > Hello, > You can address your div of choice like... > > '#foo' asJQuery > > So, let's say You wan to load a new content into that div, all You > need is... > > '#foo' asJQuery load: 'http://...' > > Good luck... > > On 10 Feb., 19:43, leonsmith <[hidden email]> wrote: > > > > > > > > > I am able to control the contents of an HTML element if I create it in > > my Amber code, but I can't figure out how to access an element that > > has already been rendered (like when using a template). I created this > > index.html code: > > > <html> > > <head> > > <title>Test of Elements in Amber</title> > > <script src="../../js/amber.js" type="text/javascript"></script> > > </head> > > <body> > > <div id="foo">123</div> > > <article> > > <h1>Element manipulation in Amber</h1> > > <script type="text/javascript"> > > loadAmber({ > > files: ['Dice.js'], > > prefix: 'projects/dice/js', > > ready: function() { > > smalltalk.Browser._open(); > > }}); > > </script> > > </article> > > </body> > > </html> > > ------------------------------- > > so what I want to do is grab the div with the id of 'foo' and replace > > its contents. When I load this page locally and open a workspace, I > > have tried to access that element using all kinds of javascript/JQuery > > syntax but can't find the right combination. Is it > > > 'html.body.foo' or 'window.html.body > foo', or any of the many other > > combinations ? I think in jQuery it is something like $(".foo"). > > Should I be using the "class" or "id" attributes ? > > > Sorry about being a pest, but I am not very JS fluent and a complete > > newbie to jQuery. I understand XML well enough. > > > If someone could point me in the right direction I would really > > appreciate it. |
|
|
In reply to this post by leonsmith
[:html | self doARefreshOfTheContentOfFoo: html ] appendToJQuery: ('#foo' asJQuery empty).
On Fri, Feb 10, 2012 at 7:43 PM, leonsmith <[hidden email]> wrote: I am able to control the contents of an HTML element if I create it in |
«
Return to Amber Smalltalk
|
1 view|%1 views
| Free forum by Nabble | Edit this page |