[Seaside] Seaside+Bootstrap and callbacks
Dominique Dartois
dom at dartois.org
Fri Feb 22 22:14:04 UTC 2019
Finally, I've found the right syntax to initialize the modal window :
updateRoot: anHtmlRoot
super updateRoot: anHtmlRoot.
anHtmlRoot bodyAttributes at: 'onLoad' append: '$( function(){$(''#myModal'').modal();})'.
Thanks again Paul.
---
Dominique Dartois
> Le 22 février 2019 à 21:44, Dominique Dartois <dom at dartois.org> a écrit :
>
> Thank you Paul for the time you spend writing this code.
> I can see the <div> in the debugger appearing if I click the show button and desappearing with a click on Hide, BUT the modal window doesn’t show up.
> I have read on https://stackoverflow.com/questions/18855331/bootstrap-3-data-show-not-working that the modal must be initialized first with something like :
> <script type="text/javascript">
> $( function(){
> $('#myModal').modal();
> } )
> </script>
>
> I am trying to put this code in the WAComponent>>updateRoot: method without success.
>
> Regards,
> ---
> Dominique
>
>
> > > Le 19 février 2019 à 01:04, Paul DeBruicker < pdebruic at gmail.com mailto:pdebruic at gmail.com > a écrit :
> >
> >
> > The #callback: as you're using it in the button doesn't render HTML to the
> > page. It just tells seaside to change something in the image and then
> > re-render.
> >
> > Because of that your #action: method, if it ran, wouldn't change the page.
> >
> > When Seaside re-renders your app, depending on what you do in the callback,
> > it might re-render the page with some changes or another page.
> >
> > It looks like you want to open a modal over the current page when the button
> > is clicked. Right?
> >
> > If so, two ways that come to mind to do that are to either, after the button
> > is clicked,
> >
> > - re-draw the page with the modal dialog HTML code rendered in it and set
> > to open on load,
> >
> > or
> >
> > - load the modal dialog HTML code into the existing page with
> > Javascript/Ajax and open the modal.
> >
> >
> >
> > The first way:
> >
> > MyBootstrap>>initialize.
> >
> > super initialize.
> > showModal:=false.
> >
> > MyBootstrap>>renderContentOn: html
> > self renderMyButton: html
> > self renderMyModal: html.
> >
> > MyBootstrap>>renderMyButton: html
> > html anchor
> > class:'btn btn-primary';
> > callback: [self showModal];
> > with: 'Show modal'.
> >
> > html anchor
> > class:'btn btn-default';
> > callback: [self hideModal];
> > with: 'Hide modal'.
> >
> > MyBootstrap>>showModal
> > showModal := true.
> >
> > MyBootstrap>>hideModal
> > showModal := false.
> >
> > My Bootstrap>>renderMyModal: html
> > showModal ifTrue:[
> > html tbsModal
> > id: 'myModal';
> > attributeAt: 'data-show' put: true; "<--- opens the modal when rendered
> > on the new page"
> > with: [ html
> > tbsModalDialog: [ html
> > tbsModalContent: [ html
> > etc, etc...
> > ].
> >
> >
> > Another approach could be to use jQuery to load the modal into the page and
> > open it when the button is clicked.
> >
> >
> > If so I'd do it like this:
> >
> >
> > renderContentOn: html
> > html tbsButton
> > bePrimary;
> > onClick: ((html jQuery id: 'myModalContainer') load html:[:h | self action:
> > h]; onComplete:((html jQuery id: 'myModal') call: 'modal' with: 'show');
> > with: 'Modal'.
> >
> > html div id:'myModalContainer'.
> >
> >
> >
> > And keep your #action: method as you have it now.
> >
> >
> >
> >
> >
> >
> > Dominique Dartois-4 wrote
> >
> > > > > I would to open a dialog like this :
> > >
> > > WAComponent subclass: #MyBootstrap
> > >
> > > MyBootstrap>>renderContentOn: html
> > > html tbsButton
> > > bePrimary;
> > > callback: [self action: html];
> > > with: 'Modal'.
> > >
> > > MyBootstrap>>action: html
> > > html
> > > html tbsModal
> > > id: 'myModal';
> > > with: [ html
> > > tbsModalDialog: [ html
> > > tbsModalContent: [ html
> > > etc, etc...
> > >
> > > The callback is never triggered.
> > >
> > > ---
> > > Dominique Dartois
> > >
> > >
> > >
> > > > > > > Le 17 février 2019 à 23:23, Paul DeBruicker <
> > > >
> > > > > > >
> > > > >
> >
> > > > > pdebruic@
> > >
> > > > >
> >
> > > > > mailto:
> > >
> > > > >
> >
> > > > > pdebruic@
> > >
> > > > >
> >
> > > > > > a écrit :
> > >
> > > > > > >
> > > >
> > > > Seaside callbacks shouldn't be affected by bootstrap at all.
> > > >
> > > >
> > > > Bootstrap's javascript for their modal looks for the
> > > >
> > > > data-toggle="modal"
> > > >
> > > > attribute and sets a click handler on those elements that
> > > > opens/closes the
> > > > modal when clicked. (See the example at
> > > > https://getbootstrap.com/docs/4.3/components/modal/)
> > > >
> > > >
> > > > What are you trying to do that you can't get working?
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > Dominique Dartois-4 wrote
> > > >
> > > > > > Hi all.
> > > >
> > > > > > > > >
> > > > > I’m trying to use Bootstrap with Seaside and I don’t find the
> > > > >
> > > > > > > > > notion of
> > > >
> > > > > > > > > Callback. In the ‘Modal example’ the launch of the modal window
> > > > >
> > > > > > > > > is done by
> > > >
> > > > > > > > > a href attribute in a html statement and not a callback in the
> > > > >
> > > > > > > > > Smalltalk
> > > >
> > > > > > > > > code.
> > > > >
> > > > > The statement :
> > > > >
> > > > > html: '
> > > > > Launch demo modal <#myModal>
> > > > > '.
> > > > >
> > > > > Is it a choice for this example or is it impossible to use a
> > > > >
> > > > > > > > > Callback with
> > > >
> > > > > > > > > Bootstrap for Seaside?
> > > > >
> > > > >
> > > > > I am using Pharo 7 64 bits and the latest package
> > > > >
> > > > > > > > > Seaside+Bootstrap.
> > > >
> > > > > > > > >
> > > > > Regards,
> > > > > ---
> > > > > Dominique Dartois
> > > > >
> > > > > _______________________________________________
> > > > > seaside mailing list
> > > > >
> > > > > >
> > > > >
> > > > > > > > >
> > > > > > seaside at .squeakfoundation mailto:seaside at .squeakfoundation
> > > > mailto: seaside at .squeakfoundation mailto:seaside at .squeakfoundation
> > > >
> > > > > > > > >
> > > > > >
> > > > >
> > > > > > > > >
> > > > > >
> > > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> > > >
> > > > > > > > >
> > > > > >
> > > > >
> > > > > > > > >
> > > >
> > > >
> > > >
> > > > --
> > > > Sent from: http://forum.world.st/Seaside-General-f86180.html
> > > > _______________________________________________
> > > > seaside mailing list
> > > >
> > > >
> > > > > > >
> > > > >
> >
> > > > > seaside at .squeakfoundation mailto:seaside at .squeakfoundation
> > >
> > > > >
> >
> > > > > mailto:
> > >
> > > > >
> >
> > > > > seaside at .squeakfoundation mailto:seaside at .squeakfoundation
> > >
> > > > >
> >
> > > > >
> > > > > > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> > > >
> > > >
> > > > > > >
> > > _______________________________________________
> > > seaside mailing list
> > >
> > > > >
> >
> > > > > seaside at .squeakfoundation mailto:seaside at .squeakfoundation
> > >
> > > > >
> >
> > > > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> > >
> > > > >
> >
> >
> >
> >
> > --
> > Sent from: http://forum.world.st/Seaside-General-f86180.html
> > _______________________________________________
> > seaside mailing list
> > seaside at lists.squeakfoundation.org mailto:seaside at lists.squeakfoundation.org
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >
> > > _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20190222/fd361681/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 35262 bytes
Desc: not available
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20190222/fd361681/attachment-0001.png>
More information about the seaside
mailing list