Complex popup with JQuery

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

Complex popup with JQuery

BrunoBB
Hi,

I want to create a complex popup with JQuery. Until now were simple JQuery
popups like confirmation dialog, information dialog and so on ("one click
and close dialog").

But now a complex popup is required and the web user will perform various
different operation on the popup window requiring information from the
server.

Is there anyway to tell Seaside to update only the component of the JQuery
popup ?
(using some high level AJAX library for Seaside - maybe this does not exist)

Or i have to do an AJAX query for each Seaside component of the popup and
populate the required changes ?
I think the ultimate questions is: can this be done for a whole component or
i have to handle an AJAX query for each individual component in the popup.

It will useful to know how other Seaside user implement complex JQuery
popups.

regards,
bruno
<http://forum.world.st/file/t111409/popup-01.jpg>




--
Sent from: http://forum.world.st/Seaside-General-f86180.html
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Complex popup with JQuery

jtuchel
Bruno,

if you do a

(html ajax callback: ()) onComplete:(html jQuery: idOfRootCompForRedraw)
load html: [html render: rootComponentForRedraw]

(not tested, just from my head)
this should redraw the complete subtree of rootComponentForRedraw. If
this component is inside your popup, the popup will be redrawn. So you
do do both: just redraw individual components or redraw complex
component trees.

One thind to keep in mind, however, is that you need to be careful when
using forms in popups. A Form will only submit its own contents, and it
will redraw the whole page. So forms with submitbuttons etc. are a no-go
for popups, or you need to work some JS magic around that.

HTH

Joachim



Am 16.03.18 um 20:35 schrieb BrunoBB:

> Hi,
>
> I want to create a complex popup with JQuery. Until now were simple JQuery
> popups like confirmation dialog, information dialog and so on ("one click
> and close dialog").
>
> But now a complex popup is required and the web user will perform various
> different operation on the popup window requiring information from the
> server.
>
> Is there anyway to tell Seaside to update only the component of the JQuery
> popup ?
> (using some high level AJAX library for Seaside - maybe this does not exist)
>
> Or i have to do an AJAX query for each Seaside component of the popup and
> populate the required changes ?
> I think the ultimate questions is: can this be done for a whole component or
> i have to handle an AJAX query for each individual component in the popup.
>
> It will useful to know how other Seaside user implement complex JQuery
> popups.
>
> regards,
> bruno
> <http://forum.world.st/file/t111409/popup-01.jpg>
>
>
>
>
> --
> Sent from: http://forum.world.st/Seaside-General-f86180.html
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


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

Re: Complex popup with JQuery

CyrilFerlicot

On sam. 17 mars 2018 at 08:12, [hidden email] <[hidden email]> wrote:
Bruno,

if you do a

(html ajax callback: ()) onComplete:(html jQuery: idOfRootCompForRedraw)
load html: [html render: rootComponentForRedraw]

(not tested, just from my head)
this should redraw the complete subtree of rootComponentForRedraw. If
this component is inside your popup, the popup will be redrawn. So you
do do both: just redraw individual components or redraw complex
component trees.

One thind to keep in mind, however, is that you need to be careful when
using forms in popups. A Form will only submit its own contents, and it
will redraw the whole page. So forms with submitbuttons etc. are a no-go
for popups, or you need to work some JS magic around that.

Hi,

In that case you can override the submit function to disable it and manage the inputs submit with Ajax I think. 

I already did that IIRC but I don't have a computer to check the actual code. 

In MaterialDesignLite project I did an extension to easily manage complexe dialogs easily. When I'll have some time and my computer I'll try to send what I did. 



HTH

Joachim



Am 16.03.18 um 20:35 schrieb BrunoBB:
> Hi,
>
> I want to create a complex popup with JQuery. Until now were simple JQuery
> popups like confirmation dialog, information dialog and so on ("one click
> and close dialog").
>
> But now a complex popup is required and the web user will perform various
> different operation on the popup window requiring information from the
> server.
>
> Is there anyway to tell Seaside to update only the component of the JQuery
> popup ?
> (using some high level AJAX library for Seaside - maybe this does not exist)
>
> Or i have to do an AJAX query for each Seaside component of the popup and
> populate the required changes ?
> I think the ultimate questions is: can this be done for a whole component or
> i have to handle an AJAX query for each individual component in the popup.
>
> It will useful to know how other Seaside user implement complex JQuery
> popups.
>
> regards,
> bruno
> <http://forum.world.st/file/t111409/popup-01.jpg>
>
>
>
>
> --
> Sent from: http://forum.world.st/Seaside-General-f86180.html
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
Cyril Ferlicot
https://ferlicot.fr

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

Re: Complex popup with JQuery

Esteban A. Maringolo
In reply to this post by jtuchel
2018-03-17 4:12 GMT-03:00 [hidden email] <[hidden email]>:
> Bruno,
>
> if you do a
>
> (html ajax callback: ()) onComplete:(html jQuery: idOfRootCompForRedraw)
> load html: [html render: rootComponentForRedraw]
>
> (not tested, just from my head)

The "fixed" version would be something like this:

onClick: ((html jQuery ajax callback: ["..."]) onComplete: (
                 (html jQuery id: idOfRootCompForRedraw)
                   load html: [:h | h render: rootComponentForRedraw]))

Another alternative is to execute the callback within a script
response, saving one extra HTTP roundtrip for the "onComplete".

onClick: (html jQuery ajax script: [:s |
                "your callback actions".
                (html jQuery id: idOfRootCompForRedraw) html: [:h | h
render: rootComponentForRedraw]
               ])

> this should redraw the complete subtree of rootComponentForRedraw. If this
> component is inside your popup, the popup will be redrawn. So you do do
> both: just redraw individual components or redraw complex component trees.

I managed to get a similar behavior using Bootstrap's Popover plugin
<https://getbootstrap.com/docs/3.3/javascript/#popovers>, where the
popover is dynamically attached and its content is loaded from the
server once opened (so you get an "updated" content every time you
open it).

> One thind to keep in mind, however, is that you need to be careful when
> using forms in popups. A Form will only submit its own contents, and it
> will redraw the whole page. So forms with submitbuttons etc. are a no-go
> for popups, or you need to work some JS magic around that.

Submit buttons cause a full page reload, unless you handle the submit
event and return false at the end.
Why I do these days is submit almost everything using
#serializeChildren: on the form, triggered by a button or anchor that
IS NOT a submit button.

There are a lot of "recipes" like this that we should share in the
Seaside wiki or somewhere.

Regards,
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside