Rendering on HTML and Script canvas

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

Rendering on HTML and Script canvas

Esteban A. Maringolo
Hello all,

I find myself rendering a lot on JSScript instances via AJAX, and in
some cases the elements I render have to create separate <script> tags
to initialize or execute something on the client side.

When doing a full page request we have the addLoadScript: and we can
pass that script around our object to append whatever we want on top of
it. But on AJAX we don't have such feature.

Did anybody played with having a `renderContentOn: html script: script`
kind of method?

I haven't fully thought about this, but I guess the script would be
initialized very early in the rendering process and would be finally
returned as a single <script> tag containing all what was added by the
rendered components.

Best regards,

--
Esteban A. Maringolo

_______________________________________________
seaside-dev mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev
Reply | Threaded
Open this post in threaded view
|

Re: Rendering on HTML and Script canvas

Max Leske
Hi Esteban,

Not sure how it currently is in Seaside 3 but in 2.8 #addLoadScript: also works for asynchronous calls. The downside is, that this has to be done through the use of eval as script tags aren't executed automatically by the browsers (IIRC). That is one reason why I'm moving away from scripts rendered by Seaside. I prefer to have a separate javascript file that knows what to do and can communicate with the image, e.g. through a JSON API. The amount of work is obviously a bit greater but I find that it also helps to separate concerns and improve the design of the application.

That being said, what you want should still be possible for people that absolutely want to use it, e.g. because they use it only seldomly and don't want to put in the extra work.

Cheers,
Max

On 3 April 2018 at 20:08:33, Esteban A. Maringolo ([hidden email]) wrote:

Hello all,

I find myself rendering a lot on JSScript instances via AJAX, and in
some cases the elements I render have to create separate <script> tags
to initialize or execute something on the client side.

When doing a full page request we have the addLoadScript: and we can
pass that script around our object to append whatever we want on top of
it. But on AJAX we don't have such feature.

Did anybody played with having a `renderContentOn: html script: script`
kind of method?

I haven't fully thought about this, but I guess the script would be
initialized very early in the rendering process and would be finally
returned as a single <script> tag containing all what was added by the
rendered components.

Best regards,

--
Esteban A. Maringolo

_______________________________________________
seaside-dev mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev

_______________________________________________
seaside-dev mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev
Reply | Threaded
Open this post in threaded view
|

Re: Rendering on HTML and Script canvas

Johan Brichau-2
In reply to this post by Esteban A. Maringolo
Hi Esteban,

On 3 Apr 2018, at 20:08, Esteban A. Maringolo <[hidden email]> wrote:

I find myself rendering a lot on JSScript instances via AJAX, and in
some cases the elements I render have to create separate <script> tags
to initialize or execute something on the client side.

When doing a full page request we have the addLoadScript: and we can
pass that script around our object to append whatever we want on top of
it. But on AJAX we don't have such feature.

If you have a method like this:

renderOn: html
html addLoadScript: (self someScript)

and you invoke it in an ajax request like this:

(html jQuery id: #id) load html:[:r | self renderOn: r ].

Then the script generated in ‘someScript’ will be executed when the html is loaded on the page.
Seaside adds the loadscripts explicitly to the rendered html as script tags that get executed by jQuery when loaded in an ajax request.

You can also do it ‘manually' like this:

(html jQuery id: #id) load html:[:r | 
self renderOn: r. 
r script: self someScript ].

Which is actually the same, just less convenient.

Is this what you are looking for? Can you share an example where it does not work or fit your needs?

cheers!
Johan

_______________________________________________
seaside-dev mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev
Reply | Threaded
Open this post in threaded view
|

Re: Rendering on HTML and Script canvas

Esteban A. Maringolo
On 05/04/2018 02:25, Johan Brichau wrote:
> Hi Esteban,
>
>> On 3 Apr 2018, at 20:08, Esteban A. Maringolo <[hidden email]
>> <mailto:[hidden email]>> wrote:

>> When doing a full page request we have the addLoadScript: and we can
>> pass that script around our object to append whatever we want on top of
>> it. But on AJAX we don't have such feature.

> You can also do it ‘manually' like this:
>
> (html jQuery id: #id) load html:[:r |
> self renderOn: r.
> r script: self someScript ].

> Which is actually the same, just less convenient.
> Is this what you are looking for? Can you share an example where it does
> not work or fit your needs?

The above is what I usually do, but lately I switched to use #script:
and a #replaceWith:. Because that way I can handle also callbacks, and
other other things in a single HTTP roundtrip instead of performing a
#callback:/#onSuccess:, also the code is easier to implement. It's
heretic, but I found it to be better.


So, let's say:
html anchor
  onClick: ((html jQuery ajax
                callback: [self doSomething])
                        onSuccess: ((html jQuery id: #id)
                                load html: [:r | self renderOn: r ]))).

Is converted to this:

html anchor
  onClick: (html jQuery ajax script: [:s |
                self doSomething.
                s << ((html jQuery id: #id) replaceWith: [:r |
                        self renderOn: r ])
                ]).


Maybe the replaceWith: doesn't trigger the "onLoad" event?


I should write a vanilla example to test the different cases. I'll try
to do it tomorrow.

Regards!

--
Esteban A. Maringolo
_______________________________________________
seaside-dev mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev