Re: Seaside+Bootstrap and callbacks
Dominique Dartois <[email protected]>
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
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 <[email protected]> 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 > >> > > > > > >> > > > > > > >> > > > > > >> > > > > > > > > > >> > > > > > [email protected] > >> mailto:[email protected] > >> > > > mailto: [email protected] > >> mailto:[email protected] > >> > > > > >> > > > > > > > > > >> > > > > > > >> > > > > > >> > > > > > > > > > >> > > > > > > >> > > > > >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > >> > > > > >> > > > > > > > > > >> > > > > > > >> > > > > > >> > > > > > > > > > >> > > > > >> > > > > >> > > > > >> > > > -- > >> > > > Sent from: > >> http://forum.world.st/Seaside-General-f86180.html > >> > > > _______________________________________________ > >> > > > seaside mailing list > >> > > > > >> > > > > >> > > > > > > > >> > > > > > >> > > >> > > > > [email protected] > >> mailto:[email protected] > >> > > > >> > > > > > >> > > >> > > > > mailto: > >> > > > >> > > > > > >> > > >> > > > > [email protected] > >> mailto:[email protected] > >> > > > >> > > > > > >> > > >> > > > > > >> > > > > > > > >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > >> > > > > >> > > > > >> > > > > > > > >> > > _______________________________________________ > >> > > seaside mailing list > >> > > > >> > > > > > >> > > >> > > > > [email protected] > >> mailto:[email protected] > >> > > > >> > > > > > >> > > >> > > > > > >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > >> > > > >> > > > > > >> > > >> > > >> > > >> > > >> > -- > >> > Sent from: http://forum.world.st/Seaside-General-f86180.html > >> > _______________________________________________ > >> > seaside mailing list > >> > > > > [email protected] > > > mailto: > > > [email protected] > > >> > > >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > >> > > >> > > _______________________________________________ > >> seaside mailing list > >> > > > [email protected] > > >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > >> > > > > > > > > _______________________________________________ > > seaside mailing list > > > [email protected] > > > 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 > [email protected] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [email protected] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside