[Seaside] Seaside+Bootstrap and callbacks
Dominique Dartois
dom at dartois.org
Sat Feb 23 09:42:55 UTC 2019
You are right it's a better approach. The logic is more centralized.
An other thing I am discovering : the modal window is not really modal because if I click out of the dialog the window closes. I think it's more on the Bootstrap side than on the seaside one.
Regards
---
Dominique Dartois
> Le 22 février 2019 à 23:29, Paul DeBruicker <pdebruic at gmail.com> a écrit :
>
>
> Glad you got it sorted out.
>
> Another approach than your #updateRoot: approach is in the rendering method
> in the component that renders the modal do a
>
>
> html document addLoadScript: ((html jQuery id: 'myModal') call: 'modal').
>
> Then all the modal creation stuff will be in the same method.
>
>
>
>
>
>
> Dominique Dartois-4 wrote
> > 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@
>
> > > 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 :
> >>
>
> >>
> >> 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@
>
> > mailto:
>
> > pdebruic@
>
> > > 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 .squeakfoundation
>
> > mailto:
>
> > seaside at .squeakfoundation
>
> >> >
> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >> >
> >> > > _______________________________________________
> >> seaside mailing list
> >>
>
> > seaside at .squeakfoundation
>
> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >>
> >
> >
> >
> > _______________________________________________
> > seaside mailing list
>
> > seaside at .squeakfoundation
>
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >
> >
> > image.png (47K)
> > <http://forum.world.st/attachment/5095917/0/image.png>
>
>
>
>
>
> --
> Sent from: http://forum.world.st/Seaside-General-f86180.html
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
More information about the seaside
mailing list